This is the configuration I am using to create a slick carousel on my web page:
$('#carousel').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
},
},
{
breakpoint: 1008,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
{
breakpoint: 800,
settings: 'unslick',
},
],
})
It is working the way it is supposed to work except for one thing... when I resize my browser window from width: 1920 to 800, the carousel unslicks it, and the content is displayed like normal divs.
But then when I increase the width of the browser window the carousel doesn't recreate it. It remains like HTML div blocks without carousel.
Any help would be appreciated.
unslick is a destructor method. Once you unslick, you need to call slick() again to construct carousel.
This is one way to rebuild the carousel after unslick kills it at a breakpoint:
$(window).resize(function () {
$('.js-slider').not('.slick-initialized').slick('resize');
});
$(window).on('orientationchange', function () {
$('.js-slider').not('.slick-initialized').slick('resize');
});
<section class="regular slider" style="direction:ltr">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
<div>
<img src="http://placehold.it/350x300?text=7">
</div>
<div>
<img src="http://placehold.it/350x300?text=8">
</div>
<div>
<img src="http://placehold.it/350x300?text=9">
</div>
<div>
<img src="http://placehold.it/350x300?text=10">
</div>
<div>
<img src="http://placehold.it/350x300?text=11">
</div>
<div>
<img src="http://placehold.it/350x300?text=12">
</div>
<div>
<img src="http://placehold.it/350x300?text=13">
</div>
<div>
<img src="http://placehold.it/350x300?text=14">
</div>
</section>
/////script/////
$(document).on('ready', function() {
$(".regular").slick({
dots: false,
infinite: true,
slidesToShow: 6,
slidesToScroll: 6,
autoplay: true,
autoplaySpeed: 2000,
pauseOnHover: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 5,
slidesToScroll: 5,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
}
]
});
});
On each browser resize event you need to do a check and reinitialize the Slick slider if needed (if you are on mobile and Slick slider is not initialized).
/* Get element */
var slider = $('.slider');
/* Slider settings */
var settings = {...}
/* Do this every time window gets resized */
$(window).on('resize', function() {
/* If we are above mobile breakpoint unslick the slider */
if ($(window).width() >= 800)
{
/* Do this only if slider is initialized */
if (slider.hasClass('slick-initialized')) {
slider.slick('unslick');
}
return;
}
/* We are below mobile breakpoint, initialize the slider
if it is not already initialized */
else if (!slider.hasClass('slick-initialized'))
{
return slider.slick(settings);
}
});
$(window).trigger('resize');
I solved the responsive breakpoint issue, recalculating the number of slides at any browser resize.
.testimonialsList: it's the name of the container of my carousel.
// Create carousel
function createTestimonialCarousel(numberOfSlides){
jQuery('.testimonialsList').not('.slick-initialized').slick({
dots: true,
arrows: true,
infinite: true,
slidesToShow: numberOfSlides,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 6000,
pauseOnHover: true
});
}
// Calculate number of slides to show
function calculateNumberOfSlidesToShow(){
var carouselWidth = jQuery(".testimonialsList").width();
var numberOfSlides = 0;
switch (true) {
case (carouselWidth < 767):
numberOfSlides = 1;
break;
case (carouselWidth < 991):
numberOfSlides = 2;
break;
case (carouselWidth < 1199):
numberOfSlides = 3;
break;
case (carouselWidth > 1200):
numberOfSlides = 3;
break;
}
return numberOfSlides;
}
// Reload Carousel on browser resize (to make it responsible)
function reloadCarousel () {
jQuery('.testimonialsList').slick('unslick');
numberOfSlides = calculateNumberOfSlidesToShow();
createTestimonialCarousel(numberOfSlides);
}
// Call updateMaxHeight when browser resize event fires
jQuery(window).on("resize", reloadCarousel);
jQuery(document).ready(function () {
// Initialize the carousel on page load
if (jQuery(".testimonialsList").length) {
setTimeout(function () {
numberOfSlides = calculateNumberOfSlidesToShow();
createTestimonialCarousel(numberOfSlides);
}, 300);
}
});
Related
Let's suppose slick slider pagination has 25 pages (it might be possible on mobile devices)
Is it possible to set up a slick slider to show pagination like shown below?
Pagination block: < 1 ... 2 3 4 ... 25 >
Update: what I mean is to hide some pages and show these dots instead
try this
<section class="slider">
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
<div>slide4</div>
<div>slide5</div>
</section>
<span class="pagingInfo"></span>
$(".slider").slick({
autoplay: true,
dots: true,
customPaging: function (slider, i) {
var thumb = $(slider.$slides[i]).data();
return `<a>${i}</a>`;
},
responsive: [
{
breakpoint: 500,
settings: {
dots: false,
arrows: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 2,
},
},
],
});
_high.html.erb:
<div class="col-xl-12">
<div class="default-slick-carousel freelancers-container freelancers-grid-layout">
<%= render partial: '/pages/top_trainers' %>
</div>
</div>
##To reinitialize the carousel when coming back to the carousel page, I have added this:
<script type="text/javascript">
$(document).ready(function(){
$('.default-slick-carousel').not('.slick-initialized').slick({
infinite: false,
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
arrows: true,
adaptiveHeight: true,
responsive: [
{
breakpoint: 1292,
settings: {
dots: true,
arrows: false
}
},
{
breakpoint: 993,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
dots: true,
arrows: false
}
},
{
breakpoint: 769,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
arrows: false
}
}
]
});
})
</script>
So, when I am on this page, carousel is working fine.But when i am moving to some other page and coming back to the carousel page, carousel sliding is not working
i want to make slider with dynamic content on it and changed based on click. i have used slick slider and its working fine at the first load, after clicking on any one content, new content will be added and remove the previous one. At this time slick slider not working.
Please help me, any help will be appreciated.
HTML Code:
<div class="video-placeholder" *ngFor="let relate of relatedArray">
<div class="carousel16to9ratio">
<div><img class="img-fluid"
src="image"
alt=""></div>
<div class="overlayIframe"
(click)="playNextVideo()">
</div>
</div>
<div class="carousel-video-title">video name</div>
</div>
typescript:
ngAfterContentInit() {
setTimeout(function () {
$('.carousel-custome').slick({
dots: false,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
prevArrow: '<i class="fas fa-chevron-left prev"></i>',
nextArrow: '<i class="fas fa-chevron-right next"></i>',
cssEase: 'linear',
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
dots: false
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2.3,
slidesToScroll: 1,
centerMode: false,
initialSlide: 0
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2.3,
slidesToScroll: 1,
centerMode: false,
initialSlide: 0
}
}
]
});
}, 200);
}
on playNextVideo() function i again call ngOnInit() and remove slick data using
$('.carousel-custome').slick('slickRemove', null, null, true);
how to achieve this, please suggest me.
I'm trying to launch an event when Slick.js breakpoint gets triggered.
The init event gets triggered even if the breakpoint is not hit.
Is there a way around it?
Here is my code:
var $j = jQuery.noConflict();
$j(".homepage_slider").slick({
dots: false,
infinite: true,
arrows:false,
autoplay:true,
autoplaySpeed:3500,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [
{
breakpoint: 480,
settings: {
init: changeImages()
}
}
]
});
function changeImages(){
$j('img.slider-image').each(function() {
$j(this).attr('src', $j(this).attr('data-mobile'));
});
}
I also tried this but it didn't work:
$j('.homepage_slider').on('breakpoint', function(){
console.log("test");
$j('img.slider-image').each(function() {
$j(this).attr('src', $j(this).attr('data-mobile'));
});
});
Any ideas?
UPDATE:
Found this post: how to call different jquery actions in responsive design
var isBreakPoint = function (bp) {
var bps = [320, 480, 768, 1024],
w = $j(window).width(),
min, max
for (var i = 0, l = bps.length; i < l; i++) {
if (bps[i] === bp) {
min = bps[i-1] || 0
max = bps[i]
break
}
}
return w > min && w <= max
}
if (isBreakPoint(480)) {
$j('img.slider-image').each(function() {
$j(this).attr('src', $j(this).attr('data-mobile'));
});
}
This workaround works, but would be nice if I found one that works whenever Slick.js breakpoint event is hit so there is no discrepancy between two methods.
Look at the «Events» section of the Slick's documentation:
In slick 1.4, callback methods have been deprecated and replaced with events.
<...>
breakpoint
Arguments: event, slick, breakpoint.
Fires after a breakpoint is hit.
So you need to take two steps:
Set breakpoints that you need, using the responsive option.
Catch the breakpoint event and do whatever you want.
For example:
var $myCarousel = $('#myCarousel');
/* Step 1 */
$myCarousel.slick({
autoplay: true,
dots: true,
responsive: [
{ breakpoint: 500 },
{ breakpoint: 768 },
{ breakpoint: 992 }
]
});
/* Step 2 */
$myCarousel.on('breakpoint', function(event, slick, breakpoint) {
console.log('breakpoint ' + breakpoint);
});
/* Decorations */
.my-carousel img {
width: 100%;
}
.my-carousel .slick-next {
right: 15px;
}
.my-carousel .slick-prev {
left: 15px;
z-index: 1;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css">
<div id="myCarousel" class="my-carousel">
<div>
<img src="https://via.placeholder.com/900x300/c69/f9c/?text=1" alt="">
</div>
<div>
<img src="https://via.placeholder.com/900x300/9c6/cf9/?text=2" alt="">
</div>
<div>
<img src="https://via.placeholder.com/900x300/69c/9cf/?text=3" alt="">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.js"></script>
const $slick = $(".health-slick .items");
const $slick_item = $(".health-slick .items .item");
// INIT
slickInit();
animateHoverItem();
// FUNCTIONS
function animateHoverItem() {
$slick_item.mouseover(function() {
$(this).addClass('animate');
});
$slick_item.mouseout(function() {
$(this).removeClass('animate');
});
console.log(0); // this will call 1 time and 1 time when breakpoint window change
}
function slickInit() {
$(document).ready(function () {
$slick.slick({
slidesToShow: 5,
slidesToScroll: 1
responsive: [
{
breakpoint: 767.98,
settings: {
slidesToShow: 2,
},
},
{
breakpoint: 575.98,
settings: {
slidesToShow: 1,
},
}
],
});
$slick.on('breakpoint', function(e){
animateHoverItem();
});
});
}
I want to hide a directive at the beginning, when it is still creating. In this directive I'm integrating a jquery carousel.
This is the directive:
return {
restrict: 'E',
replace: true,
scope: true,
templateUrl: 'slick.html',
link: function(scope: any, element: any, attrs: any) {
scope.slickReady = false;
var slickEl = element.querySelector('.slick');
if(slickEl){
slickEl.on('init', function(){
scope.slickReady = true;
});
slickEl.slick({
arrows: true,
autoplay: false,
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
})
}
}
}
This is the main html:
<slick></slick>
This is the slick.html:
<div ng-switch on="slickReady">
<div class="slick" ng-switch-when="true"></div>
<div class="spinner" ng-switch-when="false">
<div ng-repeat="item in todos">
<img ng-src="{{item.face}}" class="md-avatar img-center">
<p class="truncate">{{item.who}}</p>
</div>
</div>
</div>
The problem is that I have this error in console:
TypeError: element.querySelector is not a function
at Object.link (http://localhost/js/directives/slick.js:9:35)
EDIT
I tried to do this:
var slickEl = element[0]querySelector('.slick');
if(slickEl.length > 0)
because, looking at the debugging, the 'element' is so structured:
0:div length:1
In this way, I have not the error but the carousel doesn't build.
If You are using Jquery Carousel then it must be tipical jquery. So try:
slickEl=$(element).find(".slick");