I want to create a smooth continuos vertical slider with a swiping/touch enabled.
I'm trying to create a vertical slider to show my product's item, i have managed to do that with slick with the property of "vertical" and "verticalSwiping", but when I added the continuos settings ( speed, cssEase, etc ) from what I gather in slick github issue pages.... The slider can't seems to be swiped correctly.
Here is my codepen: https://codepen.io/DilrajPutra10/pen/bPvQmM
$('.slick-carousel').slick({
vertical:true,
verticalSwiping:true,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 0,
speed:9000,
cssEase: 'linear',
infinite: true,
arrows:false,
});
Related
Hello my dear community,
I'm working on a site with multiple sliders on one site. I use slick.js
Problem ist that the slidesToShow is depending on the number of slider items.
Maximum slidesToShow should be 6
if the number of slides is smaller then 6:
-> slidesToShow should be the number of slider items
I tried this:
$('.carousel').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: $(this).querySelectorAll( '.item:not(.slick-cloned)' ).length > 4 ? 6 : 2,
slidesToScroll: 1,
});
Got console error that querySelectorAll is not a function. Also $(this) is the document not the slider in that context.
Also I tried to iterate through the sliders and tried to initializing them one by one but it also does not work
var imgcarousels = document.getElementsByClassName('vaunet-carousel ');
Array.prototype.forEach.call(imgcarousels, function(carousel, index) {
console.log(carousel);
carousel.slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
responsive: [
{
breakpoint: 991,
settings: {
dots: true,
arrows: false,
slidesToShow: 1
}
}
]
});
});
Error: carousel.slick is not a function
Any Idea how to make the slidesToShow depending on the slides?
Thanks a ton <3
Regards
Timo
<script>
if($(window).width()<=768){
$('#wm_carrousel--inner').slick({
dots: true,
infinite: true,
speed: 300,
arrows:false,
slidesToShow: 3,
slidesToScroll: 1,
edgeFriction:2,
swipe:false,
swipeToSlide:false,
touchMove:true,
})
}
</script>
I'm trying to run this script just in mobile, but it changes the DOM on desktop and messes up my styles.
I am trying to use one slider code for two sliders using same class name. I have created this codepen to illustrate the problem.
Problems:
Both sliders are not behaving same, means they have different sliding pattern. I have changed the color current active slide to show how both sliders are different.
One of the slider works fine ( till some slides) but other one totally off as you can see, in terms of container height, highlight pattern, etc.
Both of them have chopped content on top or bottom, even though there is no centerMode enabled. The behaviour I was expecting is to current slide to slide on the top and not show the preview of gone slide (top) and next (bottom)
Second slider changes its height randomly. I don't know why
I have tried one solution which didn't work either and it is there as commented code in the codepen.
$(".feature-container").each(function () {
console.log(this.id);
let elm_primary = $("#" + this.id)
.find(".feature-slider")
.get(0);
$(elm_primary).slick({
slidesToShow: 5,
slidesToScroll: 1,
focusOnSelect: true,
autoplay: true,
autoplaySpeed: 1000,
vertical: true,
arrows: false,
infinite: true,
responsive: [
{
breakpoint: 700,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
focusOnSelect: true,
autoplay: true,
autoplaySpeed: 1000,
vertical: true,
dots: false,
arrows: true
}
}
]
});
});
What i want achieve is to change autoplay speed when the first animation will be loaded.
I found that slick has afterChange function but I don't know how to use it.
My code:
$(".home-slider-t").slick({
dots: false,
arrows: true,
infinite: false,
speed: 2500,
slidesToShow: 1,
autoplay: true,
fade: true,
autoplaySpeed: 6000
});
I want to set autoplay speed to 15 000ms after first change. (infinite true)
Please note: If you provide a demo of your problem in jsfiddle help us to help you better because this is a plugin. anyways lets see what options we have:
First initialize the plugin
$(".home-slider-t").slick({
dots: false,
arrows: true,
infinite: false,
speed: 2500,
slidesToShow: 1,
autoplay: true,
fade: true,
autoplaySpeed: 6000,
});
and then use slick plugin events and methods:
$(".home-slider-t").on('afterChange', function(event, slick, currentSlide, nextSlide){
$(".home-slider-t").slick('slickSetOption', 'autoplaySpeed', '15000');
});
p.s: Hope this code help to get idea of using methods and events of this plugin.
i couldn't check the code because you didn't provide any jsfiddle but seems its fine.
I'm currently using the Slick Slider plugin and don't really want to add another plugin to achieve a Logo Ticker slide effect like seen here bxSlider. Any idea how to do it with Slick or if it's even possible?
Set autoplaySpeed to 0 and cssEase to 'linear' to achieve that effect.
$(function() {
$('.your-class').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 0,
speed: 1000,
cssEase:'linear'
});
});
Example here: https://jsfiddle.net/ugtdjrjt/
There is an autoplay option at Slick Slider
$('.slider').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
Is that maybe already everything you want?