javascript Splidejs Slider的 Flink 问题

eyh26e7m  于 2023-09-29  发布在  Java
关注(0)|答案(2)|浏览(145)

我正在使用SplideJS在一个网站,使滑块
这是网站:https://cjaddbdev.wpengine.com/
这是JS代码:

document.addEventListener( 'DOMContentLoaded', function () {

  if (document.getElementById('splide-legend')) { 
    new Splide( '#splide-legend', {
        type         : 'loop',
        perPage      : 1,
        autoplay     : true,
        interval     : 10000,        
    }).mount();
  }
  
});

这是HTML代码:

<div id="splide-legend" class="splide">
    <div class="splide__track">
        <ul class="splide__list">  
            
                        
            <li class="splide__slide container-legend no-repeat-bg we-care-about-you-and-getting-you-the-money-you-deserve" >
                
                    <div class="col-xs-12 col-sm-12 col-md-10 col-lg-8 col-xl-6 text-center d-flex flex-direction-column justify-content-center max-height-slider-div mx-auto">
                        <img width='1' height='1' class='img-fluid img-slide-icon mx-auto max-width-400' src='/wp-content/uploads/2021/06/ddb-spacer.png' alt='' >                        <h1 class="text-white text-shadow big-font line-height-15">We Care About You and Getting You the Money You Deserve</h1>
                        <h5 class="text-white font-300 text-shadow line-height-15">We've even won our clients up to 50x the insurance company’s original offer. That's the Dudley DeBosier Difference. </h5>

                                                    <div class='col-12 mx-auto d-flex justify-content-center'>
                                <a href='#get_help' class="btn btn-primary bg-orange text-white mt-2">Get a Free Consultation</a>
                            </div>
                                            </div>
                
            </li>            
                                  
                        
            <li class="splide__slide container-legend no-repeat-bg injured-motorcyclists-can-count-on-dudley-debosier" >
                
                    <div class="col-xs-12 col-sm-12 col-md-10 col-lg-8 col-xl-6 text-center d-flex flex-direction-column justify-content-center max-height-slider-div mx-auto">
                        <img width='1' height='1' class='img-fluid img-slide-icon mx-auto max-width-400' src='/wp-content/uploads/2020/06/footer-occ-logo.svg' alt='OCC Orange County Choppers Logo' >                        <h1 class="text-white text-shadow big-font line-height-15">Injured Motorcyclists Can Count on Dudley DeBosier</h1>
                        <h5 class="text-white font-300 text-shadow line-height-15">Paul Teutul Sr. of American Chopper says we’re the firm to call after a motorcycle accident in Louisiana. Find out how we can help you!</h5>

                                                    <div class='col-12 mx-auto d-flex justify-content-center'>
                                <a href='http://localhost:10188/cases-we-handle/motorcycle-accident/' class="btn btn-primary bg-orange text-white mt-2">More About Motorcycle Accidents</a>
                            </div>
                                            </div>
                
            </li>            
                                  
                        
            <li class="splide__slide container-legend no-repeat-bg helping-louisiana-auto-accident-victims" >
                
                    <div class="col-xs-12 col-sm-12 col-md-10 col-lg-8 col-xl-6 text-center d-flex flex-direction-column justify-content-center max-height-slider-div mx-auto">
                        <img width='1' height='1' class='img-fluid img-slide-icon mx-auto max-width-400' src='/wp-content/uploads/2019/07/DDB-difference-white-01-1.png' alt='' >                        <h1 class="text-white text-shadow big-font line-height-15">Helping Louisiana Auto Accident Victims</h1>
                        <h5 class="text-white font-300 text-shadow line-height-15">Dudley DeBosier’s goal is to fight for the compensation auto accident victims are entitled to by law! If you’ve been injured by a negligent driver, put us on the case. </h5>

                                                    <div class='col-12 mx-auto d-flex justify-content-center'>
                                <a href='http://localhost:10188/cases-we-handle/auto-accident/' class="btn btn-primary bg-orange text-white mt-2">More About Auto Accidents</a>
                            </div>
                                            </div>
                
            </li>            
                              </ul>
    </div>
    <style>
    
            .we-care-about-you-and-getting-you-the-money-you-deserve { 
                background: url(/wp-content/uploads/2021/06/desktop-slider-homepage-1-update.png);
                background-repeat: no-repeat !important;
                background-size: cover !important;
                background-position: center center !important;
            }
            @media only screen and (min-width:768px) and (max-width:1200px) {
                .we-care-about-you-and-getting-you-the-money-you-deserve {
                    background: url(/wp-content/uploads/2021/06/MicrosoftTeams-image-13.png);
                    background-repeat: no-repeat !important;
                    background-size: cover !important;
                    background-position: 50% 50% !important;
                }
            }            
            @media only screen and (max-width: 768px) {
                .we-care-about-you-and-getting-you-the-money-you-deserve {
                    background: url(/wp-content/uploads/2021/06/MicrosoftTeams-image-2.png) !important;
                    background-repeat: no-repeat !important;
                    background-size: cover !important;
                    background-position: center center !important;
                }
            }
            
            .injured-motorcyclists-can-count-on-dudley-debosier { 
                background: url(/wp-content/uploads/2021/06/MicrosoftTeams-image-11.png);
                background-repeat: no-repeat !important;
                background-size: cover !important;
                background-position: center center !important;
            }
            @media only screen and (min-width:768px) and (max-width:1200px) {
                .injured-motorcyclists-can-count-on-dudley-debosier {
                    background: url(/wp-content/uploads/2021/04/MicrosoftTeams-image-11.png);
                    background-repeat: no-repeat !important;
                    background-size: cover !important;
                    background-position: 50% 50% !important;
                }
            }            
            @media only screen and (max-width: 768px) {
                .injured-motorcyclists-can-count-on-dudley-debosier {
                    background: url(/wp-content/uploads/2021/06/MicrosoftTeams-image-4.png) !important;
                    background-repeat: no-repeat !important;
                    background-size: cover !important;
                    background-position: center center !important;
                }
            }
            
            .helping-louisiana-auto-accident-victims { 
                background: url(/wp-content/uploads/2020/07/Auto-Accident-Banner-copy.jpg);
                background-repeat: no-repeat !important;
                background-size: cover !important;
                background-position: center center !important;
            }
            @media only screen and (min-width:768px) and (max-width:1200px) {
                .helping-louisiana-auto-accident-victims {
                    background: url(/wp-content/uploads/2020/07/Auto-Accident-Banner-copy.jpg);
                    background-repeat: no-repeat !important;
                    background-size: cover !important;
                    background-position: 50% 50% !important;
                }
            }            
            @media only screen and (max-width: 768px) {
                .helping-louisiana-auto-accident-victims {
                    background: url(/wp-content/uploads/2020/07/Auto-Accident-Banner-Mobile-copy.jpg) !important;
                    background-repeat: no-repeat !important;
                    background-size: cover !important;
                    background-position: center center !important;
                }
            }
                </style>
    <div class="arrow-down text-center">
        <a href="#get_help">
            <i class="far fa-arrow-alt-circle-down fa-3x"></i>
        </a>
    </div>
</div>

您必须等到最后一张幻灯片才能看到正在发生的问题。
问题是,当循环结束时,我看到一个奇怪的 Flink ,我撞到墙上不知道如何修复它,任何帮助将不胜感激

wpcxdonn

wpcxdonn1#

我找这个问题找了一个小时了。好像找到了。
Codepen:https://codepen.io/ykdsoft/pen/mdmyEpB
这个问题似乎是由你的css文件中的.splide__pagination { display:none }代码引起的。
我做了一些代码测试。当我取消display:none时,问题就消失了。
修复:你可以在css中使用visibility:hidden而不是display:none

**更新:**我在js中尝试了pagination:false选项,但问题仍然存在。你可以用css中的visibility:hidden来修复它。

6ie5vjzr

6ie5vjzr2#

我带来了解决方案
添加这个CSS:

.splide--fade .splide__slide:first-of-type ,
.splide--fade .is-prev {
    opacity: 1!important; 
}

来源:https://codepen.io/herrstrietzel/pen/ZEJeMgb

相关问题