Basic Smooth Image Slider With jQuery And Velocity.js - xSlider

xSlider is a simple yet customizable image slider / carousel plugin that uses Velocity.js library for fast smooth sliding animations.

How to use it:

1. Create a list of images and the wrap them into a slider wrapping element as follows.

<div class="slider-warp">
  <div>
    <ul>
      <li>
        <img src="1.jpg">
      </li>
      <li>
        <img src="2.jpg">
      </li>
      <li>
        <img src="3.jpg">
      </li>
    </ul>
  </div>
</div>

2. Include jQuery library, Velocity.js and the jQuery xSlider plugin's script at the bottom of the webpage.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/velocity.min.js"></script>
<script src="src/xSlider.js"></script>

3. Initialize the image slider.

$('.slider-warp').xSlider();

4. Style the image slider. Note that the wrapping element must have a fixed height.

.slider-warp {
  width: 500px;
  height: 281px; 
  position: relative;
  overflow: hidden;
}

.slider-warp ul {
  padding: 0px;
  margin: 0px;
  position: absolute;
}

.slider-warp li { list-style: none; }

.slider-warp li img {
  display: block;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

.xslider-nav {
  position: absolute;
  z-index: 2;
  bottom: 2px;
  text-align: center;
  width: 100%;
  margin: 5px 0px;
}

.xslider-nav span {
  display: inline-block;
  width: 0px;
  height: 0px;
  margin: 0 4px;
  padding: 3px;
  background: transparent;
  border-radius: 5px;
  border: 2px solid white;
  cursor: pointer;
  opacity: 0.7;
}

.xslider-nav span.active { background: white; }

.xslider-arrow {
  top: 50%;
  position: absolute;
  width: 100%;
}

.xslider-arrow span {
  display: block;
  width: 32px;
  height: 32px;
  right: 15px;
  position: absolute;
  margin-top: -16px;
  overflow: hidden;
  background: rgba(0,0,0,.2) no-repeat 50% 50%;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAQAAABuQZ3IAAAAi0lEQVR4AU3OISBEQQBAwS0AACS9NxqQgCZpkiYBVddFvWhAAUABAPQCAGC4g/0vTnrBqCfDIZl70J+kMUBPpEwT4FNXxBxz4F1HxHyr4EVTxBLb4EFNxEon4CJSlVNw9AcV9sC16h8osgke1P1ArgXwouVvdQq86ww/GQefusNf7kBviBlxpT8k+gL/Wox4r1d4MwAAAABJRU5ErkJggg==');
  background-size: 7px 11px;
  border-radius: 32px;
  text-indent: -999em;
  opacity: .6;
  transition: opacity .2s;
  cursor: pointer;
}

.xslider-arrow .prev {
  left: 15px;
  transform: rotate(-180deg);
}

.xslider-nav p {
  display: block;
  border: 1px solid white;
  width: 60px;
  right: 0px;
  position: absolute;
  margin: 5px;
  padding: 2px;
  bottom: 0px;
  color: white;
}

5. Config the image slider with the following options.

$('.slider-warp').xSlider({
  autoplay: true,
  interval: 3000,
  speed: 400,
  nav: true,
  page: false,
  scrollNum: 1,
  direction: 'ltr',  //ltr rtl
  controls: true,
  hover: false,
  refresh: true
});

---

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