Responsive jQuery Endless Scrolling Image Slider - loopit

loopit is a jQuery responsive slider/carousel plugin that allows to vertically or horizontally slide a group of images with infinite loop, image captions and easing effects support.

How to use it:

1. Load the jQuery javascript library together with jQuery loopit plugin in the html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/loopit.js"></script>

2. Load the jQuery easing plugin for easing options.

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

3. The Html structure.

<div class="slideshow">
<div class="slide-demo">
<div class="slidecaption">
<h2>Slide Caption 1</h2>
</div>
<img src="images/1.jpg" />
<div class="slidetext">
<p>Slide Text 2</p>
</div>
</div>
<div class="slide-demo">
<div class="slidecaption">
<h2>Slide Caption 2</h2>
</div>
<img src="images/2.jpg" />
<div class="slidetext">
<p>Slide Text 2</p>
</div>
</div>
<div class="slide-demo">
<div class="slidecaption">
<h2>Slide Caption 3</h2>
</div>
<img src="images/3.jpg" />
<div class="slidetext">
<p>Slide Text 3</p>
</div>
</div>
<div class="slide-demo">
<div class="slidecaption">
<h2>Slide Caption 4</h2>
</div>
<img src="images/4.jpg" />
<div class="slidetext">
<p>Slide Text 4</p>
</div>
</div>
</div>

4. The CSS to style the image slider/carousel.

.slideshow {
position: relative;
overflow: none;
background:;
max-width: 100%;
border: 2px solid black;
}
.slideshow [class*='slide-'] {
margin: 0;
padding: 0;
position: relative;
}
.slideshow [class*='slide-'] .slidetext {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 25%;
background-image: url(./images/greyBg.png);
background-repeat: repeat;
margin: 0;
padding: 0;
color: #fff;
font-family: Tahoma;
overflow: hidden;
display: none;
}
.slideshow [class*='slide-'] .slidecaption {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 25%;
background-image: url(./images/greyBg.png);
background-repeat: repeat;
margin: 0;
padding: 0;
color: #ffffff;
font-family: Tahoma;
display: none;
}
.slideshow [class*='slide-'] img {
width: 100%;
}

5. Call the plugin with options.

$(document).ready(function() {
  $(".slide-demo").loopItNow({
    vertical:false, // vertical or horizontal
    speed : 3000, // animation speed
    effect:'easeInExpo', // easing options
    captionTop:true,
    captionBottom:true,
    textbar: false
  });     
});

Change log:

2015-10-26

• JS update

---

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