Responsive, Touch-enabled and Fullscreen Image Slider Plugin - slideLp
File Size: | 7.12 MB |
---|---|
Views Total: | 6895 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.