kenwheeler / slick
Installs: 243 834
Dependents: 14
Suggesters: 0
Security: 0
Stars: 0
Watchers: 1
Forks: 5 882
Language:JavaScript
This package is not auto-updated.
Last update: 2024-12-12 03:47:53 UTC
README
the last carousel you'll ever need
Demo
http://kenwheeler.github.io/slick
CDN
To start working with Slick right away, there's a couple of CDN choices availabile to serve the files as close, and fast as possible to your users:
#####Example using jsDelivr
Just add a link to the css file in your <head>
:
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/> <!-- Add the slick-theme.css if you want default styling --> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
Then, before your closing <body>
tag add:
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
Package Managers
# Bower bower install --save slick-carousel # NPM npm install slick-carousel
Contributing
PLEASE review CONTRIBUTING.markdown prior to requesting a feature, filing a pull request or filing an issue.
Data Attribute Settings
In slick 1.5 you can now add settings using the data-slick attribute. You still need to call $(element).slick() to initialize slick on the element.
Example:
<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'> <div><h3>1</h3></div> <div><h3>2</h3></div> <div><h3>3</h3></div> <div><h3>4</h3></div> <div><h3>5</h3></div> <div><h3>6</h3></div> </div>
Settings
Responsive Option Example
The responsive option, and value, is quite unique and powerful. You can use it like so:
$(".slider").slick({ // normal options... infinite: false, // the magic responsive: [{ breakpoint: 1024, settings: { slidesToShow: 3, infinite: true } }, { breakpoint: 600, settings: { slidesToShow: 2, dots: true } }, { breakpoint: 300, settings: "unslick" // destroys slick }] });
Events
In slick 1.4, callback methods were deprecated and replaced with events. Use them before the initialization of slick as shown below:
// On swipe event $('.your-element').on('swipe', function(event, slick, direction){ console.log(direction); // left }); // On edge hit $('.your-element').on('edge', function(event, slick, direction){ console.log('edge was hit') }); // On before slide change $('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){ console.log(nextSlide); });
Methods
Methods are called on slick instances through the slick method itself in version 1.4, see below:
// Add a slide $('.your-element').slick('slickAdd',"<div></div>"); // Get the current slide var currentSlide = $('.your-element').slick('slickCurrentSlide');
This new syntax allows you to call any internal slick method as well:
// Manually refresh positioning of slick $('.your-element').slick('setPosition');
Example
Initialize with:
$(element).slick({ dots: true, speed: 500 });
Change the speed with:
$(element).slick('slickSetOption', 'speed', 5000, true);
Destroy with:
$(element).slick('unslick');
Sass Variables
Browser support
Slick works on IE8+ in addition to other modern browsers such as Chrome, Firefox, and Safari.
Dependencies
jQuery 1.7
License
Copyright (c) 2014 Ken Wheeler
Licensed under the MIT license.
Free as in Bacon.