I am using Slick as an add on for my end user from other teams to use. I want to make it as simple as possible for them to use by just changing the outside wrap as (carousel-wrap-1, carousel-wrap-2 ….etc) if they need more than one on the page.
Questions:
1. Is that possible to make the JS function like this?? (Attached is my js code look like, Plus my fix for the equal height for all the slide.)
OR
2. I still can ask them to copy and paste everytime they want to add a new set of carousel, but inside the "prevArrow and nextArrow", how to make it call only that parent? (thinking something $(this) + $(".prev")) ??
$(document).ready(function(){
$("[class*='carousel-wrap-'] .carousel").slick({
prevArrow: $(".prev"),
nextArrow: $(".next"),
accessibility: true,
autoplay: true,
autoplaySpeed: 7000,
dots: true,
infinite: true,
speed: 600,
fade: true,
cssEase: 'linear',
pauseOnHover: true,
pauseOnFocus: true,
});
});
$(document).ready(function() {
var offsetHeight = $('.slick-list').outerHeight();
$("[class*='carousel-wrap-'] .carousel .band").outerHeight(offsetHeight);
});
$( window ).resize(function() {
$("[class*='carousel-wrap-'] .carousel .band").css("height", "100%")
var offsetHeight = $('.slick-list').outerHeight();
$("[class*='carousel-wrap-'] .carousel .band").outerHeight(offsetHeight);
});
<div class="carousel-wrap-1">
<div class="carousel-control">
<div class="prev"></div><div class="next"></div>
</div>
<div class="carousel">
<div class="band slide1"></div>
<div class="band slide2"></div>
<div class="band slide3"></div>
</div>
</div>
I found a solution for this, but not sure how to combine
$("[class*='carousel-wrap-'] .carousel").each(function() {
$(this).slick({
appendArrows: $(this).siblings('.carousel-control'),
accessibility: true,
autoplay: true,
autoplaySpeed: 7000,
dots: true,
infinite: true,
speed: 600,
fade: true,
cssEase: 'linear',
pauseOnHover: true,
pauseOnFocus: true,
});
});
the equal height together.
It is possible to use one function for multiple classes. you just pass in all class names you want to use that function. like this:
$('.celebrities, .sellers').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 6,
slidesToScroll: 1
}
It worked for me. my classes are
celebrities
and
sellers
Related
Issue:
I am trying to implement the horizontal timeline -Slick [https://codepen.io/perikan/pen/vjwXyg] but I got only one dot.
It is not meeting the functionality of implementation.
Goal:
As we click on the timeline dots the photos have to be moved in accordance with it.
Tried Code:
These are the following code I have tried.
<script type="text/javascript">
function slider_config() {
$('.slideshow').slick({
dots: true,
customPaging: function(slick,index) {
// Array conversion from the doc element
var dateList = [...document.querySelectorAll('.photo-date-info')].map(x => x.textContent);
return '<a>' + dateList[index] + '</a>';
},
infinite: false,
speed: 500,
fade: true,
cssEase: 'linear',
});
$(".loading-bar").slick({
centerMode: true,
// centerPadding: "80px",
dots: false,
infinite: false,
speed: 300,
slidesToShow: 6,
slidesToScroll: 3,
focusOnSelect: true,
asNavFor: ".labels"
});
$(".labels").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
draggable: false,
asNavFor: ".loading-bar"
});
$('.slideshow').slickLightbox({
src: 'src',
itemSelector: 'img',
caption: 'caption',
slick: {infinite:false}
});
}
div += "></i><a href='"+photo+"' download><i class='fas fa-download' style ='float: right;padding-top: 7px;color: black;'></i></a><img style='object-fit: contain;height:400px' src='"+photo+"' data-caption='As on : "+photo_date+"'><h4>As on : <span class=\"photo-date-info\">" + photo_date + "</span></h4><h5>"+p_desc+"</h5></center><span class=\"loading-bar loading-bar-bullet\"></span></div>";
//The same CSS code as in code pen
When I set rtf fasle then the page goes white and when I set slidesToScroll- 1 it also trhoughs same result.
$('.demo').slick({
dots: false,
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
cssEase: 'linear',
accessibility:true,
autoplay:true,
autoplaySpeed: 3000,
});
Add the rtl option when you initialize slick and set it to true. You'll also need to set the attribute "dir" to "rtl" for the HTML tag or the parent of the slider.
$('.demo').slick({
dots: false,
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
cssEase: 'linear',
accessibility:true,
autoplay:true,
autoplaySpeed: 3000,
rtl: true
});
The default for the slideshow is left to right. To enable right to left, you need to set rtl: true and then according to the Slick website:
The HTML tag or the parent of the slider must have the attribute "dir" set to "rtl".
For example:
<div dir="rtl">
<div class="demo">
...
</div>
</div>
is it possible to make delay of slider start... I don't want to slider start immediatly, want it to wait 2 sec before start and then slide.
$(function() {
$('.banner').slick({
autoplay:true,
autoplaySpeed:2000,
centerMode: true,
centerPadding: '50px',
slidesToShow: 1,
speed:2000,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
});
If you want this at initial page load then simply use a setTimeout() function like this,
var count = 0;
setTimeout(()=>{
count = 1;
$('.banner').slick({
autoplay:true,
autoplaySpeed:2000,
centerMode: true,
centerPadding: '50px',
slidesToShow: 1,
speed:2000,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
},2000) // Initialize the amount of time to delay , Its 2seconds currently.
if(count == 1){
$(function() {
$('.banner').slick({
autoplay:true,
autoplaySpeed:2000,
centerMode: true,
centerPadding: '50px',
slidesToShow: 1,
speed:2000,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
});
}
I think this is a bit of a cleaner solution than above. Making use of the inbuilt play/pause methods in Slick. Taken from here.
var slider = $('.slider');
slider.slick({
autoplay: true,
autoplaySpeed: 1000
}).slick("slickPause");
var initialDelay = 3000;
setTimeout(function() {
slider.slick("slickPlay");
},initialDelay);
just control your speed through speed:2000, or autoplaySpeed:2000, this will delay your slider according to the given time
I am trying to work out why the unslick method isn't working while using responsive breakpoints.
<div id="skills" class="sectionWrapperInner">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
</div>
I get error TypeError: b.$slides is null when i am trying to resize the window.
Below is the code for jQuery Slick that i am using
$(document).ready(function(){
function slickIt(){
if(!$('.sectionWrapperInner').hasClass('slick-initalized')){
setTimeout(function(){
$('.sectionWrapperInner').slick({
responsive: [
{
breakpoint: 9999,
settings: "unslick"
},
{
breakpoint: 1199,
settings: {
mobileFirst: true,
slidesToShow: 4,
slidesToScroll: 4,
dots: true,
focusOnSelect: true,
infinte: true,
}
},
{
breakpoint: 640,
settings: {
mobileFirst: true,
slidesToShow: 2,
slidesToScroll: 2,
dots: true,
focusOnSelect: true,
infinte: true,
}
},
]
});
},100)
}
}
$(window).bind('resize',function(){
slickIt();
});
slickIt();
});
Any ideas, why i am getting this always on resizing the screen.
Make sure you are not calling slick slider multiple times for one element, or linking the custom code of slick slider multiple times.
un uncorrected HTML structure can make it happen too, when a div is not closed for example
setTimeout(function(){
$(".product-list-thumbs form .product-image a p").slick('destroy')
},700)
setTimeout(function(){
$(".product-list-thumbs form .product-image a p").slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
arrows: false
});
},1000)
We are using slick slider for a clients project and it has been working perfectly so far, however I have noticed something, I don't know whether it is a bug or something that I am missing something.
When the slick slider is loaded, just before you get the whole slider visible in the viewport it doesnt load properly and stacks at bottom of each other with half of the slider of the page. Then whole slider is visible in the viewport it jumps back to how it should, almost like it has re-slicked its self.
Below is the code for my Slick Slider
$('.css_slider').slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed : 8000,
adaptiveHeight: true,
dots: true
});
and Images looks like as in link here
I have read on various places and found this linkGithub link for same issue
But it is not working for me. I am still getting same ugly effect.
Please suggest
Have you tried delaying the function until the dom is loaded?
$( window ).load(function() {
$('.css_slider').slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed : 8000,
adaptiveHeight: true,
dots: true
});
});
or, if that doesn't work:
setTimeout(function(){
$('.css_slider').slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed : 8000,
adaptiveHeight: true,
dots: true
});
}, 2000)