Smooth CSS3 Animated Slideshow Plugin With jQuery - Image Carousel

A simple, dynamic jQuery carousel slideshow plugin which uses CSS3 transitions to fade infinitely through an array of images defined in the JavaScript.

How to use it:

1. Create an empty HTML5 unordered list for the slideshow.

<ul class="slider">
  <!-- next / prev navigation -->
  <span class="left arrow">&#171;</span>
  <span class="right arrow">&#187;</span>
</ul>

2. The core CSS styles for the slideshow. You might need to change the fixed height to a percentage value for responsive web layout.

.slider {
  position: relative;
  width: 600px;
  height: 450px;
  margin: auto;
  padding: 0;
}

.slider li {
  position: absolute;
  top: 0;
  width: 100%;
  transition: opacity 0.85s ease;
}

.slider li span {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.4);
  padding: 3px 8px;
  border-radius: 3px;
}

.slider img { width: 100%; }

.slider .arrow {
  position: absolute;
  cursor: pointer;
  width: 50px;
  height: 100px;
  font-size: 40px;
  top: 50%;
  margin-top: -50px;
  text-align: center;
  line-height: 100px;
  z-index: 1;
  transition: background 0.4s ease-out;
  text-shadow: 1px 2px 2px #000;
  background: rgba(0, 0, 0, 0.3);
}

.slider .left.arrow {
  left: 0;
  border-radius: 0 8px 8px 0;
}

.slider .right.arrow {
  right: 0;
  border-radius: 8px 0 0 8px;
}

.slider .arrow:hover { background: rgba(0, 0, 0, 0.5); }

.slider .hidden { opacity: 0; }

3. Create an array of images for the slideshow.

var carouselImages = [
    {
      image_url: 'https://unsplash.it/600/450?image=672',
      title: 'Matthew Wiebe',
      photographer_id: 'unsplashs'
    },
    {
     image_url: 'https://unsplash.it/600/450?image=671',
      title: 'Nuno Silva',
      photographer_id: 'unsplashs'
    },
    {
      image_url: 'https://unsplash.it/600/450?image=670',
      title: 'Gabriel Garcia Marengo',
      photographer_id: 'unsplashs'
    },
    {
     image_url: 'https://unsplash.it/600/450?image=674',
      title: 'Maja Petric',
      photographer_id: 'unsplashs'
    },
    {
      image_url: 'https://unsplash.it/600/450?image=676',
      title: 'Drew Patrick Miller',
      photographer_id: 'unsplashs'
    },
    {
      image_url: 'https://unsplash.it/600/450?image=680',
      title: 'Milada Vigerova',
      photographer_id: 'unsplashs'
    }
];

4. Include the needed jQuery library at the bottom of the webpage.

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>

5. The jQuery script to active the slideshow.

var slide, slider = $('.slider'), leftArrow = slider.find('.left'), rightArrow = slider.find('.right');

carouselImages.forEach(function(obj){
  var content = $('<li><img src="' + obj.image_url + '"><span>"' + obj.title + '" by <a href="#">' + obj.photographer_id + '</a></span></li>');
  $('.slider').append(content);
});

slides = $('.slider li');
slides.last().addClass('active');

leftArrow.click(function(){
  if ($('.active').prev().prop('tagName') === "LI") $('.active')
      .removeClass('active')
      .addClass('hidden')
      .prev().addClass('active');
  else slides.removeClass('active hidden').last().addClass('active');
});

rightArrow.click(function(){
  console.log($('.active').next().length);
  if ($('.active').next().length) $('.active')
      .removeClass('active')
      .next().removeClass('hidden')
      .addClass('active');
  else slides.removeClass('active').addClass('hidden')
          .first().removeClass('hidden').addClass('active');
});

---

This awesome jQuery plugin is developed by agentkenny007. For more Advanced Usages, please check the demo page or visit the official website.