We Keep Coding

Using slick.js in autoplay mode for a single slide

I want to use slick.js for a simple news ticker. So I have a box where text is coming from the right and automatically scrolls to the left in a loop. The problem is that slick.js refuses to move the text if there is just one slide. I want the slide to move from the right to the left and after passing the left edge it should start moving from the right again. Does anyone know how to achieve this? Here is a little fiddle showing my problem. It uses this javascript code:
$(function(){
$('.slider').slick({
speed: 10000,
autoplay: true,
autoplaySpeed: 0,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true,
infinite: true
});
});

Looks like slick carousel isn't built to work with only one element. How about using jQuery to clone your slide once so the plugin works? See functional example below:
$(function() {
if ($('.slider div').length == 1) {
$('.slider div').clone().appendTo('.slider');
}
$('.slider').slick({
speed: 10000,
autoplay: true,
autoplaySpeed: 0,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true,
infinite: true
});
});
img {
margin: 10px;
border: 1px solid black;
}
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick.css">
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<section class="slider">
<div>
<img src="http://placehold.it/350x150" />
</div>
</section>

Jon's answer is good, but it will give you two same slides which you can slide (change). If you wish to show single slide without cloning, you can use initialSlide setting.
$(function() {
var start = 0;
if ($('.slider div').length == 1) {
start = -1;
}
$('.slider').slick({
speed: 10000,
autoplay: true,
autoplaySpeed: 0,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true,
infinite: true,
initialSlide: start
});
});

How can I change the speed of slider using arrow in Slick Carousel?

I have created a logo slider which displays similar to marquee. What I want to do is to add next/prev arrows that can accelerate the speed of slider when click next arrow and reverse the slider when click prev arrow. I currently use slick carousel to make it.
Also I have no idea why sometimes my carousel pause for a second then continue, can anyone help me with this?
$(document).ready(function($) {
$('.marquee-logo').slick({
autoplay: true,
infinite: true,
autoplaySpeed: 0,
slidesToScroll: 1,
slidesToShow: 5,
arrows: false,
cssEase: 'linear',
speed: 6500,
initialSlide: 1,
draggable: false,
});
});
<div class="marquee-logo">
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
</div>
http://codepen.io/takumi24/pen/JRzEjA

This can be used to make slider slow
$("#slowbutton").click(function(){
$('.marquee-logo').slick('unslick');
$('.marquee-logo').slick({
autoplay: true,
infinite: true,
autoplaySpeed: 0,
slidesToScroll: 1,
slidesToShow: 5,
arrows: false,
cssEase: 'linear',
speed: 10000,
initialSlide: 1,
draggable: false,
});});
This for making faster
$("#nextbutton").click(function(){
$('.marquee-logo').slick('unslick');
$('.marquee-logo').slick({
autoplay: true,
infinite: true,
autoplaySpeed: 0,
slidesToScroll: 1,
slidesToShow: 5,
arrows: false,
cssEase: 'linear',
speed: 300,
initialSlide: 1,
draggable: false,
});
});
http://codepen.io/anon/pen/yawgra
On button click first destroy the slider and add slider again with increased/decreased speed
You can also try by this $('.marquee-logo').slick('slickSetOption', 'speed', 500,true); with out destroying the slider
But speed change by slickSetOption method cause a delay:issue https://github.com/kenwheeler/slick/issues/2334

User XZY's answer worked for me. While playing with it I also noticed that slick (at least in the implementation I was using) exposes an options property which is modifiable. So the below might work as well:
var slickSlider = $('.marquee-logo')[0]
slickSlider.slick.options.autoplaySpeed = 500

Slick Slider Content only load when i click on slick-arrow

I implement the Slick Slider it works perfect if i load the slider on page loads.
The issue is when i hide the slider div and show it on some click listener. it does not work until i click on Side arrows.
Any Solution ?
Here is my Code.
<div class="year-main">
<h4>Year</h4>
<div class="center year-listing">
<div>2012</div>
<div>2013</div>
<div>2014</div>
<div>2015</div>
<div>2016</div>
<div>2017</div>
</div>
</div>
Here is Javascript:
$('.center').slick({
centerMode: true,
infinite: true,
centerPadding: '60px',
slidesToShow: 4,
speed: 500,
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
}, {
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}]
});

Slick carousel right to left

I've setup slick carousel to continuously scroll, however I need to to scroll in the oposite direction. Adding the RTL option didn't seem to work.
Fiddle here (currently left to right)
http://jsfiddle.net/mth2ghod/
$(function(){
$('.slider').slick({
speed: 10000,
autoplay: true,
autoplaySpeed: 100,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true
});
});

Setup "slidesToScroll" property to a negative value (e.g slidesToScroll: -1,) is not a native solution. This produced images smooth flow problem.
The right way is to add an attribute dir="ltr" to the slider's container (HTML element) OR add rtl: false property to slider settings:
// add an attribute dir="ltr" to the slider's container
//$('.slider').attr('dir', 'ltr');
// OR add `rtl: false` property to slider settings
$('.slider').slick({
autoplay: true,
slidesToShow: 3,
slidesToScroll: 3,
dots: true,
infinite: true,
cssEase: 'linear',
rtl: false
});
Note: This will reverse text direction also which can be changed by the CSS direction: ltr;
JS Fiddle Example

Change the slidesToScroll to a -1 (it will change the slide direction)
$(function(){
$('.slider').slick({
speed: 10000,
autoplay: true,
autoplaySpeed: 100,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: -1,
variableWidth: true
});
});

in your rtl css add below without any edit on
[dir='rtl'] .slick-slide {
float: left; }

know this is old, but the slick docs says:
Note: the HTML tag or the parent of the slider must have the attribute "dir" set to "rtl".

Here is the example for vertical slider from top to bottom.
http://jsfiddle.net/mth2ghod/114/
$(function(){
$('.slider').slick({
speed: 5000,
autoplay: true,
autoplaySpeed: 0,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: -1,
vertical: true
});
});

According to the Slick GitHub page the bug fix is the below CSS code:
[dir='rtl'] .slick-slide
{
float: left;
}
and
.slick-slider .slick-track, .slick-slider .slick-list {
direction: ltr;
}
https://github.com/kenwheeler/slick/issues/2968#issuecomment-1143535266

This works for me,
I add ( dir="rtl" ) to the slider container and then add ( rtl: true ) to the slick slider settings
$('.carousel-rtl').slick({
infinite: true,
slidesToShow: 2,
slidesToScroll: 1,
arrow: true,
dots: true,
rtl: true,
});
<div class="wrapper">
<div class="slide-wrapper">
<h2>Slick with RTL<h2>
<div class="carousel-rtl" dir="rtl">
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
</div>
</div>
You can see the sample here
https://codepen.io/davecar21/pen/RwovWvB

Slick Carousel RTL and LTR
Example: English (LTR) and Arabic (RTL)
Slick Carousel for RTL:
$(".slider-nav").slick({
arrows: false,
fade: false,
slidesToShow: 1,
slidesToScroll: 1,
rtl: true
});
Slick Carousel for LTR:
$(".slider-nav").slick({
arrows: false,
fade: false,
slidesToShow: 1,
slidesToScroll: 1,
rtl: false //not mandetory in LTR
});

adding [dir="ltr"] to the slider container and also adding [rtl: false] to slick slider settings fixed the issue for me.
Example code:
this.$hero.slick({
accessibility: true,
arrows: false, // this theme has custom arrows
draggable: false,
dots:true,
fade: false,
rtl: false,
autoplay: this.$hero.data('autoplay'),
autoplaySpeed: this.$hero.data('speed')
}).slickAnimation();

how to add thumbnails to dots of slick slider mentioning the current slide

I am currently working on a new project which required a slider. I have implemented slick JS for one of my project.
Now I need to add thumbnails which will appear when we hover the dots which will link to the slider
For example, click on first thumb and slider will advance to first slide,....click on third and slides to third slide.
HTML
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/style.css"/>
</head>
<body>
<!-- THis is the slider code -->
<div class="center">
<div><img alt="slide 2" src="images/img1.jpg"></div>
<div><img alt="slide 2" src="images/img2.jpg"></div>
<div><img alt="slide 2" src="images/img3.jpg"></div>
<div><img alt="slide 2" src="images/img4.jpg"></div>
<div><img alt="slide 2" src="images/img5.jpg"></div>
</div>
<script type="text/javascript" src="slick/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="slick/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 1,
dots: !0, /* It is for the navigation dots */
draggable: !1,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
</script>
</body>
</html>

You may replace dots with custom thumbnails. You would need to add thumbnails somewhere (for example, in a hidden div inside the image slide wrapper. See the code for reference:
$('.slideme').slick({
dots: true,
customPaging: function(slider, i) {
// this example would render "tabs" with titles
return '<button class="tab">' + $(slider.$slides[i]).find('.slide-title').text() + '</button>';
},
});
You would also need tweak up the native Slick pager css to remove dots and add more space and styles for your thumbnails

add a data attribute to the slide like the bellow
<div class="slide" data-thumb="{{assets}}/images/image-name.jpg"></div>
after that add customPaging function inside the script like bellow
$('.slider').slick({
dots: true,
customPaging: function(slider, i) {
return '<button><span class="thumbImg" style="background-image:url('+$(slider.$slides[i]).data('thumb')+');"></span></button>';
},
});