Full-featured jQuery Image Slider/Carousel/Rotator Plugin - Slide

Slide is a powerful, multifunctional jQuery plugin used to present you favorite images in a fully customizable slider/scroller/slideshow/carousel/rotator. Download and check out the demo folder for more amazing examples.

Features:

• Smooth transition animations.
• Endless looping.
• Arrows/bullets/thumbnails navigation.
• Easing functions.
• Image lazy load.
• Auto resize images for responsive web layout.
• Callback function on each slide.

Basic usage:

1. Load the jQuer slide plugin after jQuery JavaScript library.

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

2. Load the jQuery easing plugin for more easing functions.

<script src="jquery.easing.min.js"></script>

3. Create a basic image slider with support for pagination, captions and left/right arrows navigation.

<div id="demo">
  <div class="content">
    <ul class="j_slideLists">
      <li> 
        <a href="#">
	  <img src="1.jpg">
	</a> 
	<span class="text">Caption 1</span> 
      </li>
      <li> 
        <a href="#">
	  <img src="2.jpg">
	</a> 
	<span class="text">Caption 2</span> 
      </li>
      <li> 
        <a href="#">
	  <img src="3.jpg">
	</a> 
	<span class="text">Caption3</span> 
      </li>
    </ul>
  </div>
  <div class="tag">
    <ul class="j_slideTags">
      <li class="current">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </div>
  <div class="btn"> 
    <a href="javascript:void(0);" target="_self" class="btnPrev j_slidePrev"></a> 
    <a href="javascript:void(0);" target="_self" class="btnNext j_slideNext"></a> 
  </div>
</div>

4. Custom CSS to style the image slider & controls.

#demo {
  position: relative;
  width: 600px;
  height: 300px;
  margin: 50px 0 30px 20px;
}

#demo .content {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

#demo .content ul li {
  position: relative;
  width: 600px;
  height: 300px;
}

#demo .content ul li a {
  display: block;
  width: 600px;
  height: 300px;
}

#demo .content ul li .text {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 350px;
  height: 30px;
  font-size: 13px;
  line-height: 30px;
  font-family: Verdana;
  text-indent: 6px;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;/**width:100%;*filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#7F08355C', endColorstr='#7F08355C');*/
}

#demo .tag {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  font-size: 0;
  letter-spacing: -8px;
  text-align: right;
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#7F08355C', endColorstr='#7F08355C');/**filter:none;*/
}

:root #demo .tag {
  filter: none;
  background-color: rgba(8,53,92,0.5);
}

#demo .tag ul {
*zoom:1;
  padding: 4px 10px;
  opacity: 0.7;
  filter: alpha(opacity=70);
}

#demo .tag li {
  display: inline-block;
*zoom:1;
*display:inline;
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  margin-left: 3px;
  font-size: 12px;
  line-height: 18px;
  font-family: Verdana;
  letter-spacing: normal;
  text-align: center;
  color: #000;
  background-color: #fff;
  cursor: pointer;
}

#demo .tag li.current {
  border-color: #1188C0;
  color: #fff;
  background-color: #1072AA;
}

#demo .pos { display: none; }

#demo .btn a {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 50px;
  margin-top: -30px;
  background: #000 url(images/slide_arrow7.png) no-repeat -187px center;
  opacity: 0.3;
  filter: alpha(opacity=30);
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  cursor: pointer;
  outline: none;
}

#demo .btn a:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

#demo .btn .btnPrev { left: 0; }

#demo .btn .btnNext {
  right: 0;
  background-position: -68px center;
}

5. Call the plugin on the parent container to generate a default image slider.

$("#demo").slide();

6. All parameters.

// easing options 
easing： 'swing', 

// 'none', 'fade', 'fadeIn', 'scrollx', 'scrolly'
effect: 'none', 

// endless looping
seamless: false,

// last slide is blank?
allowBlank: false, 

// resize slider content
doResize: false, 

Change log:

2018-03-02

• adjusts codes.

2016-09-08

• code improvement.

---

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