title: jQuery FadeOut FadeIn
body: <p>I am messing with html, css and jquery, and I've run in this problem. 
  I have a slideshow that gets images using fadeIn and fadeOut from a container, but when I press 'next', it's resetting the page and loads the next image somewhere at the bottom.
  Can you tell me what's the problem?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="slideshow "&gt;
  &lt;div class="container"&gt;
  &lt;div class="slides"&gt;
  &lt;img class ="slide active-slide" src="http://gearnuke.com/wp-content/uploads/2015/06/GTA-5.jpg"&gt;
  &lt;img class ="slide" src="http://cdn.wegotthiscovered.com/wp-content/uploads/gta5.jpg"&gt;
  &lt;img class ="slide" src="http://www.igta5.com/images/official-artwork-trevor-yellow-jack-inn.jpg"&gt;
  &lt;img  class="slide" src="http://cdn2.knowyourmobile.com/sites/knowyourmobilecom/files/styles/gallery_wide/public/0/67/GTAV-GTA5-Michael-Sweatshop-1280-2277432.jpg?itok=nKEHENTW"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;div class="container "&gt;
  &lt;ul class="slider-dots"&gt;
  &lt;a href="#/" class="arrow-prev"&gt;&lt;&lt;&lt;/a&gt;
      &lt;li class="dot active-dot"&gt;&amp;bull;&lt;/li&gt;
      &lt;li class="dot"&gt;&amp;bull;&lt;/li&gt;
      &lt;li class="dot"&gt;&amp;bull;&lt;/li&gt;
      &lt;li class="dot"&gt;&amp;bull;&lt;/li&gt;
  &lt;a href="#/" class="arrow-next"&gt;&gt;&gt;&lt;/a&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jquery</p>
  
  <pre><code>var main=function(){
  $('.arrow-next').click(function(event){
      event.stopPropagation();
      var currentSlide=$('.active-slide');
      var nextSlide=$('.active-slide').next();
  
      var currentDot=$('.active-dot');
      var nextDot=currentDot.next();
  
      if(nextSlide.length==0) {nextDot=$('.dot').first(); nextSlide=$('.slide').first();}
  
      currentSlide.fadeOut().removeClass('active-slide');
      nextSlide.fadeIn().addClass('active-slide');
  
      currentDot.removeClass('active-dot');
      nextDot.addClass('active-dot');
  
  
  }); 
  
  $('.arrow-prev').click(function(event){
      event.stopPropagation();
      var currentSlide=$('.active-slide');
      var prevSlide=currentSlide.prev();
  
      var currentDot=$('.active-dot');
      var prevDot=currentDot.prev();
  
  if(prevSlide.length==0) {prevDot=$('.dot').last(); prevSlide=$('.slide').last();}
  
      currentSlide.fadeOut().removeClass('active-slide');
      prevSlide.fadeIn().addClass('active-slide');
  
      currentDot.removeClass('active-dot');
      prevDot.addClass('active-dot');
  
  }); 
  </code></pre>
  
  <p>};</p>
  
  <p>$(document).ready(main);</p>
  
  <p>You can see it all in this
         <code>fiddle</code><a href="http://jsfiddle.net/1zLd58yo/" rel="nofollow">http://jsfiddle.net/1zLd58yo/</a></p>