javascript - 我在一页上有 2 个图像滑块，使用相同的代码，但只有 1 个有效
问题描述
我在同一页面上使用 2 个图像滑块，两者相同，但每个都包含不同的图像集。我遇到的问题是只有一个滑块工作，而另一个不移动。我不知道为什么，因为它是相同的 HTML、CSS 和 JS，只是在不同的类名和变量名下。
<video src="./pics/acecs2.mp4" muted loop autoplay controls></video>
</section>
<div class="bowl-container">
<div class="slider-wrap">
<div class="slider">
<div class="slider-item">
<div class="img-div"></div>
</div>
<div class="slider-item">
<div class="img-div"></div>
</div>
<div class="slider-item">
<div class="img-div"></div>
</div>
<div class="slider-item">
<div class="img-div"></div>
</div>
<div class="slider-item">
<div class="img-div"></div>
</div>
</div>
</div>
</div>
<section class="showcase2">
<video src="./pics/ace3.mp4" muted loop autoplay controls></video>
</section>
<div class="bowl-container2">
<div class="slider-wrap2">
<div class="slider2">
<div class="slider-item2">
<div class="img-div2"></div>
</div>
<div class="slider-item2">
<div class="img-div2"></div>
</div>
<div class="slider-item2">
<div class="img-div2"></div>
</div>
<div class="slider-item2">
<div class="img-div2"></div>
</div>
<div class="slider-item2">
<div class="img-div2"></div>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
<script src="app2.js"></script>
let sliderWrap = document.querySelector('.slider-wrap');
let slider = document.querySelector('.slider');
let clonesWidth;
let sliderWidth;
let clones = [];
let scrollPos = 1
let sliderHover = false;
let req;1
let items = [...document.querySelectorAll('.slider-item')];
let images = [...document.querySelectorAll('.img-div')];
images.forEach((image, idx) => {
image.style.backgroundImage = `url(./pics2/${idx+1}.jpg)`
})
items.forEach(item => {
let clone = item.cloneNode(true);
clone.classList.add('clone');
slider.appendChild(clone);
clones.push(clone);
})
sliderWrap.addEventListener('mouseover', () =>{
sliderHover = true;
})
sliderWrap.addEventListener('mouseleave', () =>{
sliderHover = false;
})
function getClonesWidth(){
let width = 0;
clones.forEach(clone => {
width += clone.offsetWidth;
})
return width;
}
function scrollUpdate(){
if(window.innerWidth > 760){
sliderWrap.style.overflow = 'hidden';
if(!sliderHover){
scrollPos -= .4
}
if(clonesWidth + scrollPos >= sliderWidth){
scrollPos = 1;
}else if(scrollPos <= 0){
scrollPos = sliderWidth - clonesWidth - 1
}
slider.style.transform = `translateX(${-scrollPos}px)`
req = requestAnimationFrame(scrollUpdate)
}else{
sliderWrap.style.overflow = 'scroll';
}
}
function onLoad(){
calaculateDimensions()
scrollPos = 1;
scrollUpdate();
}
function calaculateDimensions(){
sliderWidth = slider.getBoundingClientRect().width;
clonesWidth = getClonesWidth();
}
onLoad();
2nd JS page
let sliderWrap2 = document.querySelector('.slider-wrap2');
let slider2 = document.querySelector('.slider2');
let clonesWidth2;
let sliderWidth2;
let clones2 = [];
let scrollPos2 =1
let sliderHover2 = false;
let req2; // request animation frame reference
let items2 = [...document.querySelectorAll('.slider-item2')];
let images2 = [...document.querySelectorAll('.img-div2')];
images2.forEach((image, idx) => {
image.style.backgroundImage = `url(./pics3/${idx+1}.jpg)`
})
items2.forEach(item => {
let clone = item.cloneNode(true);
clone.classList.add('clone');
slider2.appendChild(clone);
clones2.push(clone);
})
sliderWrap2.addEventListener('mouseover', () =>{
sliderHover2 = true;
})
sliderWrap2.addEventListener('mouseleave', () =>{
sliderHover2 = false;
})
function getClonesWidth(){
let width = 0;
clones2.forEach(clone => {
width += clone.offsetWidth;
})
return width;
}
function scrollUpdate(){
if(window.innerWidth > 760){
sliderWrap2.style.overflow = 'hidden';
if(!sliderHover2){
scrollPos2 -= .15
}
if(clonesWidth2 + scrollPos2 >= sliderWidth2){
scrollPos2 = 1;
}else if(scrollPos2 <= 0){
scrollPos2 = sliderWidth2 - clonesWidth2 - 1
}
slider2.style.transform = `translateX(${-scrollPos2}px)`
req2 = requestAnimationFrame(scrollUpdate)
}else{
sliderWrap2.style.overflow = 'scroll';
}
}
function onLoad(){
calaculateDimensions()
scrollPos2 = 1;
scrollUpdate();
}
function calaculateDimensions(){
sliderWidth2 = slider2.getBoundingClientRect().width;
clonesWidth2 = getClonesWidth();
}
onLoad()
解决方案
您可以使用带有多个脚本的引导程序来运行幻灯片或轮播，这就是您必须这样做的方式。
/* 1 carousel */
$('#carousel-1').carousel({
interval: 4000,
wrap: true,
keyboard: true
});
/* 2 carousel */
$('#carousel-2').carousel({
interval: 6000,
wrap: true,
keyboard: true
});.carousel img {
width: 100%;
}<section class="bg-info text-light text-center py-5 mb-5">
<div class="container">
<div class="row">
<div class="col">
<h1>Bootstrap 4 - two and more carousel in one page</h1>
</div><!-- e col -->
</div><!-- e row -->
</div><!-- e container -->
</section><!-- e section -->
<!-- ################### carousel 1 -->
<section class="mb-5">
<div id="carousel-1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2"></li>
<li data-target="#carousel-1" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://picsum.photos/1600/400/?image=666" alt="slide">
<div class="carousel-caption d-none d-md-block">
<h3>1 Lorem ipsum dolor</h3>
<p>two and more carousel in one page example...</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://picsum.photos/1600/400/?image=676" alt="Slide">
<div class="carousel-caption d-none d-md-block">
<h3>2 Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing...</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://picsum.photos/1600/400/?image=686" alt="Slide">
<div class="carousel-caption d-none d-md-block">
<h3>3 Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing...</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://picsum.photos/1600/400/?image=696" alt="Slide">
<div class="carousel-caption d-none d-md-block">
<h3>4 Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing...</p>
</div>
</div>
</div><!-- e carousel-inner -->
<a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">prev</span>
</a>
<a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">next</span>
</a>
</div><!-- e carousel -->
</section><!-- e section -->
<section class="bg-info text-light text-center py-5 mb-5">
<div class="container">
<div class="row">
<div class="col">
<h2>Carousel 2</h2>
</div><!-- e col -->
</div><!-- e row -->
</div><!-- e container -->
</section><!-- e section -->
<!-- ################### carousel 2 -->
<section class="mb-5">
<div id="carousel-2" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-2" data-slide-to="1"></li>
<li data-target="#carousel-2" data-slide-to="2"></li>
<li data-target="#carousel-2" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://picsum.photos/1600/400/?image=515" alt="Slide">
<div class="carousel-caption d-none d-md-block">
<h3>1 Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing...</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://picsum.photos/1600/400/?image=545" alt="Slide">
<div class="carousel-caption d-none d-md-block">
<h3>2 Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing...</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://picsum.photos/1600/400/?image=535" alt="Slide">
<div class="carousel-caption d-none d-md-block">
<h3>3 Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing...</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://picsum.photos/1600/400/?image=525" alt="Slide">
<div class="carousel-caption d-none d-md-block">
<h3>4 Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing...</p>
</div>
</div>
</div><!-- e carousel-inner -->
<a class="carousel-control-prev" href="#carousel-2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">prev</span>
</a>
<a class="carousel-control-next" href="#carousel-2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">next</span>
</a>
</div><!-- e carousel -->
</section><!-- e section -->
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>推荐阅读
- hangfire - 一次性使用hangfire
- c# - C# 将两个字符串列表与一个模式相交
- python-3.x - 如何在 Python 中匹配日期和时间
- android - 使用 jitpack 构建的库中的错误：无法解析 ':app@debug/compileClasspath' 的依赖关系
- xcode - 如何在 appStore 连接中更新我的应用信息？
- java - resultset.next() 仅显示第一行的输出
- azure - Azure WebJob 索引正在进行中
- pywinauto - 是否可以查看帮助文本等菜单项属性？
- php - PHP不适用于https，而是下载文件
- function - 经过三天的试验和搜索，我仍然无法让 .getValue 函数工作