web-dev-qa-db-fra.com

Carrousel lisse - Définir la première diapositive

J'ai un carrousel lisse sur mon site Web montrant le calendrier d'une équipe de basket-ball. Le curseur contient tous les jeux de la saison en cours classés par date.

Je veux que le curseur soit centré sur le prochain match. Comment définir une diapositive spécifique comme première diapositive, même si ce n'est pas la première sur le 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
          }
        }
    ]
});
javascriptjqueryhtmltwitter-bootstrapslick.js
7
Daniel

Vous pouvez utiliser initialSlide pour cela. Notez que la première diapositive a le numéro 0, donc si vous souhaitez que le curseur démarre à partir de la deuxième diapositive, vous devez définir initialSlide: 1.

Voici mon exemple minimal où le curseur commence à partir de la troisième diapositive.

19
edo

Si vous attribuez vos dates de jeux dans une variable PHP ou JavaScript, vous pouvez les comparer à la date actuelle et placer cette variable dans l'appel "initialSlide".

L'exemple ci-dessous est basé sur le jour de la semaine, mais le concept est toujours le même. J'ai un client qui a des spéciaux dans son bar 6 jours par semaine du lundi au samedi. Ainsi, avec le script ci-dessous, il fera du jour de la semaine "centre".

Vous pouvez également effectuer cette opération en faisant correspondre la date au lieu du jour de la semaine.

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

});

Voici un exemple utilisant 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