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
});
});
Related
I have implemented a slick slider which works fine in 1200px, but as soon I resize, it breaks down. I need to implement 3 slides in 1200px, 2 slides in 786px and 1 slide in 576px screen with equal space between each slide. When I tried to put a margin between each slide, the first slide, cuts off. Here is my code.
JQUERY
jQuery('.multiple-items').slick({
prevArrow: '<button class="image-prev w-30 w-md-40 w-lg-50 h-25 h-lg-50 h-md-40 border-0 bg-bfp-primary position-absolute rotate180"></button>',
nextArrow: '<button class="image-next w-30 w-md-40 w-lg-50 h-25 h-lg-50 h-md-40 border-0 bg-bfp-primary position-absolute "></button>',
dots: false,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: false,
mobileFirst: true,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
mobileFirst: true,
}
},
{
breakpoint: 576,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
mobileFirst: true,
}
}
]
});
jQuery('.slick-list').find('.slick-active').addClass('slick-slide-margin');
PHP
<div class="ml-7 ml-xl-24 mr-0">
<div class="pt-6.8 pb-9">
<h2 class="font-inter-medium fz-20 text-theme-blue-dark leading-24">Photo Gallery</h2>
<div class="multiple-items pt-4" >
<?php
while ($photo_gallery_query->have_posts()) : $photo_gallery_query->the_post();
$featured_image_url = get_the_post_thumbnail_url(get_the_ID(),'full');?>
<div>
<img src="<?php echo $featured_image_url; ?>">
</div>
<?php endwhile;
wp_reset_postdata();?>
</div>
</div>
</div>
SASS
.slick-slide-margin {
#extend .w-270;
#extend .mr-xl-7;
#extend .mr-3;
}
Hi #Kuldeep Upreti and welcome to Stackoverflow.
Just to make sure, have you tried to compare your solution to their demos?
http://kenwheeler.github.io/slick/
Also this thread might be helpful,
Slick slider not being responsive when resizing the window
Often, the kind of problem you describe, is pretty easy to solve once you figure it out. Most of the times it's just a minor fix, like a missing configuration, event and so on.
To make it easier to help, you can also set up a demo using a service like CodePen (or any other similar service),
https://codepen.io/
Let us know if you're not being able to solve your problem with these links. :-)
I just created a sample slick slider with fadein and fadeout effect. I want to add a once second delay between fadein and fadeout effect of these slider images. i.e after fadeout of once slide image there should be one second gap to the next slider image fadein. Below is my code and code pen link.
Here is Code
$(document).ready(function($) {
$('.slider').slick({
dots: false,
arrows: false,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
fade:true,
autoplay: true,
speed: 2000,
cssEase: 'linear',
pauseOnHover:true,
responsive: [{
breakpoint: 767,
settings: {
arrows: false,
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="slider">
<div class="img-container"><img src="https://cdn.pixabay.com/photo/2018/04/26/16/39/beach-3352363_960_720.jpg">
</div>
<div class="img-container"><img src="https://cdn.pixabay.com/photo/2018/04/26/16/31/marine-3352341_960_720.jpg">
</div>
<div class="img-container"><img src="https://cdn.pixabay.com/photo/2016/03/08/20/03/flag-1244649_960_720.jpg">
</div>
</div>
Code pen Link: https://codepen.io/dSaif/pen/ExaaQJV
Please help me how can i do this
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
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
}
}]
});
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();