Simple Auto-sliding Image Carousel Plugin with jQuery - Snail Slider

Snail Slider is a plain, straightforward jQuery plugin used to create an auto-sliding image carousel for your website's header slideshow.

How to use it:

1. Include the jQuery snail slider plugin after you have jQuery installed.

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

2. Insert the images into your web page as follows.

<div id="slider-wrapper">
  <div id="slider-inner">
    <div id="slide-canvas" name="slide_canvas">
      <div> <img src="1.jpg"> </div>
      <div> <img src="2.jpg"> </div>
      <div> <img src="3.jpg"> </div>
      <div> <img src="4.jpg"> </div>
      <div> <img src="5.jpg"> </div>
    </div>
  </div>
  <div id="slider-control"> </div>
</div>

3. The core CSS styles for the image carousel.

#slider-wrapper {
  width: 840px;
  height: 285px;
  border: 1px solid #676767;
  overflow: hidden;
  background: #4a4a4a;
  box-shadow: inset 0px 0px 60px #000;
}

#slider-inner {
  overflow: hidden;
  width: 800px;
  border-left: 1px solid #676767;
  border-right: 1px solid #676767;
  border-top: 1px solid #676767;
  border-bottom: 1px solid #676767;
  text-align: center;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0px 0px 5px #000;
}

#slide-canvas {
  overflow: visible;
  position: relative;
  height: 220px;
  background: #676767;
}

.slider-slide {
  overflow: hidden;
  height: 220px;
  width: 800px;
  background: #676767;
  display: inline;
  position: relative;
  float: left;
}

.slider-slide img {
  width: 800px;
  height: auto;
  display: block;
  border: none;
}

.slider-slide a { text-decoration: none; }

4. Style the carousel control whatever you like in the CSS.

.slide-control {
  width: 30px;
  height: 15px;
  display: inline-block;
  margin: 13px 5px 13px 5px;
  background: #222;
  cursor: pointer;
  border-radius: 0px;
}

.slide-control-active {
  background: #a5a5a5;
  box-shadow: 0px 0px 5px #000;
  border: 2px solid #fff;
  margin: 13px 5px 13px 5px;
}

.slide-control-inactive {
  border: 2px solid #222;
  background: #000000;
}

---

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