Slick Carousel - 设置第一张幻灯片

Posted 2023-05-07

【中文标题】Slick Carousel - 设置第一张幻灯片

【英文标题】：Slick Carousel - Set first slide

【发布时间】：2017-05-22 10:52:49

【问题描述】：

我的网站上有一个漂亮的轮播，显示篮球队的赛程。滑块包含按日期排序的当前赛季的所有比赛。

我希望滑块居中到下一场比赛。如何将特定幻灯片设置为第一张幻灯片，即使它不是 html 上的第一张幻灯片。

代码：

$('.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
          
        
    ]
);

【参考方案1】：

您可以为此使用initialSlide。请注意，第一张幻灯片的编号为 0，因此如果您希望滑块从第二张幻灯片开始，您可以设置 initialSlide: 1。

这是我的minimal example，滑块从第三张幻灯片开始。

【参考方案2】：

如果您在 php 或 javascript 变量中指定游戏日期，则可以将它们与当前日期进行比较，并将该变量放入“initialSlide”调用中。

以下示例基于星期几，但概念仍然相同。我有一个客户，周一至周六每周 6 天在他们的酒吧提供特价商品。因此，使用下面的脚本，它将使当前星期几成为“中心”。

您也可以匹配日期而不是星期几。

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

);

这是一个使用 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
          
        
      ]
    );

);

【参考方案3】：

您可以使用内置方法。

this.slider.slickGoTo(0);

-用于反应 也可以像这样使用这个滑块作为属性。

<Slider ref=slider => (this.slider = slider)  ...sliderSettings >
    categories.map(((t) => this.renderCategory(t.path, t.image, t.name))) 
   
</Slider>

【参考方案4】：

根据 Slick.js 版本，设置 initialSlide 选项可能会导致问题。

尝试类似：

$slider = $('.slick-slider');

const api = $slider.slick('getSlick');
api.slickGoTo(selectedIndex);

注意定义selectedIndex变量，并设置为所需幻灯片的索引（不是编号）。