slideShow

HTML

<div id="slideshow">
  <div id="slideshowWindow">
    <div class="slide">
      <img src="https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_960_720.png" />
      <div class="slideText">
        <h2 class="slideTitle">Slide 1</h2>
        <p class="slideDes">Example taken from http://www.webchiefdesign.co.uk/blog/simple-jquery-slideshow/index.php?page=1</p>
        <p class="slideLink"><a href="#">click here</a>

        </p>
      </div>
      <!--/slideText-->
    </div>
    <!--/slide-->
    <div class="slide">
      <img src="https://static.pexels.com/photos/3247/nature-forest-industry-rails.jpg" />
      <div class="slideText">
        <h2 class="slideTitle">Slide 2</h2>
        <p class="slideDes">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p class="slideLink"><a href="#">click here</a>

        </p>
      </div>
      <!--/slideText-->
    </div>
    <!--/slide-->
    <div class="slide">
      <img src="https://www.w3schools.com/w3images/fjords.jpg" />
      <div class="slideText">
        <h2 class="slideTitle">Slide 3</h2>
        <p class="slideDes">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p class="slideLink"><a href="#">click here</a>

        </p>
      </div>
      <!--/slideText-->
    </div>
    <!--/slide-->
  </div>
  <!--/slideshowWindow-->
</div>
<!--/slideshow-->

CSS

#slideshow #slideshowWindow {
  width: 500px;
  height: 257px;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

#slideshow #slideshowWindow .slide {
  margin: 0;
  padding: 0;
  width: 500px;
  height: 257px;
  position: relative;
}

#slideshow #slideshowWindow .slide .slideText {
  position: absolute;
  top: 130px;
  left: 0px;
  width: 100%;
  height: 130px;
  background-image: url(greyBg.png);
  background-repeat: repeat;
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-family: Myriad Pro, Arial, Helvetica, sans-serif;
}

#slideshow #slideshowWindow .slide .slideText a:link,
#slideshow #slideshowWindow .slide .slideText a:visited {
  color: #ffffff;
  text-decoration: none;
}

#slideshow #slideshowWindow .slide .slideText h2,
#slideshow #slideshowWindow .slide .slideText p {
  margin: 10px 0 0 10px;
  padding: 0;
}

JavaScript

$(document).ready(function() {
  var currentPosition = 0;
  var slideWidth = 500;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  var slideShowInterval;
  var speed = 3000;
  slideShowInterval = setInterval(changePosition, speed);
  slides.wrapAll('<div id="slidesHolder"></div>');
  slides.css({
    'float': 'left'
  });
  $('#slidesHolder').css('width', slideWidth * numberOfSlides);

  function changePosition() {
    if (currentPosition == numberOfSlides - 1) {
      currentPosition = 0;
    } else {
      currentPosition++;
    }
    moveSlide();
  }

  function moveSlide() {
    $('#slidesHolder').animate({
      'marginLeft': slideWidth * (-currentPosition)
    });
  }
});