Full Width Parallax Carousel Plugin with jQuery - PIGNOSE LayerSlider

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.