单击“滑动”按钮时，“滑动点激活”和“滑动滑动器激活”不匹配（下一个/上一个）

时间：2019-12-06 06:10:41

标签： javascript php html slick slick.js

此滑块的概念是使滑块居中，并使自定义滑点居中。

我尝试为自定义的光滑点应用克隆，以便使它的中心与滑块的中心模式相同。

现在的问题是，单击时按钮的行为，活动的滑点和活动的滑块不相同或相等。 enter image description here

加载后的输出。

当尝试单击按钮时。 enter image description here

html / php 

    <section id="gallery" class="center slider" style="max-width: 100%; max-height: 100% !important; height: 165px; background: transparent; background-repeat: no-repeat; background-size: 100%; position: relative; top: -545px; z-index: 1;">
<?php
            $timelin = wp_get_recent_posts(array(
                    'post_status' => 'publish', // Show only the published posts
                    'orderby' => 'date',
                    'order' => 'ASC',
                    'posts_per_page' => 15,
                    'post_type' => 'history-timeline',
            ));
            $i = 0;

            foreach($timelin as $time)
            {   
                $year = get_the_title($time['ID']);
                echo '<div class="container" title="'.str_replace("年","",$year).'" style ="padding-right: 5px !important; border-radius: 25px !important;
                padding-left: 5px !important;">';
                echo '  <div class="row-fluid">';
                echo '     <div class="col-lg-12 col-sm-12">';  
                echo '        <div class="card-body" style=" border-radius: 25px !important;">';
                echo '          <div class="col-md-8 col-sm-7 card-title">';
                echo '              <h4 style="font-weight:bold">'.get_the_title($time['ID']).'</h4>';  
                echo '          </div>';
                echo '              <div class="">';
                echo '                  <p class="card-text carousel-text'.$i.'">'.get_post($time['ID'])->post_content.'</p>';
                echo '                  <img class="card-img-right float-right img-responsive carousel-image'.$i.'" src="'.get_the_post_thumbnail_url($time['ID']).'">';
                echo '              </div>';
                echo '         </div>';
                echo '      </div>';
                echo '   </div>';
                echo '</div>';
                $i++;
            }

        ?>



        </section>

Javascript/jquery
     window.onresize = resize;
            var vpWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
            console.log("Initial value is: " + vpWidth);

            function resize() {

                var height= Math.max(document.documentElement.clientHeight, window.innerHeight || 0)

                var oldWidth = vpWidth;
                vpWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);


                console.log("Old Width is " + oldWidth);
                console.log("New Width is " + vpWidth);
                if( (oldWidth < 1200 && vpWidth > 1200) || (oldWidth > 1200 && vpWidth < 1200) ){
                    console.log("The user crossed the 1200 mark!");

                    setTimeout(function(){ 
                        deferredScript(); 
                        centerActive();
                    }, 500);

                }



                console.log("Viewport size is " + vpWidth + "x" + height);
            }


     function deferredScript() {
                alert($('li.slick-active').attr('id'));
                var slickDots = document.querySelectorAll("ul.slick-dots li");
                var i;
                for (i = 0; i < slickDots.length; i++) {
                    slickDots[i].setAttribute("onclick", "centerActive()");
                }

                document.getElementsByClassName("slick-next")[0].setAttribute("onclick", "centerActive()");
                document.getElementsByClassName("slick-prev")[0].setAttribute("onclick", "centerActive()");

                //document.getElementById("slick-slide00").style.marginLeft = "calc(48vw + -70px)";
                console.log("deferred script ran!");enter code here

                var gallery = $('#gallery ul.slick-dots'), /* Getting specific element*/
                items   = gallery.find('li'), /* Getting child element*/
                len     = items.length,/* ????? */
                current = 0,  /* the current item we're looking */

                first   = items.filter(':first-child'),
                second  = items.filter((index)=>index==1),
                third   = items.filter((index)=>index==2),
                last    = items.filter(':last-child'),
                secondlast = items.filter((index)=>index==items.length-2),

                triggers = $('button');

                console.log("second 0 " + second);

                /* 1. Cloning first and last item */
                first.before(secondlast.clone(true)); 
                first.before(last.clone(true)); 
                last.after(second.clone(true)); 
                last.after(first.clone(true)); 

                /* 2. Set button handlers */
                triggers.on('click', function() {

                if (gallery.is(':not(:animated)')) {

                    var cycle = false,
                        delta = ($( "button" ).hasClass( ".slick-prev" ))? -1 : 1;
                        /* in the example buttons have id "prev" or "next" */  

                    gallery.animate({ left: "+=" + (-100 * delta) }, function() {

                        current += delta;

                        /** 
                            * we're cycling the slider when the the value of "current" 
                            * variable (after increment/decrement) is 0 or when it exceeds
                            * the initial gallery length
                            */          
                        cycle = !!(current === 0 || current > len);

                        if (cycle) {
                            /* we switched from image 1 to 4-cloned or 
                                from image 4 to 1-cloned */
                            current = (current === 0)? len : 1; 
                            gallery.css({left:  -100 * (current + 1) });
                        }
                    });   
                    }

                });
                var myuls = $("#gallery").find("ul");
        for(var i=0;i<myuls.length;i++){
            $(myuls[i]).wrap("<div id='wow'></div>");}



            }




             function centerActive() {

                alert($('li.slick-active').attr('id'));
                var slickOrder = parseInt(document.getElementsByClassName("slick-active")[0].getAttribute("data-slick-index")) + 1;

                console.log("Viewport Width: " + vpWidth);

                if(window.innerWidth < 1176)
                    { slickOrder--; }

                //var newPadding = 45.5 - (slickOrder * 11.5);

                var newPadding = 48 - (slickOrder * 12);;
                if(window.innerWidth == 995){
                    newPadding = 48 - (slickOrder * 12);
                }

                if(typeof vpWidth == "undefined")
                {
                    vpWidth = window.innerWidth;
                } 

                var vwFactor = (vpWidth / 1366);
                var correctivePadding = (vpWidth - 1011) * 0.0135;

                if (vpWidth <= 1011){
                    correctivePadding = 0;
            }

                var responsivePadding = slickOrder *(((vwFactor - 1) * 145) + correctivePadding);
                //console.log("Corrective Padding: " + correctivePadding);

                console.log("Inner Width: " + window.innerWidth)

                console.log("VW Factor: " + (vwFactor - 1.045));
                console.log("Slick Order: " + slickOrder);
                console.log("View Width Factor: " + vwFactor);
                //document.getElementById("slick-slide00").style.marginLeft = "calc(" + newPadding + "vw + " + responsivePadding + "px - 70px)";
                console.log(newPadding + "vw");
                console.log("center active script ran!");
}



slick

         <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script type="text/javascript"src="<?php echo get_stylesheet_directory_uri(); ?>/slick/slick.js"  
         charset="utf-8"></script>

        <script type="text/javascript">
            $(document).on('ready', function() {
                $(".center").slick({
                    dots: true,
                    customPaging: function(slider, i) {
                        return '<div> <a class="dots">'+ $(slider.$slides[i]).attr('title') +'</a><img class="dot" src="//drx1czj26dxbr.cloudfront.net/files/circle.png"></div>';
                    },
                    infinite: true,
                    arrows:true,
                    prevArrow:'<button type="button" id="slick-prev" class="slick-prev"></button>',
                    nextArrow:'<button type="button" id="slick-next" class="slick-next"></button>',
                    centerMode: true,
                    slidesToShow: 1.65,
                    slidesToScroll: 15,
                    mobileFirst: true,
                    responsive: [
                        {
                            breakpoint: 1200, // or whatever breakpoint you want to render below
                            settings:
                                {
                                slidesToShow: 1.95
                            }
                        },
                        {
                            breakpoint: 991, // or whatever breakpoint you want to render below
                            settings:
                                {
                                slidesToShow: 1.65
                            }
                        },
                        {
                            breakpoint: 575, // or whatever breakpoint you want to render below
                            settings:
                                {
                                slidesToShow: 1
                            }
                        }
                    ]

                });
            });

与概念相同的光滑点的无限循环， Infinity Loop Slider Concepts

尝试一些测试，加载时 enter image description here

当单击下一步按钮时 enter image description here

0 个答案:

没有答案
相关问题
最新问题