I have a slick carousel on my website showing a basketball team's schedule. The slider contains all the games from the current season ordered by date.
I want the slider to be centered to the next game. How do I set a specific slide as the first slide, even though it's not the first one on the html.
Code:
$('.result_slider').slick({
rtl: true,
centerPadding: '0px',
slidesToShow: 6,
responsive: [
{
breakpoint: 1680,
settings: {
arrows: false,
centerPadding: '0px',
slidesToShow: 3
}
},
{
breakpoint: 481,
settings: {
arrows: false,
centerPadding: '0px',
slidesToShow: 1
}
}
]
});
You can use initialSlide for that. Note that the first slide has the number 0, so if you would like the slider to start from the second slide you would set initialSlide: 1.
Here's my minimal example where the slider starts from the third slide.
If you assign your dates of the games in a PHP or JavaScript variable, then you can compare them to the current date and place that variable in the "initialSlide" call.
Example below is based on day of the week, but the concept is still the same. I have a client who has specials at their bar 6 days a week Monday - Saturday. So with the script below, it will make the current day of the week "center".
You could also do this matching the date instead of the day of the week.
jQuery(document).ready(function(){
var d = new Date();
var day = d.getDay();
var slide;
if (day == 1) {
slide = 0;
}else if (day == 2) {
slide = 1;
}else if (day == 3) {
slide = 2;
}else if (day == 4) {
slide = 3;
}else if (day == 5) {
slide = 4;
}else if (day == 6) {
slide = 5;
}else{
slide = 0;
}
$('.specials').slick({
centerMode: true,
centerPadding: '40px',
adaptiveHeight: true,
slidesToShow: 3,
initialSlide: slide,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
});
Here is an example using PHP.
<?php
//Get current Date/Time
date_default_timezone_set('America/Los_Angeles');
$date = new DateTime();
// Set day variable global for initial slide
global $day;
//$date->format('l') - this gets the "Day" of the week by name.
// if current day of the week matches either set days of the week, then match that slide as the initialSlide.
if ($date->format('l') == "Monday"){
$day = "0";//slide 0
}else if ($date->format('l') == "Tuesday"){
$day = "1";//slide 1
}else if ($date->format('l') == "Wednesday"){
$day = "2";//slide 2
}else if ($date->format('l') == "Thursday"){
$day = "3";//slide 3
}else if ($date->format('l') == "Friday"){
$day = "4";//slide 4
}else if ($date->format('l') == "Saturday"){
$day = "5";//slide 5
}else{
$day = "0";//slide 0
}
?>
jQuery(document).ready(function(){
$('.specials').slick({
centerMode: true,
centerPadding: '40px',
adaptiveHeight: true,
slidesToShow: 3,
initialSlide: <?php echo $day; ?>,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
});
You can use the builtin method.
this.slider.slickGoTo(0);
-For react
Also utilize this slider as property like this.
<Slider ref={slider => (this.slider = slider)} { ...sliderSettings }>
{ categories.map(((t) => this.renderCategory(t.path, t.image, t.name)))
}
</Slider>
Depending on Slick.js version, setting initialSlide option may cause issues.
Try something like:
$slider = $('.slick-slider');
const api = $slider.slick('getSlick');
api.slickGoTo(selectedIndex);
Note to define selectedIndex variable, and set to desired slide's index (not number).
$('.slider-info').slick('slickAdd','<div>your text</div>',true);
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
Let's suppose slick slider pagination has 25 pages (it might be possible on mobile devices)
Is it possible to set up a slick slider to show pagination like shown below?
Pagination block: < 1 ... 2 3 4 ... 25 >
Update: what I mean is to hide some pages and show these dots instead
try this
<section class="slider">
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
<div>slide4</div>
<div>slide5</div>
</section>
<span class="pagingInfo"></span>
$(".slider").slick({
autoplay: true,
dots: true,
customPaging: function (slider, i) {
var thumb = $(slider.$slides[i]).data();
return `<a>${i}</a>`;
},
responsive: [
{
breakpoint: 500,
settings: {
dots: false,
arrows: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 2,
},
},
],
});
I am building a carousel using Slick, and I've got some responsive breakpoints set as seen here:
var slidesNumber = $('.aslide').length;
var options = {
rows: (slidesNumber > 3 ? 2 : 1),
slidesPerRow: 3,
slidesToShow: (slidesNumber > 3 ? 1 : 3),
slidesToScroll: 1,
dots: true,
arrows: false,
dotsClass: 'slick-dots slick-dots-black',
adaptiveHeight: true,
responsive: [
{
breakpoint: 1280,
settings: {
slidesPerRow: 2,
slidesToShow: 1,
slidesToScroll: 1,
rows: 2,
}
},
{
breakpoint: 768,
settings: {
slidesPerRow: 1,
slidesToShow: 1,
slidesToScroll: 1,
rows: 1,
}
}
]
}
$('.slider').slick(options);
however, Slick ignores the 768px breakpoint completely and display 2 rows of 2 slides each instead of 1 row 1 slide. Here is a JSFiddle.
I've looked here and here.
The mobileFirst setting makes Slick ignore even the 1280px breakpoint.
I've looked at other posts as well but found no solution yet.
EDIT 1:
Also, noticed in the JSFiddle, if you load the page with window width less than 768px it shows 3 slides in 2 rows but if you resize up and down it starts showing 2 slides in 2 rows again.
I'm using Slick.js to show slides on my page. It is working as expected however I am trying to add a slider counter to the bottom of the slider that would show 1/4 if the fist slide is shown, 2/4 if the second slide is shown, etc. I have tried to use dotsClass: 'custom_paging' function however this shows 1 of 4, 2 of 4 as a list rather than just 1/4 or 2/4 , etc depending on the slide that is shown.
Code:
$(document).ready(function () {
$('.project-carousel').slick({
centerMode: true,
infinite: true,
centerPadding: '40px',
slidesToShow: 3,
dots: true,
dotsClass: 'custom_paging',
customPaging: function (slider, i) {
var slideNumber = (i + 1),
totalSlides = slider.slideCount;
return slideNumber + ' of ' + totalSlides;
},
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
$('.slick-slider').on('click', '.slick-slide', function (e) {
e.stopPropagation();
var index = $(this).data("slick-index");
if ($('.slick-slider').slick('slickCurrentSlide') !== index) {
$('.slick-slider').slick('slickGoTo', index);
}
});
});
DEMO FIDDLE
Actually I have found the solution to this and its below adding the below code:
var $status = $('.counter-info');
var $slickElement = $('.project-carousel');
$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
//currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
var i = (currentSlide ? currentSlide : 0) + 1;
$status.html( '<span class="current_slide">' + i + '</span> / <span class="total_slides"> ' + slick.slideCount + '</span>');
});
DEMO:
I have accordion combination: tabs is slider (I use slick carousel with set break point). It work fine, until I resize window over break point, it not until working.
This is my site:
http://geeman-2.myshopify.com/
(New arrivals section)
And this my code:
$(document).ready(function(){
$('.sub-slider').slick({
dots: false,
infinite: true,
autoplay: true,
autoplaySpeed: 3000,
speed: 300,
slidesToShow: 6,
slidesToScroll: 6,
responsive: [
{
breakpoint: 1208,
settings: {
slidesToShow: 4,
slidesToScroll: 4
}
},
{
breakpoint: 798,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
var panelHandle;
$('.btn-on').on('click', function() {
var $this = $(this),
handle = $this.data('handle');
panelHandle = handle;
$('#' + handle).slideDown('slow');
$('.triangle-' + handle).slideDown('slow');
$('.' + handle).slick({
dots: false,
infinite: true,
speed: 300,
arrows: false,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 798,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
$('.btn-close').on('click', function() {
var $this = $(this),
handle = $this.data('handle');
$('#' + handle).slideUp(1000);
$('.triangle-' + handle).slideUp(1000);
});
});
I hope everyone help me solve it!
Thanks!
Did you try the $('.slick-carousel-responsive').resize(); trick found here? https://github.com/jellekralt/Responsive-Tabs/issues/52 - adding it to my resize event fixed a similar issue for me!