Responsive, Touch-enabled and Fullscreen Image Slider Plugin - slideLp

slideLp is a full-featured jQuery image carousel/slider plugin that is responsive and touch-friendly and comes with lots of optional settings for customization. 

Features:

• 4 transition modes: "pageHoriz", "slide", "fade", "pageVert"
• Auto play on page load.
• Custom delay time between each transiton.
• Popups a thumbnail when mouse hovers the pager.
• Keyboard and touch swipe support.
• Responsive & fullscreen modes support.

Basic Usage:

1. Include the jQuery library and jQuery slideLp plugin at the end of your web page.

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

2. Include the required stylesheet file in the head section of your web page.

<link href="plugin/slideLp.css" rel="stylesheet" type="text/css" />

3. Create the Html for an image slider/carousel.

<section id="demo">

<section class="wrapHighlight">
<ul class="listCont">

<li>
<div class="cont"> <a href="#"> <img src="imgs/img1.jpg" />
<div class="title_lp">Description 1</div>
</a> </div>
</li>

<li>
<div class="cont"> <a href="#"> <img src="imgs/img2.jpg" />
<div class="title_lp">Description 2</div>
</a> </div>
</li>

<li>
<div class="cont"> <a href="#"> <img src="imgs/img3.jpg" />
<div class="title_lp">Description 3</div>
</a> </div>
</li>

</ul>
</section>
 
</section>

4. Call the plugin with default settings.

$(function(){
$("#demo").slideLp();
});

5. Available options.

$(function(){
$("#demo").slideLp({
effects: "fade", //"pageHoriz", "slide", "fade", "pageVert"
auto: true, // enable auto play
timeBanner: 7000,
timeDelay: 500,
timeSlide: 800,
timeDelayIn: 500,
timeDelayOut: 700,
timerClock: true,
timerClockSize: 40,
barCounter: false, // enable bar counter
pagination: true, // enable pagination
paginationThumb: false, // display a thumbnail on hover
thumbSizeWidth: 150,
thumbSizeHeight: 150,
paginationHover: true, // display the pagination on over
paginationCounter: true, // enable pagination counter
paginationCounterTab: "/",
navButtons: true,
prevName: "<",
nextName: ">",
keyboard: true, // enable keyboard navigation
touch: false, // enable touch swipe navigation
thresholdX: 100,
thresholdY: 100,
touchName: "",
fullScreen: false, // enable fullscreen mode
adjustmentSize: 0,
responsive: true, // enable responsive layout
adjustmentResponsiveHeight: 1,
concertinaMaxWidth: 64,
concertinaAdjustmentFloat: "-0.5",
glassPositionStart: 1,
glassVisible: false,
heigthAuto: true,
heigthAutoSpeed: 300
});
});

Change logs:

2015-01-13

• update to 2.2

2014-04-23

• create new effect 'concertina'

2014-04-12

• implementation function timerClock

2014-04-10

• adjustment responsive

---

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