My website is long. Around the middle of the page, I use Swiper to display the references. It's currently set to autoplay, but the problem is that I'd like it to always start from the first slide when I see it. Is it possible?
code:
var referenceSwiper = new Swiper('.reference-swiper', {
slidesPerView: 3.2,
spaceBetween: 20,
// centeredSlides: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
runCallbacksOnInit: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
991: {
slidesPerView: 3.2,
},
320: {
slidesPerView: 1.2,
spaceBetween: 16,
slidesOffsetAfter: 16,
slidesOffsetBefore: 16,
},
}
});
is it possible to change direction of a splide slider in responsive? when i want to change the direction of the thumnail slider in responsive the slider crash.
var secondarySlider = new Splide("#splidev2", {
direction: "ttb",
type: "loop",
height: "100%",
fixedWidth: 100,
fixedHeight: 100,
isNavigation: true,
gap: 10,
pagination: false,
arrows: true,
focus: "center",
updateOnMove: true,
rewind: false,
breakpoints:{
1199: {
perPage: 2,
gap : '1.5rem',
height : '24rem',
},
991: {
direction: "ltr",
},
}).mount();
var primarySlider = new Splide("#splide", {
type: "fade",
pagination: false,
cover: true,
arrows: false,
});
primarySlider.sync(secondarySlider).mount();
https://splidejs.com/guides/options/#direction
From the given documentation I got this = "You can update responsive options by breakpoints or by passing an object to Splide#options..."
You can use Slide#options, if breakpoints not working.
Hi im trying to get my slider responsive, i have two issues, one, i tried changing the row width in the editor code and still doesnt change, also id like to know if anyone knows how to remove the video controls with this plugin.
Slick slider supports responsive breakpoints. This example below is taken directly from their documentation:
$('.yoursliderclass').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
I would like the sliders on the sides are not visible. Only 2 items in the middle, then 1 item on mobile.
Here is a diagram: http://nsa37.casimages.com/img/2017/07/17/170717011620615002.jpg and my codepen: https://codepen.io/anon/pen/owOJpa
The red slides must not be visible.
The simplest solution would be to group 2 citations into a single item, but the problem would be on mobile. There would be 2 items on mobile too, which I do not want.
$('.customers-review__list').slick({
arrows: false,
dots: true,
mobileFirst: true,
responsive: [
{
breakpoint: 1,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
}
},
]
});
Do you have any idea how to get there? Thanks.
Remove max-width property on .customers-review__item, if possible. That should get your work done.
I have implemented slick slider which works fine without resizing the browser. But when I resize the browser to 1024 then the responsive breakpoint settings doesn't work.
jQuery:
$('.slider').slick({
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear',
variableWidth: true,
variableHeight: true,
mobileFirst: true,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
centerMode: false
}
}]
});
Demo -- https://jsfiddle.net/squidraj/hn7xsa4y/4/
Add this settings to your code;
$(".slides").slick({
autoplay:true,
mobileFirst:true,//add this one
}
Add slidesToShow and slidesToScroll option in each breakpoint.
{
breakpoint: 786,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 568,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}
First of all, "variableHeight" option does not exist in Slick Carousel.
To solve your issue, remove variableWidth: true, because this will make your slides take full with of the carousel.
And you can also not use "mobileFirst" option if your page is not using this methodology.
So finally your config should be like this, below
$('.slider').slick({
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear',
mobileFirst: true, //optional, to be used only if your page is mobile first
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
centerMode: false,
}
}]
});
Best Regards.
This did the trick for me.
function resetSlick($slick_slider, settings) {
$(window).on('resize', function() {
if ($(window).width() < 320) {
if ($slick_slider.hasClass('slick-initialized')) {
$slick_slider.slick('unslick');
}
return
}
if (!$slick_slider.hasClass('slick-initialized')) {
return $slick_slider.slick(settings);
}
});
}
slick_slider = $('.client-logos');
settings = {
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
prevArrow: '',
nextArrow: '',
pauseOnHover: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 5,
slidesToScroll: 1,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
};
slick_slider = $('.container');
settings = {
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
prevArrow: '',
nextArrow: '',
pauseOnHover: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 5,
slidesToScroll: 1,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
};
slick_slider.slick(settings);
resetSlick(slick_slider, settings);
Add this to your js and call the slider as shown.
and in your css make the slide display: inline-block; that's it. will work on all responsive screens.
tl;dr When multiple sliders on page changing $('.selector').slick({...}) order helped
I had similar issue. I don't understand why but slidesToShow: 2 didn't take effect on mobile device for me although if you resize it back and forth it took effect. mobileFirst:true helped but broke desktop. Adding both slidesToShow and slidesToScroll didn't help. But when I placed initialization of sliders in the same order as they appear on the page it worked. I don't understand why... I don't understand how to fix this if there're multiple pages with different slider locations...
mobileFirst:true,//add this to your JavaScript file and it should work :)
I am not sure why your js template is failing with below:
responsive: [{
breakpoint: 1024,
I would follow up with their documentation, community, or file a bug.
In any case it is better practice to use CSS3 media queries for this. One approach; nest a div around the slider and position it relative, scale it and it's child elements with width: 100%; and declaring max and min width's within defined resolutions. This should start you in the right direction. Make sure to also make proper use of meta viewport.
First, you use old version of slick in your example. This verson doesn't support mobileFirst property.
Second, you must remove variableWidth if you want to use slidesToShow property.