Full Width Parallax Carousel Plugin with jQuery - PIGNOSE LayerSlider
File Size: | 5.51 MB |
---|---|
Views Total: | 10174 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
PIGNOSE LayerSlider is a cool jQuery carousel plugin used for generating an automatic, endless looping image slider with a parallax sliding effect.
Features:
- Shows a thumbnail carousel inside the current slide.
- A control bar which allows you to play, pause the carousel.
- Arrows navigation and bullets pagination.
- Blurred thumbnail images.
- Custom animation speed.
- Allows to slide the carousel left or right.
How to use it:
1. To get started, you need to include the following JS & CSS files in your html page.
<link rel="stylesheet" href="/path/to/pignose.layerslider.css"> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="/path/to/pignose.layerslider.js"></script>
2. Include the jQuery easing plugin for more easing options.
<script src="jquery.easing.min.js"></script>
3. Add images together with the thumbnails and controls to the carousel.
<div id="demo" <div class="slide-visual"> <ul class="slide-group"> <li><img src="assets/img/visual_slide01.jpg" alt="Dummy Image" /></li> <li><img src="assets/img/visual_slide02.jpg" alt="Dummy Image" /></li> <li><img src="assets/img/visual_slide03.jpg" alt="Dummy Image" /></li> <li><img src="assets/img/visual_slide04.jpg" alt="Dummy Image" /></li> <li><img src="assets/img/visual_slide05.jpg" alt="Dummy Image" /></li> <li><img src="assets/img/visual_slide06.jpg" alt="Dummy Image" /></li> </ul> <div class="script-wrap"> <ul class="script-group"> <li><div class="inner-script"><img src="assets/img/visual_slide_script01.jpg" alt="Dummy Image" /></div></li> <li><div class="inner-script"><img src="assets/img/visual_slide_script02.jpg" alt="Dummy Image" /></div></li> <li><div class="inner-script"><img src="assets/img/visual_slide_script03.jpg" alt="Dummy Image" /></div></li> <li><div class="inner-script"><img src="assets/img/visual_slide_script04.jpg" alt="Dummy Image" /></div></li> <li><div class="inner-script"><img src="assets/img/visual_slide_script05.jpg" alt="Dummy Image" /></div></li> <li><div class="inner-script"><img src="assets/img/visual_slide_script06.jpg" alt="Dummy Image" /></div></li> </ul> <div class="slide-controller"> <a href="#" class="btn-prev"><img src="assets/img/btn_prev.png" alt="Prev Slide" /></a> <a href="#" class="btn-play"><img src="assets/img/btn_play.png" alt="Start Slide" /></a> <a href="#" class="btn-pause"><img src="assets/img/btn_pause.png" alt="Pause Slide" /></a> <a href="#" class="btn-next"><img src="assets/img/btn_next.png" alt="Next Slide" /></a> </div> </div> </div> </div
4. Initialize the carousel.
$('#demo').pignoseLayerSlider({ play : '.btn-play', pause : '.btn-pause', next : '.btn-next', prev : '.btn-prev' });
5. Full configuration options with default values.
$('#demo').pignoseLayerSlider({ // animation speed speed : 1200, // transition interval interval : 3000, // left or right direction : 'right', // easing effects. easing : 'easeInOutExpo', // parallax sliding speed diffTime : 300, // shows controller animation controlAnim : true, // shows pagination controller pagination : true, // auto play auto : true, // for play/pause/next/prev button area isLocal : true, play : null, pause : null, next : null, prev : null, // callback afterMoved : null });
Change log:
2017-08-03
- v1.0.3
This awesome jQuery plugin is developed by KennethanCeyer. For more Advanced Usages, please check the demo page or visit the official website.