Card Deck-style jQuery Responsive Slideshow Plugin - Nxeed Card Slider

File Size: 1.9 MB
Views Total: 4796
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Card Deck-style jQuery Responsive Slideshow Plugin - Nxeed Card Slider

Nxeed Card Slider is a responsive jQuery slider plugin to create image slideshows or accordion sliders with card deck-style transitions.

How to use it:

1. Include jQuery library and the jQuery nxeed card slider plugin on your web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jquery.ncs.js"></script>

2. Wrap your images into a container element to create an image slideshow with controls.

<div id="demo">
  <a href="#" class="ncs-card"><img src="img/photo0.png" /></a>
  <a href="#" class="ncs-card"><img src="img/photo1.png" /></a>
  <a href="#" class="ncs-card"><img src="img/photo2.png" /></a>

  <div id="demo_control" class="text-center">
    <a onClick="$('#demo').ncs('prev'); return false;" href="#">← Prev</a>
    <a onClick="$('#demo').ncs('next'); return false;" href="#">Next →</a>
    <a onClick="$('#demo').ncs('set', 0); return false;" href="#">First</a>
  </div>
</div>

3. Call the plugin to initialize the image slideshow with default settings.

$('#demo').ncs();

4. All the optional settings.

$('#demo').ncs({
  animationSpeed: 400,
  indent: 'auto',
  resizeAdaptation: true,
  useTimerForResizeAdaptation: false,
  autoWidth: true,
  autoHeight: true,
  active: 0,
  activeOnClick: false,
  offset: 32
});

Change log:

2014-09-22

  • Update jquery.ncs.js

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