我正在使用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 ,我撞到墙上不知道如何修复它,任何帮助将不胜感激
2条答案
按热度按时间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
来修复它。6ie5vjzr2#
我带来了解决方案
添加这个CSS:
来源:https://codepen.io/herrstrietzel/pen/ZEJeMgb