Bootstrap Slick Carousel -设置第一张幻灯片

8yparm6h  于 2023-01-28  发布在  Bootstrap
关注(0)|答案(5)|浏览(217)

我的网站上有一个显示篮球队赛程的滚动条,滚动条包含了本赛季所有比赛的日期顺序。
我希望下一个游戏的滑条居中。我如何将一个特定的幻灯片设置为第一张幻灯片,即使它不是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
          }
        }
    ]
});
v2g6jxz6

v2g6jxz61#

您可以使用initialSlide来完成此操作。请注意,第一张幻灯片的编号为0,因此如果您希望滑块从第二张幻灯片开始,则应设置initialSlide: 1
这是我的minimal example,滑块从第三张幻灯片开始。

uinbv5nw

uinbv5nw2#

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

});
cl25kdpy

cl25kdpy3#

您可以使用内置方法。

this.slider.slickGoTo(0);
  • 对于react也利用这个滑块作为属性像这样。
<Slider ref={slider => (this.slider = slider)} { ...sliderSettings }>
   { categories.map(((t) => this.renderCategory(t.path, t.image, t.name))) 
   }
</Slider>
d5vmydt9

d5vmydt94#

根据Slick.js版本,设置initialSlide选项可能会导致问题。
尝试以下内容:

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

const api = $slider.slick('getSlick');
api.slickGoTo(selectedIndex);
    • 注意**定义selectedIndex变量,并设置为所需幻灯片的索引(而不是数字)。
vsnjm48y

vsnjm48y5#

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

相关问题