Syntax for executing unslick() on responsive breakpoint - javascript

Can someone explain to me where I place unslick() in the code - I want to turn off the slick slider on the lowest breakpoint (phones), but remain on ipads and desktops.
I can see that Ken specifys how to use it - but I'm new to JS and don't know where to enter what he is describing.
Thanks,
$('.responsive').slick({
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
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});


If you want to have unslick at breakpoint 480 you would do it like this:
$('.responsive').slick({
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: "unslick"
}
]
});

Related

I have a question about gasp scrollTrigger resposive

I am currently creating a page using Slick Slider and GSAP. However, in the responsive mobile size, the GSAP next to the slick slider fails to capture the area and becomes invisible on the screen. However, it appears on the screen again when resized. Is there a solution to this problem?
//slick-slider
$('.b_card_case').slick({
dots: false,
infinite: true,
autoplay: true,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
prevArrow: $('#arrow_prev2'),
nextArrow: $('#arrow_next2'),
responsive: [{
breakpoint: 1400,
settings: {
arrows: false,
dots: true,
}
},
{
breakpoint: 1024,
settings: {
arrows: false,
dots: true,
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 600,
settings: {
arrows: false,
dots: true,
slidesToShow: 2,
slidesToScroll: 2
}
}
]
});
//GSAP SCROLL TRIGER
gsap.from(".sec_tit3", {
scrollTrigger: {
trigger: ".sec_tit3",
scrub: 1,
start: "-100px 95%",
end: "top 65%",
toggleActions: "restart pause reverse pause",
},
opacity: 0,
y: 100,
});
gsap.from(".noti", {
scrollTrigger: {
trigger: ".noti",
scrub: 1,
start: "100px 85%",
end: "top 65%",
toggleActions: "restart pause reverse pause",
// markers: true,
},
opacity: 0,
y: 200,
});
I want to know the resolution time of these problems.

Slick slider working after some second after reloding page

This is my code please check - it's working after some time after reloading the page please help me on this
I am trying to get slick slider when I reload page, but it's only working after some time
$(document).ready(function() {
$('.template-blog .mobile-tag-slider').slick({
dots: false,
infinite: true,
arrows: false,
slidesToShow: 4,
slidesToScroll: 1,
centerMode: true,
centerPadding: '90px',
mobileFirst: true,
responsive: [
{
breakpoint: 600,
settings: "unslick"
},
{
breakpoint: 769,
settings: {
arrows: false,
slidesToShow: 4,
slidesToScroll: 1
}
}
]
});
});
it's showing some second like this after reloading page
enter image description here
then it's showing right after some second like this
enter image description here

The document ready function executes when the DOM (Document Object Model) is completely loaded in the browser.
Remove this code ** $(document).ready(function() **
$('.template-blog .mobile-tag-slider').slick({
dots: false,
infinite: true,
arrows: false,
slidesToShow: 4,
slidesToScroll: 1,
centerMode: true,
centerPadding: '90px',
mobileFirst: true,
responsive: [
{
breakpoint: 600,
settings: "unslick"
},
{
breakpoint: 769,
settings: {
arrows: false,
slidesToShow: 4,
slidesToScroll: 1
}
}
]
});

delay slick slider until get response from calling API

I am using slick slider it is worked fine but after calling API request the slider apply first before the response of API
this is my first function
fetchProducts () {
this.getProducts ().then(response => {
const products = response.data.data;
this.products = products;
/* console.log(this.products); */
let element = document.getElementById("sliderContainer");
element.classList.add("regular");
this.apllySlider();
})
},
and this is apply slider function
applySlider() {
if (this.products.length >= 1) {
$(".regular").slick({
//dots: true,
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 992,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true,
arrows:false,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
arrows:false,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
arrows:false,
}
}
]
});
}
}
how can i fix this problem?
thanks in advance

just check the variable(which you assigning after getting a response) is null or not null
eg:
applySlider() {
if(this.products){
if (this.products.length >= 1) {
$(".regular").slick({
//dots: true,
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 992,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true,
arrows:false,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
arrows:false,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
arrows:false,
}
}
]
});
}
}
}

slick Cannot read property 'add' of null

I'm using slick lib. I would like to update slides to show, dots... dynamically.
Here is a part of code:
jQuery('.product_slider').slick({
infinite: true,
variableWidth: false,
adaptiveHeight: false,
autoplaySpeed: 3000,
dots: sliderEnableDots,
slidesToShow: sliderSlidesToShow,
slidesToScroll: sliderSlidesToScroll,
speed: sliderScrollSpeed,
autoplay: sliderAutoPlay,
responsive: [{
breakpoint: 780,
settings: {
slidesToShow: 3,
slidesToScroll: 2
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
But here I get an error: Cannot read property 'add' of null
It seems it occurs when I initialized the slick. Here every click initialized the slick. Is there any other way to do it?

I want to make the brands scroller to be continuosly without having pause right now it scroll every 1 second

I have a brands scroller UI element.
I want to make the brands scroller to scroll continuously without having pause. As it stands, it scrolls every second.
Code:
//brands slider
var $brands = $('.our-brands');
if ($brands.length){
$brands.slick({
dots: false,
arrows: false,
infinite: true,
autoplay: true,
speed: 1000,
centerPadding: 10,
slidesToShow: 8,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow: 6,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 900,
settings: {
slidesToShow: 4,
slidesToScroll: 1
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}
]
})
}

Categories