我正在尝试在页面上创建第二个引导轮播。但是我发现问题。轮播本身在等待时确实会移动,但是轮播指示器(4个点)在轮播项目周围移动时不起作用。有人可以帮我吗?
<div class="testimonialblok">
<div id="carouselExampleIndicators" class="testimonialcarousel carousel slide" data-ride="testimonialCarousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-7"><img class="d-block testimonialfoto" src="#" alt="First slide"></div>
<div class="col-5 testimonialtextcarousel">
<h1 class="montserratblack textblue">Dummy text</h1>
<span class="testimonialundertext"><img class="testimonialiconundertext" src="#"> Dummy text</span>
<p class="testimonialtext opensanssemibold textblue">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporut labore.
</p>
<p class="testimonialtext opensanssemibold textgrey">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
</p>
<button type="button" class="btn btn-danger montserratregular textuppercase btnonzevoordelen">Dummy text</button>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-7"><img class="d-block testimonialfoto" src="#" alt="First slide"></div>
<div class="col-5 testimonialtextcarousel">
<h1 class="montserratblack textblue">Dummy text</h1>
<span class="testimonialundertext"><img class="testimonialiconundertext" src="#"> Dummy text</span>
<p class="testimonialtext opensanssemibold textblue">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporut labore.
</p>
<p class="testimonialtext opensanssemibold textgrey">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
</p>
<button type="button" class="btn btn-danger montserratregular textuppercase btnonzevoordelen">Dummy text</button>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-7"><img class="d-block testimonialfoto" src="#" alt="First slide"></div>
<div class="col-5 testimonialtextcarousel">
<h1 class="montserratblack textblue">Dummy text</h1>
<span class="testimonialundertext"><img class="testimonialiconundertext" src="#"> Dummy text</span>
<p class="testimonialtext opensanssemibold textblue">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporut labore.
</p>
<p class="testimonialtext opensanssemibold textgrey">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
</p>
<button type="button" class="btn btn-danger montserratregular textuppercase btnonzevoordelen">Dummy text</button>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-7"><img class="d-block testimonialfoto" src="#" alt="First slide"></div>
<div class="col-5 testimonialtextcarousel">
<h1 class="montserratblack textblue">Dummy text</h1>
<span class="testimonialundertext"><img class="testimonialiconundertext" src="#"> Dummy text</span>
<p class="testimonialtext opensanssemibold textblue">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporut labore.
</p>
<p class="testimonialtext opensanssemibold textgrey">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
</p>
<button type="button" class="btn btn-danger montserratregular textuppercase btnonzevoordelen">Dummy text</button>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-7"><img class="d-block testimonialfoto" src="#" alt="First slide"></div>
<div class="col-5 testimonialtextcarousel">
<h1 class="montserratblack textblue">Dummy text</h1>
<span class="testimonialundertext"><img class="testimonialiconundertext" src="#"> Dummy text</span>
<p class="testimonialtext opensanssemibold textblue">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporut labore.
</p>
<p class="testimonialtext opensanssemibold textgrey">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
</p>
<button type="button" class="btn btn-danger montserratregular textuppercase btnonzevoordelen">Dummy text</button>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-7"><img class="d-block testimonialfoto" src="#" alt="First slide"></div>
<div class="col-5 testimonialtextcarousel">
<h1 class="montserratblack textblue">Dummy text</h1>
<span class="testimonialundertext"><img class="testimonialiconundertext" src="#"> Dummy text</span>
<p class="testimonialtext opensanssemibold textblue">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporut labore.
</p>
<p class="testimonialtext opensanssemibold textgrey">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
</p>
<button type="button" class="btn btn-danger montserratregular textuppercase btnonzevoordelen">Dummy text</button>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-7"><img class="d-block testimonialfoto" src="#" alt="First slide"></div>
<div class="col-5 testimonialtextcarousel">
<h1 class="montserratblack textblue">Dummy text</h1>
<span class="testimonialundertext"><img class="testimonialiconundertext" src="#"> Dummy text</span>
<p class="testimonialtext opensanssemibold textblue">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporut labore.
</p>
<p class="testimonialtext opensanssemibold textgrey">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
</p>
<button type="button" class="btn btn-danger montserratregular textuppercase btnonzevoordelen">Dummy text</button>
</div>
</div>
</div>
</div>
</div>
<ol class="carousel-indicators testimonialindicators">
<li data-target="#testimonialIndicators" data-slide-to="0" class="active"></li>
<li data-target="#testimonialIndicators" data-slide-to="1"></li>
<li data-target="#testimonialIndicators" data-slide-to="2"></li>
<li data-target="#testimonialIndicators" data-slide-to="3"></li>
</ol>
<a class="carousel-control left" href="#testimonialIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control right" href="#testimonialIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
这是我的第二个滑块。我还有一个标题滑块,它包含引导滑块的所有标准值,我在那里没有进行任何更改,并且工作正常。我试图将其重置为blanc,但是当使用相同的类时,我的指标和内容将无法正常工作。
答案 0 :(得分:0)
值必须与轮播ID相同,在这种情况下,应为data-target =“#carouselExampleIndicators”