ページの中央のスライドからカルーセルを開始する必要があります

Question

マルチカルーセルを使用してスライダーに完全な月の日付を表示しています。各データはクリック時に非表示にする必要があります。私がマルチカルーセルを参照すると、クリックされた日付は今日の日付です。スライドのアクティブクラスは現在の日付です。

ただし、スライダは30日間あります。スライダーは常に1日目から始まります。私はいつも次の矢印をクリックして現在の日付にスライドさせる必要があります。

今日のようにsep-26です。次のページにチェックを入れると、そこに日付スライダーがあります。これは現在sep-1にあります。だからあなたは次のスライドをする必要があります。 http://prosport.guru/ps/game.php

ページロードスライダが現在の日付autoに移動する必要がある場合は、それを必要とします。私は現在の日付スライドに自動クラスを追加しましたが、うまくいきませんでした。

以下は、マルチカルーセルのコードです。

<?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

このjqueryスクリプトは、ページの現在の日付に移動します。

$(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"}) 
    }); 
});