web-dev-qa-db-ja.com

スリックカルーセル-最初のスライドの設定

私のウェブサイトには、バスケットボールチームのスケジュールを示す滑らかなカルーセルがあります。スライダーには、日付順に並べられた現在のシーズンのすべてのゲームが含まれます。

スライダーを次のゲームの中央に配置したい。 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
          }
        }
    ]
});
javascriptjqueryhtmltwitter-bootstrapslick.js
7
Daniel

initialSlideを使用できます。最初のスライドの番号は0であるため、2番目のスライドからスライダーを開始する場合は、initialSlide: 1を設定します。

これが私の 最小限の例 で、スライダーは3番目のスライドから始まります。

19
edo

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

});
1
Tyler Robinson