Automatic Image Carousel With jQuery - mSlide.js

mSlide.js is a small and easy jQuery slider plugin which transform an image list into an automatic, infinitely looping carousel UI. You can also manually switch between images by hovering over the pagination links.

How to use it:

1. Create a list of images like this:

<div id="box">
  <div class="list">
    <ul>
      <li><img src="0.jpg"></li>
      <li><img src="1.jpg"></li>
      <li><img src="2.jpg"></li>
      <li><img src="3.jpg"></li>
      <li><img src="4.jpg"></li>
    </ul>
  </div>
</div>

2. Style the image carousel.

#box {
  position: relative;
  width: 492px;
  height: 172px;
  background: #fff;
  border-radius: 5px;
  border: 8px solid #fff;
  margin: 10px auto;
  cursor: pointer;
}

#box .list {
  position: relative;
  width: 490px;
  height: 170px;
  overflow: hidden;
}

#box .list ul {
  position: absolute;
  top: 0;
  left: 0;
}

#box .list li {
  width: 490px;
  height: 170px;
  overflow: hidden;
}

#box .list img {
  width: 490px;
  height: 170px;
}

3. Style the generated pagination links.

#box .count {
  position: absolute;
  right: 0;
  bottom: 5px;
}

#box .count li {
  color: #fff;
  float: left;
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin-right: 5px;
  overflow: hidden;
  background: #F90;
  opacity: 0.7;
  filter: alpha(opacity=70);
  border-radius: 20px;
}

#box .count li.current {
  opacity: 1;
  filter: alpha(opacity=100);
  font-weight: 700;
  background: #f60;
}

4. Include jQuery library and the jQuery mSlide.js script on the web page.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script> 
<script src="lib/jquery.slide.js"></script> 

5. Initialize the plugin and done.

window.onload = function() {
  $('#box').mSlide();
};

6. Change the default direction to make the carousel automatically back to the first image when you reach the last one.

window.onload = function() {
  $('#box').mSlide({
    direction: 'forwards'
  });
};

---

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