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
}
}
]
});
Related
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.
Currently, I'm having an issue with Slick. The button onlick doesn't work (it's not redirecting the page) when I resize the screen down to where the slideshow crosses another breakpoint. Can you please give me suggestion for this?
Below is my code:
This is my html
<div class="cmp-carousel__content slider responsive">
<button class="cmp-carousel__content-button" >Testing
</button>
<button class="cmp-carousel__content-button" >Testing
</button>
<button class="cmp-carousel__content-button" >Testing
</button>
</div>
This is my js
$('.responsive').slick({
infinite: false,
slidesToShow:2,
slidesToScroll:2,
dots: true,
arrows: true,
responsive: [
{
breakpoint: 1110,
settings: {
slidesToShow: 1.5,
slidesToScroll: 1,
infinite: false,
dots: true,
arrows: true,
}
},
{
breakpoint: 800,
settings: {
slidesToShow: 1.3,
slidesToScroll: 1,
infinite: false,
variableWidth: false,
dots: true,
arrows: true,
}
},
{
breakpoint: 700,
settings: {
slidesToShow: 1.2,
slidesToScroll: 1,
infinite: false,
variableWidth: false,
dots: true,
arrows: true,
}
},
]
});
Thank you.
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 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
}
}
]
})
}
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"
}
]
});