Image Slider

HTML

<div class="slideshow">

  <div class="myslides">
    <div class="slides">
    <div class="nav">
      <a class="btn-prev">&lt</a>
      <a class="btn-next">&gt</a>
    </div>
      <div class="myimage">
        <div class="title">
          <span class="title-text">Image 1 </span>
        </div>
        <img src="http://placehold.it/400x300" />
      </div>

      <div class="myimage">
        <div class="title">
          <span class="title-text">Image 2</span>
        </div>
        <img src="http://placehold.it/200x200" />
      </div>

      <div class="myimage">
        <div class="title">
          <span class="title-text">Image 3 </span>
        </div>
        <img src="http://placehold.it/400x250" />
      </div>
    </div>
  </div>
</div>

CSS

.nav {
  position: absolute;
  width: 100%;
  height: 20px;
  padding-bottom: 2px;
  z-index: 1;
  margin-top: -20px;
  transition: margin-top 200ms ease-in;
  background: black;
  opacity: 0.4;
  left: 0;
  top: 0;
  text-align: right;
}
.btn-prev,
.btn-next{
  color: black;
  background:white;
  border: 2px solid white;
  margin: 0px 5px 0px 0px;
  cursor: pointer;
  padding: 0px 5px 0px 5px;
  display: inline-block;
}


.slides:hover .nav {
  margin-top: 0px
}

.myslides {
  max-width: 400px;
  overflow: hidden;
  position: relative;
}

.myimage {
  overflow: hidden;
  position: relative;
  display: none;
}

.myimage img {
  width: 100%;
  display:block;
}

.title {
  position: absolute;
  width: 85%;
  height: 20px;
  padding-bottom: 2px;
  margin-top: -25px;
  transition: margin-top 200ms ease-in;
  background: black;
  color: white;
  opacity: 0.6;
}

.title-text {
  float: left;
  padding-left: 5px;
}

.slides:hover .title {
   margin-top: 0px;
}

JavaScript

$(document).ready(function() {

  $('a.btn-prev').click(function() {
  	console.log($(this).parents('.slideshow').find('.slides'));
    prevSlide($(this).parents('.slideshow').find('.slides'));

  });

  $('a.btn-next').click(function() {
    nextSlide($(this).parents('.slideshow').find('.slides'));

  });

  //initialize show
  iniShow();

  function iniShow() {
    //show first image
    $('.slideshow').each(function() {
      $(this).find('.myimage:first').fadeIn(500);
    })
  }

  function prevSlide($slides) {
    $slides.find('.myimage:last').prependTo($slides);
    showSlide($slides);
  }

  function nextSlide($slides) {
    $slides.find('.myimage:first').appendTo($slides);
    showSlide($slides);
  }

  function showSlide($slides) {
    //hide (reset) all slides
    $slides.find('.myimage').hide();
    //fade in next slide
    $slides.find('.myimage:first').fadeIn(300);
  }
});