jQuery Slick Slider: How to make a logo ticker slider - javascript

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?

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

Slick JS Vertical Scrolling Continuos, but cannot be drag/touch swipe

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

Slick slider change speed after change

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.

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

Slick Slider go to nth slider on start

I want to use Slick Slider to start form 20th slide. My code is:
<script>
$(document).ready(function(){
$('.timeline-items').slick({
slidesToShow: 5,
slidesToScroll: 4,
dots:true,
arrows:true,
infinite:false,
autoplay: true,
autoplaySpeed: 4500
});
$('.timeline-items').slickGoTo(20, false);
});
</script>
Slider fires OK (.slick functions starts), but then i got:
Uncaught TypeError: $(...).slickGoTo is not a function
What I do wrong?
from documentation:
slickGoTo
int : slide number, boolean: dont animate
Navigates to a slide by index
$(function() {
var tiSlick = $('.timeline-items').slick({
slidesToShow: 5,
slidesToScroll: 4,
dots:true,
arrows:true,
infinite:false,
autoplay: true,
autoplaySpeed: 4500
});
tiSlick.on('init', function(event, slick) {
tiSlick.slick('slickGoTo', 20);
});
});

Categories