Slick slider change speed after change - javascript

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.

Related

SlickJs problem with vertical slider when loading two slider with same class

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
}
}
]
});
});

Grab and Swipe Cards

I'm creating animated cards with Slick, a JS Carrousel plugin.
I'm wondering if it's possible to add a grab and swipe interaction, as well as a pause on hover function, like the one shown here https://www.hioscar.com/individuals/network/ny
Here's what I've got so far: http://jsfiddle.net/gavinfriel/kbsemva0/1/
<section class="slider">
<!--staff-card : The first card repeats unexpectedly-->
<div class="staff-card">1</div>
<!-- /staff-card -->
<!--staff-card-->
<div class="staff-card">2</div>
<!-- /staff-card -->
<!--staff-card-->
<div class="staff-card">3</div>
<!-- /staff-card -->
</section>
JS
$(function() {
$('.slider').slick({
speed: 07000,
autoplay: true,
autoplaySpeed: 0,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true
});
});
If there's a better plugin to use for this other than Slick I'm all ears.
Ok, I'm not sure if this satisfies you, if not, then sorry :) Still I was trying to help ;) Well that's the best I could do :)
$(function() {
$('.slider').slick({
speed: 1000,
autoplay: true,
autoplaySpeed: 0,
pauseOnHover: true,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true,
draggable: true,
swipeToSlide: true,
});
});
Possible solution
Regards, KJ

How to set the delay before changing slide?

I use Slick slider. I need to set the delay before changing slide, how can I realize this task?
Here is slider's JS-code:
$(".intro__slider").slick({
infinite: true,
dots: true,
dotsClass: "intro__dots",
arrows: false,
swipe: false,
draggable: false
});
var introTitle = $(".intro__title"),
introSlide = $(".intro__slide");
$(".intro__slider").on("beforeChange", function () {
introTitle.addClass("intro__title_hidden");
introSlide.addClass("intro__slide_overlayed");
});
$(".intro__slider").on("afterChange", function () {
introTitle.removeClass("intro__title_hidden");
introSlide.removeClass("intro__slide_overlayed");
});
Here is full code on codepen
try this:
// On before slide change
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
setTimeout(function() {
//your code to be executed after 1 second
}, 1000);
});
You can use autoplaySpeed: 3000, in slick options
$(".intro__slider").slick({
autoplaySpeed: 3000,
infinite: true,
dots: true,
dotsClass: "intro__dots",
arrows: false,
swipe: false,
draggable: false
});
you can use speed to 3000
$(".intro__slider").slick({
infinite: true,
autoplay: true,
autoplaySpeed: 6000,
dots: true,
dotsClass: "intro__dots",
arrows: false,
speed:3000
});
will make the transition in 3 sec, but it won't make a delay, to use a delay I would recommend to use your own dots buttons and the methods slickGoTo , slickNext

Cloning extra slides for Slick Slider

I am using jQuery Slick Slider to create a left-aligned, infinite, variable-width slider. Here is the JSFiddle: http://jsfiddle.net/mtaube/rLkj3wcn/2/
The basic initialization and settings, using the default theme:
$('.js-slick').slick({
dots: true,
variableWidth: true,
arrows: true,
});
Here is the begginning of the slider, which appears as desired:
The problem is that when you reach the last slide there is a bunch of whitespace before the new slides pop in:
Is there a way to avoid this? I need to remove the temporary white space flashing. Thanks in advance.
Add infinite: false
It will solve the white space issue as well as slider cloning issue.
You have use these options:
infinite: false,
slidesToShow: 3
Answering my own question... apparently this is a known bug with the jQuery Slick Slider.
There are some bug reports on GitHub, here is the most relevant one for anyone trying to subscribe to the issue: https://github.com/kenwheeler/slick/issues/1207
There are apparently some hacks posted in that GitHub report, but it didn't work well for me as it broke the 'dots' setting. I will update this answer if the bug is eventually solved. Thanks anyway.
This happens to me when i have 2 items per row. If you know the number of items that can be shown without scroll then you can set up a variable - in my case i could get 6 items on the screen without the need for a scroll
var infiniteScroll = true
if (noOfItems < 7)
{
infiniteScroll = false
}
$('.variable-width2').slick({
dots:true,
infinite: infiniteScroll,
draggable: true,
pauseOnHover: true,
swipeToSlide: true,
adaptiveHeight: false,
centerMode: false,
variableWidth: true,
arrows: false,
slidesToShow: 1,
slidesToScroll: 2,
initialSlide: 1,
rows: 2,
responsive: [
{
breakpoint: 1023,
settings: {
infinite: infiniteScroll,
draggable: true,
pauseOnHover: true,
swipeToSlide: true,
adaptiveHeight: false,
centerMode: false,
variableWidth: true,
arrows: false,
slidesToShow: 1,
slidesToScroll: 2
}
},
{
breakpoint: 600,
// settings: "unslick"
settings: {
infinite: infiniteScroll,
draggable: true,
pauseOnHover: true,
swipeToSlide: true,
adaptiveHeight: false,
centerMode: false,
variableWidth: true,
arrows: false,
slidesToShow: 1,
slidesToScroll: 2
}
}]
});

jQuery Slick Slider: How to make a logo ticker slider

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?

Categories