Slick Carousel - 设置第一张幻灯片

Question

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

Answer 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.

Answer 2

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

});

Answer 3

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>

Answer 4

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).

Answer 5

 $('.slider-info').slick('slickAdd','<div>your text</div>',true);