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

File Size: 7.12 MB
Views Total: 6932
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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. 


  • 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=""></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">

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

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

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


4. Call the plugin with default settings.


5. Available options.

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:



  • create new effect 'concertina'


  • implementation function timerClock


  • adjustment responsive

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