Slick Carousel - 最初のスライドを設定する

Question

私はバスケットボールチームのスケジュールを示す私のウェブサイトに滑らかなカルーセルを持っています。スライダには、現在の季節のすべてのゲームが日付順に表示されます。

スライダーを次のゲームの中央に配置します。特定のスライドを最初のスライドとして設定するにはどうすればいいですか？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 
      } 
     } 
    ] 
}); 

Answer 1

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

私のminimal exampleは、3番目のスライドからスライダーが始まる場所です。

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

});