gpt4 book ai didi

javascript - 如何将 Bootstrap 4 轮播与一组控件同步?

转载 作者:行者123 更新时间:2023-11-27 23:24:14 25 4
gpt4 key购买 nike

通过使用 bootstrap 4 轮播实用程序 ( https://getbootstrap.com/docs/4.0/components/carousel/ ),如何将带控件的轮播同步到没有任何控件的轮播?

1) 当点击控制箭头时,两个轮播将同时滑动。

2) 当其中一个轮播被悬停时,它们都将自动停止滑动。

3) 当2个轮播没有悬停时,它们会自动同时滑到一起。 (在每个设定的时间间隔之后)。

这是两个轮播的布局。它们都放置在一行内的等宽列中。右侧轮播(无控件)包含与左侧轮播上显示的图像相对应的描述性文本。

Layout

我尝试了一些 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>

最佳答案

这不是一个非常直接的解决方案并且考虑到两个轮播有相同数量的幻灯片..你可以做的是:

  1. 创建一个轮播
  2. 每个轮播元素都将是您图片中显示的完整布局
  3. 您可以通过覆盖默认 CSS 来重新定位箭头。

希望对你有帮助

关于javascript - 如何将 Bootstrap 4 轮播与一组控件同步?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57865989/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com