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
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/
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();
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.
My problem is simple, but I'm missing the forest through the trees...
My page has many slick-sliders. That works well.
These sliders aren't visible in any case. Via onclick-function there will be shown a new div-tag with slick included. (toggle)
The problem is is now:
Slick loads, when page-loading has finished. But only the visible divs.
So, when I toggle a div to get visible, and there's slick in included, Slick is not loaded for this div. I can klick forward or backward of slick-slider and it loads all pictures. But I'd like to load these directly with the onclick-function of the toggle. That would be nice.
And I'm not really good in JS :D
That's where Slick get loaded:
$(document).ready(function(){
$('.lazy').slick({
slidesToShow: 6,
slidesToScroll: 6,
responsive: [
{
breakpoint: 1199,
settings: {
slidesToShow: 5,
slidesToScroll: 5,
}
},
{
breakpoint: 991,
settings: {
slidesToShow: 4,
slidesToScroll: 4,
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
}
},
{
breakpoint: 730,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
}
},
{
breakpoint: 500,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
},
]
});
});
And here's my toggle:
function fotoalbum(id){
var e = document.getElementById(id);
if (e.className == "row fotos-container-deaktiv") {
e.className = "row fotos-container-produktion";
} else {
e.className = "row fotos-container-deaktiv";
}
};
And now I want, that slick starts, when the function fotoalbum is used.
Can someone help me please. :(
And I'm so sry for my bad english. I hope you can understand ;)
As pointed here by the author you can refresh slick whenever you add a new div that contain a slick object. You have to add something like $('.my-slider')[0].slick.refresh() inside your function.
Cheers
$(".somediv").click(function(e) {
$(this).toggleClass('class1');
});
$("#change").click(function(e) {
$(this).hasClass("change1") ?
$(this).removeClass('change1').addClass('change2') :
$(this).removeClass('change2').addClass('change1');
});
.somediv {
cursor: pointer;
}
.class1 {
color: red;
font-size: 20px;
}
.change1 {
color: blue;
}
.change2 {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1 somediv">some text</div>
<div class="change1 somediv" id='change'>some other text</div>
I would like to encourage you to read about .toggleClass()
And when you already read this, have look also at .switchClass()
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();
}
});