Responsive Horizontal Slider Plugin For jQuery - Codezero Slider
File Size: | 86.2 KB |
---|---|
Views Total: | 5560 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Codezero Slider is a small, responsive jQuery slider plugin which allows to scroll horizontally through a group of slides with custom overlay and zoom effects.
More features:
- Supports any html content such as images, background images, etc.
- Auto set the slide's width and height based on its container.
- Highly customizable via CSS and HTML5 data attributes.
- Fully responsive and Touch-enabled.
Install it via package managers:
# NPM $ npm install codezero-jquery-slider # Bower $ bower install codezero-jquery-slider
How to use it:
1. Load the required 3rd party scripts in the document.
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/jquery.scrollTo.min.js"></script> <script src="/path/to/jquery.mobile-events.js"></script>
2. Download and load the jQuery Codezero Slider plugin's files in the document.
<link rel="stylesheet" href="css/slider.min.css"> <script src="js/slider.min.js"></script>
3. Initialize the plugin and the jQuery Codezero Slider is ready for use.
$('.slider').slide();
4. The basic html to create a background image slider(with auto width and overlay/zoom effects).
<div class="slider"> <a href="#" class="slider-prev">⟨</a> <a href="#" class="slider-next">⟩</a> <div class="slider-viewport"> <div class="slider-track"> <div class="slide" data-background="1.jpg"> <h1>Hello World</h1> <p>Without overlay and zoom!</p> </div> <div class="slide" data-background="2.jpg"> <div class="slide-overlay" style="padding: 0 1em;"> <h1>Hello World</h1> <p>With overlay!</p> </div> </div> <div class="slide" data-zoom-background="3.jpg"> <h1>Hello World</h1> <p>With zoom!</p> </div> ... </div> </div> </div>
5. The html to create a normal inline image slider (with auto width and overlay/zoom effects).
<div class="slider slide-full-width"> <a href="#" class="slider-prev">⟨</a> <a href="#" class="slider-next">⟩</a> <div class="slider-viewport"> <div class="slider-track"> <!-- No hoverlay, no caption --> <div class="slide"> <a href="#" class="slide-image"> <img src="1.jpg"> </a> </div> <!-- Icon hoverlay, no caption --> <div class="slide"> <a href="#" class="slide-image"> <i class="fa fa-search-plus slide-image-hoverlay"></i> <img src="2.jpg"> </a> </div> <!-- Text hoverlay, no caption --> <div class="slide"> <a href="#" class="slide-image"> <span class="slide-image-hoverlay">VIEW ME</span> <img src="3.jpg"> </a> </div> <!-- No hoverlay, only caption --> <div class="slide"> <a href="#" class="slide-image"> <img src="https://unsplash.it/610/200/"> <span class="slide-image-caption"> Image caption here! </span> </a> </div> <!-- Both hoverlay and caption --> <div class="slide"> <a href="#" class="slide-image"> <i class="fa fa-search-plus slide-image-hoverlay"></i> <img src="https://unsplash.it/410/200/"> <span class="slide-image-caption"> Image caption here! </span> </a> </div> </div> </div> </div>
5. Plugin's default customization options and event handlers.
$('.slider').slide({ // General settings... slideSpeed: 500, enableSwipe: true, // If you change class / data attribute names, // you will need to change related CSS files viewport: '.slider-viewport', track: '.slider-track', slide: '.slide', // Arrows prevArrow: '.slider-prev', nextArrow: '.slider-next', // Slider state atLastSlide: '.slider-end', atFirstSlide: '.slider-start', noSlide: '.no-slide', // Slide image classes imageContainerClass: '.slide-image', imageAsBackgroundClass: '.slide-image-background', imageAsBackgroundWrapperClass: '.slide-image-background-wrapper', // Slide background classes / data attributes backgroundClass: '.slide-data-background', backgroundZoomClass: '.slide-data-zoom-background', backgroundDataAttr: 'background', backgroundZoomDataAttr: 'zoom-background', // Check if we should enable single slide mode.. // Return true to scroll only one slide or false to slide the default distance. // You can also set this to a boolean instead of a function. // By default, if any slide is wider than 30% of the viewport, single slide mode is enabled. isInSingleSlideMode: function ($slider) { var isInSingleSlideMode = false, viewportWidth = $slider.find(this.viewport).width(); $slider.find(this.slide).each(function () { isInSingleSlideMode = $(this).outerWidth() / viewportWidth > .3; return ! isInSingleSlideMode; }); return isInSingleSlideMode; }, // Slide distance used if "isInSingleSlideMode" is true. // Return any value supported by the jquery.scrollTo plugin: // https://github.com/flesler/jquery.scrollTo // By default this will slide 70% of the viewport. defaultSlideDistance: function ($slider, $viewport, $track, isNext) { return (isNext ? '+=' : '-=') + ($viewport.width() * .7) + 'px'; }, // Before callbacks... // Return false to cancel slide. onBeforeSlideNext: function ($slider) { }, onBeforeSlidePrev: function ($slider) { }, // After callbacks... onAfterSlideNext: function ($slider) { }, onAfterSlidePrev: function ($slider) { } });
Change log:
2017-08-26
- Avoid .slide-overlay to have 0px height in Safari
This awesome jQuery plugin is developed by codezero-be. For more Advanced Usages, please check the demo page or visit the official website.