Splidejs 滑块的闪烁问题
Flashing Issue with Splidejs Slider
我正在站点中使用 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>
您必须等到最后一张幻灯片才能看到发生的问题。
问题是当循环结束时我看到一个奇怪的闪烁，我撞到墙上不知道如何修复它，任何帮助将不胜感激
我一直在寻找问题 1 小时。我想我找到了。
代码笔：https://codepen.io/ykdsoft/pen/mdmyEpB
问题似乎是由 css 文件中的 .splide__pagination { display:none } 代码引起的。
我做了一些代码试验。当我取消 display:none 时，问题就消失了。
修复：
您可以在 css
中使用 visibility:hidden 而不是 display:none
更新： 我已经在 js 中尝试了 pagination:false 选项，但问题仍然存在。您可以在 css.
中使用 visibility:hidden 修复它
我正在站点中使用 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>
您必须等到最后一张幻灯片才能看到发生的问题。
问题是当循环结束时我看到一个奇怪的闪烁，我撞到墙上不知道如何修复它，任何帮助将不胜感激
我一直在寻找问题 1 小时。我想我找到了。
代码笔：https://codepen.io/ykdsoft/pen/mdmyEpB
问题似乎是由 css 文件中的 .splide__pagination { display:none } 代码引起的。
我做了一些代码试验。当我取消 display:none 时，问题就消失了。
修复： 您可以在 css
中使用visibility:hidden 而不是 display:none
更新： 我已经在 js 中尝试了 pagination:false 选项，但问题仍然存在。您可以在 css.
visibility:hidden 修复它