Le carrousel doit démarrer à partir de la diapositive centrale au chargement de la page

Question

J'ai utilisé Multi Carousel pour afficher les dates complètes des mois dans un curseur. Chaque date, certaines données doivent être masquées lors d'un clic. Lorsque je navigue vers Multi Carousel, la date cliquée correspond à la date d'aujourd'hui. La classe des moyens actifs pour les diapositives est la date du jour.

Mais en tant que curseur ont 30 jours. donc le curseur commence toujours à partir du jour 1. J'ai toujours besoin de le faire glisser à la date actuelle en cliquant sur la flèche suivante.

Comme aujourd'hui c'est sep-26. Si vous vérifiez la page suivante, vous trouvez un curseur de date qui est sur sep-1 maintenant. Donc, pour obtenir sep-26, vous devez glisser ensuite. http://prosport.guru/ps/game.php

Je veux que lorsque le curseur de chargement de la page doit se déplacer vers la date actuelle auto. J'ai ajouté la classe automatique à la diapositive de date actuelle mais cela n'a pas fonctionné.

Voici mon code pour Multi Carousel.

<?php 
    $page2 = $_SERVER["PHP_SELF"]; 
    $page2 = explode("/", $page2); 
    $page2 = $page2[count($page2) - 1]; 

    $id_sport2 = $_GET["id_sport"]; 

    $m = date("m"); 
    $day = date("d"); 
    $year = date("Y"); 
    $dates = array(); 
    $dates2 = array(); 
    $tmp = array(); 
    for ($i = 1; $i < 32; $i++) { 
     if ($i < 10) { 
      $ii = "0$i"; 
     } else { 
      $ii = $i; 
     } 
     $date = "$year-$m-$ii"; 
     //$date = date("Y-m-d", strtotime($date)); 
     if ($i % 3 != 0) { 
      array_push($tmp, $date); 

      if ($i == 60) { 
       if (count($tmp != 0)) { 
        array_push($dates2, $tmp); 
       } 
      } 
     } else { 
      array_push($tmp, $date); 
      array_push($dates2, $tmp); 
      $tmp = array(); 
     } 



     array_push($dates, $date); 
    } 

    ///print_r($dates2); 
    ?> 

    <div class="row" style="border:1px solid silver; background: #a0a0a0; color: white; "> 
     <div class="MultiCarousel" data-items="1,3,5,6" data-slide="3" id="MultiCarousel2" data-interval="1000" > 
      <div class="MultiCarousel-inner"> 


     <?php 
       $cpt = 0; 

       for ($i = 0; $i < count($dates2); $i++) { 

        $line = $dates2[$i]; 

        $today = date("Y-m-d"); 
        if (empty($_GET["date"])) { 
         $goto = $today; 
         if (in_array($today, $line)) { 
          $active = "active"; 
         } else { 
          $active = ""; 
         } 
        } else { 
         $dt = $_GET["date"]; 
         $goto = $dt; 
         if (in_array($dt, $line)) { 
          $active = "active"; 
         } else { 
          $active = ""; 
         } 
        } 

        for ($x = 0; $x < count($line); $x++) { 

         $el = $line[$x]; 
         if (!empty($_GET["date"])) { 
          $dt = $_GET["date"]; 
          if ($el == $dt) { 
           $color = "red"; 
          } else { 
           $color = "white"; 
          } 
         } else { 
          if ($el == $today) { 
           $color = "red"; 
          } else { 
           $color = "white"; 
          } 
         } 
         $href = "$page2?id_sport=$id_sport2&date=$el"; 
         if ($x == 0) { 
          //echo "<div class='col-lg-1 col-xs-1'>&nbsp;</div>"; 
          //echo "<div class='col-lg-10 col-xs-10'>"; 
         } 

         /* echo ' <div class="col-md-4 col-xs-4 col-lg-4 "> 
          <a href="'.$href.'" class="btn btn-default " style="width:90%; font-size:11px; background-color:black; border:1px solid white; color:'.$color.';">'.$el.'</a></div>'; 
         */ 
         if ($x == 2) { 
          //echo "</div>"; 
         } 
         ?> 
         <div class="item " style="text-align:center"> 
          <a href="<?php echo $href; ?>" > 
           <p class=" sportName mydate p-date" real="<?php echo $el; ?>" style="color:white; font-size: 12px; text-align: center;" > 
            <?php 
            $date = $el; 
            $month_name = ucfirst(strftime("%b", strtotime($date))); 
            $day_number = ucfirst(strftime("%d", strtotime($date))); 

            echo $month_name . ' ' . $day_number; 
            ?> 
           </p> 
          </a> 
         </div> 

         <?php 
        } 
       } 
       echo "<input type='hidden' value='$goto' id='cd'>"; 
       ?> 

      </div> 
      <button class="btn btn-primary btn-sm leftLst" style="border-radius: 0px; top: calc(64% - 20px);"><</button> 
      <button class="btn btn-primary btn-sm rightLst fw" style="border-radius: 0px; top: calc(64% - 20px);">></button> 
     </div></div> 

    <script> 
     $(document).ready(function() { 
      var cd = $("#cd").val(); 
      $(".mydate").each(function() { 
       var cd_tmp = $(this).attr("real"); 
       if (cd_tmp != cd) { 
        //alert(cd_tmp+" is different from "+cd); 
        //$(".fw").click(); 
       } else { 
        $(this).addClass("tag tag-danger active"); 
        //break; 
       } 
      }) 
     }) 
    </script> 

Answer 1

Ce script jquery le déplacera à la date actuelle au chargement de la page.

$(function() { 
    // Get month and day, ex. "Sep 21" 
    var monthAndDay = new Date().toLocaleString("en-us", { month: "short" }) + ' ' + new Date().getDate(); 
    // Locate the carousel item using month and day string 
    var $list = $('#MultiCarousel2 > div .item'); 
    var $carouselToday = $('#MultiCarousel2 > div .item a p:contains('+monthAndDay+')'); 
    var $parent = $carouselToday.closest('.item'); 
    var index = $list.index($parent); 
    var itemWidth = $list.eq(0).width(); 
    var position = (index * itemWidth) * -1; 
    $('#MultiCarousel2 > div').css({"transition": "0s", "transform": "translate("+ position +"px)"}); 
    $('#MultiCarousel2 > div').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function() { 
     $(this).css({"transition": "1s ease all"}) 
    }); 
});