Touch-friendly Carousel & Gallery - jQuery isystkSlider
File Size: | 150 KB |
---|---|
Views Total: | 4495 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

isystkSlider is a feature-rich jQuery slider plugin to create mobile-friendly and fully customizable carousels & galleries for showcasing featured images, product photos, client logos and much more.
Key Features:
- Allows to specify the number of images to show per page.
- Allows to specify the number of images to slide at a time.
- Slide & fade animations.
- Custom navigation and pagination controls.
- Momentum scrolling on touch screens.
- Autoplay and pause on hover.
- Allows you to display images in fullscreen mode.
How to use it:
1. The required HTML structure for the carousel slider.
<div class="js-slider isystkSlider"> <div class="view-layer"> <ul class="parent"> <li class="child"> <p> <img src="1.jpg" /> </p> </li> <li class="child"> <p> <img src="2.jpg" /> </p> </li> <li class="child"> <p> <img src="3.jpg" /> </p> </li> </ul> </div> </div>
2. Add pagination & navigation controls to the carousel slider if needed.
<div> <p class="next-btn"><a href="#"><img src="./images/btn-next.png" alt="Next" ></a></p> <p class="prev-btn"><a href="#"><img src="./images/btn-prev.png" alt="Prev" ></a></p> <ul class="paging dot"> <li class="active" data-pageno="1"></li> <li data-pageno="2"></li> <li data-pageno="3"></li> </ul> </div>
3. Load jQuery library and the jQuery isystkSlider plugin at the end of the document.
<script src="/path/to/cdn/jquery.js"></script> <script src="/path/to/js/jquery-isystkSlider.js"></script>
4. The necessary CSS styles. Copy and paste the following CSS snippets in your document.
/* core styles */ .isystkSlider { position: relative; width: 650px; max-width: 100%; overflow: hidden; } .isystkSlider .view-layer { width: 578px; max-width: 100%; overflow: hidden; } .isystkSlider ul.parent{ margin-bottom:10px; } .isystkSlider li.child{ float:left; } .isystkSlider li.child p{ margin:0 5px 0 0; border:solid 1px #dedede; background:#fff; padding:3px; } .isystkSlider img{ vertical-align: middle; } /* controls */ .isystkSlider .prev-btn, .isystkSlider .next-btn{ position: absolute; top: 50%; margin-top: -1em; width: 30px; } .isystkSlider .prev-btn img, .isystkSlider .next-btn img{ width: 30px; } .isystkSlider .next-btn{ right: 0; } .isystkSlider .paging { display: flex; justify-content: space-around; padding: 0; margin: 6px; width: 565px; } .isystkSlider .paging p{ margin:0 5px 0 0; border:solid 1px #dedede; background:#fff; padding:3px; } .isystkSlider .paging.dot { width: 24%; margin: 5px auto; } .isystkSlider .paging.dot li { border: 1px solid #666; border-radius: 50%; width: 7px; height: 7px; list-style-type: none; } .isystkSlider .paging.dot li.active { background: #666; }
5. Call the plugin on the top container to generate a default carousel slider.
var slider = $('.js-slider').isystkSlider({ // options here });
6. Enable the pagination & navigation controls.
var slider = $('.js-slider').isystkSlider({ 'prevBtnKey': $(this).find('.prev-btn'), 'nextBtnKey': $(this).find('.next-btn'), 'slideCallBack': function(data) { slider.find('.paging li').removeClass('active'); slider.find('.paging li:eq('+(data.pageNo-1)+')').addClass('active'); } }); slider.find('.paging li').click(function(e) { e.preventDefault(); slider.changePage($(this).data('pageno'), $.fn.isystkSlider.ANIMATE_TYPE.SLIDE); }); if (0 < self.find('.prev-btn').length) { self.find('.view-layer').css({ 'margin-left': '36px' }); }
7. Full plugin options to customize the carousel slider.
var slider = $('.js-slider').isystkSlider({ // parent container 'parentKey': 'ul', // child element 'childKey': 'li', // the number of slides to show per page 'shift': 1, // the number of image to slide at a time 'dispCount': null, // width to slide 'shiftw': null, // or ANIMATE_TYPE.FADE 'animateType': ANIMATE_TYPE.SLIDE, // animation speed 'slideSpeed': 300 // infinite rotating 'carousel': false, // prev/next buttons 'prevBtnKey': '.prev-btn', 'nextBtnKey': '.next-btn', // autoplay options 'autoSlide': false, 'autoSlideInterval': 5000, 'hoverPause': false, // enables touch swipe 'isMouseDrag': false, // width of rebound when swiping 'reboundw': 50, // enables momentum scrolling on touch screens. 'moment': false, // displays images in fullscreen mode 'isFullScreen': false, // space between elements 'margin': 0, // auto adapts the image to the screen height 'heightMaxScreen': false, // callback functions 'slideCallBack': null, 'resizeCallBack': null });
This awesome jQuery plugin is developed by isystk. For more Advanced Usages, please check the demo page or visit the official website.