作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
通过使用 bootstrap 4 轮播实用程序 ( https://getbootstrap.com/docs/4.0/components/carousel/ ),如何将带控件的轮播同步到没有任何控件的轮播?
1) 当点击控制箭头时,两个轮播将同时滑动。
2) 当其中一个轮播被悬停时,它们都将自动停止滑动。
3) 当2个轮播没有悬停时,它们会自动同时滑到一起。 (在每个设定的时间间隔之后)。
这是两个轮播的布局。它们都放置在一行内的等宽列中。右侧轮播(无控件)包含与左侧轮播上显示的图像相对应的描述性文本。
我尝试了一些 stackoverflow 解决方案,但没有成功。
<div class="col-6 p-5 text-center">
<div id="carouselExampleIndicators" class="carousel slide py-5 mb-4 carousel-sync" data-ride="carousel" >
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active mt-3 mx-2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1" class="mx-2 mt-3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2" class=" mx-2 mt-3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/img1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/img2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/img3.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev carousel-control" href="#carouselExampleIndicators" 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-next carousel-control" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-6 align-middle">
<div id="carouselExamplSlidesOnly" class="carousel slide carousel-sync" data-ride="carousel" >
<div class="carousel-inner">
<div class="carousel-item active carouseltext">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies, velit ut sollicitudin ultricies, diam ipsum interdum nisi, non imperdiet libero tellus id enim. Etiam venenatis vulputate massa, luctus fringilla tellus accumsan a. Donec varius gravida efficitur. In eu nibh dui. Vivamus maximus libero dui, id congue nisl viverra sed. Nam vitae bibendum lectus. Pellentesque sed ligula at metus facilisis cursus.
</div>
<div class="carousel-item carouseltext ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies, velit ut sollicitudin ultricies, diam ipsum interdum nisi, non imperdiet libero tellus id enim. Etiam venenatis vulputate massa, luctus fringilla tellus accumsan a. Donec varius gravida efficitur. In eu nibh dui. Vivamus maximus libero dui, id congue nisl viverra sed. Nam vitae bibendum lectus. Pellentesque sed ligula at metus facilisis cursus.
</div>
<div class="carousel-item carouseltext ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies, velit ut sollicitudin ultricies, diam ipsum interdum nisi, non imperdiet libero tellus id enim. Etiam venenatis vulputate massa, luctus fringilla tellus accumsan a. Donec varius gravida efficitur. In eu nibh dui. Vivamus maximus libero dui, id congue nisl viverra sed. Nam vitae bibendum lectus. Pellentesque sed ligula at metus facilisis cursus.
</div>
</div>
</div>
</div>
最佳答案
这不是一个非常直接的解决方案并且考虑到两个轮播有相同数量的幻灯片..你可以做的是:
希望对你有帮助
关于javascript - 如何将 Bootstrap 4 轮播与一组控件同步?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57865989/
我是一名优秀的程序员,十分优秀!