Currently using Slick Slider on a WordPress site.
I have a slider that features 3 columns max, on a full screen - 1024px plus. On a screen size under 1024px the slider showcases 2 columns and on mobile, the slider features 1 columns.
I have built this slider dynamic - therefore their possibilities, there will be periods, not all columns will be populated. i.e. at the screen 1024px plus, the user may have only uploaded assets for two slides, within the slider, rather than three etc.
The issue I am having is trying to make my slider fluid, for example, if the user only uploads 1 or 2 slides - within the slider, these slides do not fill the full screen. I have tried using 'unslick' my setting for the first object. Unless I am missing from the documentation I can not find anything suitable
Here is a snippet of my code:
$(slider).slick({
autoplay: true,
autoplaySpeed: 800,
slidesToShow: 3,
slidesToScroll: 3,
speed: 800,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 980,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
prevArrow: false,
nextArrow: false
}
},
}
Currently there is no option to slick or unslick a slider based on the amount of slides. But you can trick it selecting the amount of slides you have, and initializing the slider depending on that amount.
// your Slick element
var slider = $('.your-selector');
// slides amount
// it will take the maximum number of slides or 1 in case the slider is empty
var slides = Math.max(1, slider.children('.your-slide-selector').length);
// slick initialization
// for each slidesToShow and slidesToScroll use Math.min so it will take the minimim amount between the slides amount and the defined slides for the breakpoint
$(slider).slick({
autoplay: true,
autoplaySpeed: 800,
slidesToShow: Math.min(3, slides),
slidesToScroll: Math.min(3, slides),
speed: 800,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: Math.min(3, slides),
slidesToScroll: Math.min(3, slides),
infinite: true,
dots: true
}
},
{
breakpoint: 980,
settings: {
slidesToShow: Math.min(2, slides),
slidesToScroll: Math.min(2, slides),
prevArrow: false,
nextArrow: false
}
}
]
});
I didn’t tested the responsiveness of the slider itself. The script just sets the slidesToShow and slidesToScroll to the value defined, or in case the amount of slides is less than the defines slides, sets the values to the slides amount.
Hope it helps.
Related
I am creating a slider in react with Slick Slider. The problem is: when the screen size changes, the slides reduce in size or stack on top of each other.
Slick slider offers :
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
},
…
]
But this does not prevent the change in size of the slides and does not fix the margin between the slides which are constantly changing.
I tried :
.slick-slide {
width: auto !important;
}
In the CSS file, but then the slides accumulate one under the other, generating 4 rows instead of 2. Also, the animation is too large and create a blank space at the end of the slider.
Is it possible to create a slider with slides, that keep the same size and space between them whatever the size of the window? A way to keep a fixed size of slides, showing only the number of slides possible on the screen and showing only a part (or not) of the following slides?
So as to be responsive as well. What is wanted :
Here is my code :
const settings = {
rows: 2,
slidesPerRow: 1,
slidesToShow: 3.2,
infinite: false,
swipeToSlide: true,
slidesToScroll: 1,
lazyLoad: true,
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 2.5,
slidesToScroll: 2,
}
},
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 1.7,
slidesToScroll: 1,
arrows: false }
},
{
breakpoint: 480,
settings: {
slidesToShow: 1.4,
slidesToScroll: 1,
arrows: false
}
}
]
};
return (
<>
<h2>…</h2>
<div className="cell">
<Slider {...settings}>
{
this.props.data.nodes.map((node,key) => (
<Cell node={node} key={key} />
))
}
</Slider>
</div>
</>
);
Thank you!
ex)
4 slides in 1800px
slidesToShow: _.round((width * 4) / 1800, 1 or 2);
or
https://react-slick.neostack.com/docs/example/variable-width/
Can you please help with some jquery tips ?
I tried to make this slider ( https://www.jqueryscript.net/slider/Fully-Responsive-Flexible-jQuery-Carousel-Plugin-slick.html ) into a responsive one, but I don't know why, when I reduce the window, practicly everything is okay, but when I make the window bigger, the slider disapear.
Check my code :
<script type="text/javascript">
<!-- écouteur sur le bouton burger
-->
$('#btn-burger').click(function() {
$('nav ul').toggle();
});
$(document).ready(function(){
$('.demo').slick()
});
$('.demo').slick({
mobileFirst:true,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
infinite: true
}
}, {
breakpoint: 769,
settings: {
slidesToShow: 2,
dots: true
}
}, {
breakpoint: 469,
settings: "unslick"
}]
})
</script>
I have to finish my website before Thursday, thank you for helping me !
Bianca
click here
I am currently using slick-slider to display content in 3 columns. I am doing this using (flexbox) Essentially - I only want the slider to be activated on mobile view, therefore when the users shrink(resize) the screen down to mobile view the flexbox 3 columns turn into a slider, displaying one slide at a time.
The problem I am having when the user opens the screen back to desktop view, the slides do not come back up, they seem to get lost in the slider on mobile view.
what I want to happen is for it to wait until the user has resized the screen to 649 then when it resizes back to 651 it unslicks
$(slider).slick({
autoplay: true,
autoplaySpeed: 800,
slidesToShow: 3,
slidesToScroll: 3,
speed: 800,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
dots: true
}
}, {
breakpoint: 650,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}],
});
$(window).on('resize', function() {
var win = $(this);
if (win.width() >= 650) {
$(slider).slick('unslick')
};
});
I believe unslick() is the right function.
$(slider).unslick();
I'm trying to enable Slick Slider (slick.js) to initiate only over 520px wide. Anything below that and the slides just stack (i.e. no slick). Is it possible so that it can work without refreshing the page?
I've done this, which works when dragging the browser (narrow) below 500px, but when I move it over 500px it doesn't re-initiate without refreshing the page...
$('.slick').slick({
autoplay: true,
autoplaySpeed: 4000,
delay: 5000,
speed: 700,
responsive: [
{
breakpoint: 500,
settings: "unslick"
}
]
});
Is there a way around this?
I'm using https://github.com/kenwheeler/slick
You can try to reconstruct it when the window is resized above 500. This seems to work in my demo.
JSFiddle Demo
function slickify(){
$('.slick').slick({
autoplay: true,
autoplaySpeed: 4000,
delay: 5000,
speed: 700,
responsive: [
{
breakpoint: 500,
settings: "unslick"
}
]
});
}
slickify();
$(window).resize(function(){
var $windowWidth = $(window).width();
if ($windowWidth > 500) {
slickify();
}
});
My point being: if I have two slides and I want to display 4 elements per slide, but only have 6 elements in total, it would be represented as follows:
First slide: 1 2 3 4
Second slide: 3 4 5 6
But I want it to display the second slide as 5 and 6 only and make it go around a full lap, is this possible and if so - has anybody done that and can show me how to do it as well?
Edit
The slick structure is basically as follows:
<div class="products">
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
</div>
Slick options:
$('.products').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 950,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: false
}
},
{
breakpoint: 760,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
infinite: true,
dots: false
}
}
]
});
}