轮播需要从页面加载的中间幻灯片开始

Question

我使用Multi Carousel在滑块中显示完整的月份日期。每个日期某些数据都会在点击时隐藏。当我浏览到Multi Carousel时，点击日期是今天，s日期，意味着幻灯片的活动类是当前日期。

但是滑块有30天。所以滑块始终从第1天开始。我总是需要通过单击下一个箭头将其滑动到当前日期。

就像今天是sep-26。如果你检查下面的页面，你会在那里找到一个日期滑块，它位于sep-1上。所以要获得sep-26，你需要下一步滑动。 http://prosport.guru/ps/game.php

我希望页面加载滑块移动到当前日期自动时。我已将自动类添加到当前日期幻灯片，但它无效。

以下是我的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

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