Bootstrap 5 双轮播定位
Posted
技术标签:
【中文标题】Bootstrap 5 双轮播定位【英文标题】：Bootstrap 5 double carousel targeting 【发布时间】：2021-10-06 11:02:45 【问题描述】：我有一个组合轮播，大部分时间都在工作。基本上，我将其用作时间线滑块。我有 14 个日期要显示。除了缩略图/指示器，我还使用日期。但是因为有这么多日期，我需要它们显示在单独的行中，但一次只有活动行。我希望我的代码能清楚地说明我想要实现的目标。我曾经有一个在 BS 3 中工作的版本，但那个页面似乎已经死了，所以我看不到我做了什么。我只记得我基本上做了这里显示的内容。当您单击下一页缩略图的箭头时，由于某种原因，以前的缩略图会滑入新缩略图的后面。此外，我似乎无法弄清楚如何将“显示”添加到当前在第一个轮播中定位的缩略图。我知道是关闭的，可能在数学上。我从某个地方拉出来的 - 不记得在哪里。
// normalize history carousel height //
var maxHeight = 0;
$("#historyCarousel .carousel-item .date-text").each(function()
if ($(this).height() > maxHeight)
maxHeight = $(this).height();
);
$("#historyCarousel .carousel-item").height(maxHeight);
//end normalize tab content area height //
// history carousel thumbnail/date control //
$('#historyCarousel').on('slid.bs.carousel', function (e)
var active =$(this).find('.active').index();
var to = $(e.relatedTarget).index();
$('#thumbcarousel').find('.showing').removeClass('showing');
$('#thumbcarousel').find('[data-slide-to='+active+']').addClass('showing');
);
$('#historyCarousel').on('slid.bs.carousel', function (e)
var active =$(this).find('.active').index();
var to = $(e.relatedTarget).index();
if(active == 6 && to == 7)
$('#thumbcarousel').carousel('next');
if(active == 8 && to == 0)
$('#thumbcarousel').carousel('next');
);
// end history carousel thumbnail/date control/* History Carousel */
#historyCarousel h2
font-weight: 900;
font-size: 3rem;
#historyCarousel .carousel-item .background
height: 500px;
#historyCarousel .carousel-item .trans-top
background-color: rgba(50, 88, 125, .7);
background-blend-mode: multiply;
height: 2rem;
top: 0;
left: 0;
#historyCarousel .carousel-item .background
background-size: cover;
background-position: center center;
#historyCarousel .carousel-item h5
font-weight: 600;
font-size: 3rem;
#thumbCarousel
margin: -17px 0 0;
padding: 0 45px;
#thumbCarousel .carousel-item .date
width: calc(100% / 8);
display: inline-block;
#thumbCarousel .carousel-item .date .circle-indicator
background-color: #fff;
width: 35px;
height: 35px;
border-radius: 100%;
background-color: #fff;
#thumbCarousel .carousel-item .date .circle-indicator .circle-interior
width: 100%;
height: 100%;
opacity: .7;
background-size: cover;
background-position: center center;
border-radius: 100%;
#thumbCarousel .carousel-item .date.active .circle-indicator
border-style: solid;
border-width: 3px;
border-color: #32587d;
width: 50px;
height: 50px;
#thumbCarousel .date:hover
border-color: rgba(255, 255, 255, .5);
cursor: hand;
#thumbCarousel .carousel-control-prev,
#thumbCarousel .carousel-control-next
color: #0284b8;
text-align: center;
text-shadow: none;
font-size: 20px;
width: 30px;
height: 30px;
line-height: 20px;
top: 30%;
padding: 1%;
#thumbCarousel .carousel-control-prev:hover,
#thumbCarousel .carousel-control-prev:focus,
#thumbCarousel .carousel-control-prev:active,
#thumbCarousel .carousel-control-next:hover,
#thumbCarousel .carousel-control-next:focus,
#thumbCarousel .carousel-control-next:active
color: #333;
#thumbCarousel .carousel-control-prev .fa,
#thumbCarousel .carousel-control-next .fa
font: normal normal normal 30px/26px FontAwesome;
#thumbCarousel .carousel-control-prev
background-color: rgba(0, 0, 0, 0);
bottom: auto;
font-size: 20px;
left: 0;
position: absolute;
top: 30%;
width: 30px;
#thumbCarousel .carousel-control-prev
background-color: rgba(0, 0, 0, 0);
background-image: none;
z-index: 99999;
#thumbCarousel .showing
font-weight: bold;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div id="historyCarousel" class="container-fluid carousel slide m-0 p-0">
<div class="carousel-inner">
<div class="carousel-item active orange-bkg">
<div class="row jusify-content-center">
<div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?hippy,flowers');"></div>
<div class="col-12 col-md-5 align-self-center">
<div class="date-text m-5 p-3">
<h5 class="text-white pt-5 w-100">1979</h5>
<p class="pb-5 text-white">text here</p>
</div>
</div>
</div>
</div>
<div class="carousel-item orange-bkg">
<div class="row jusify-content-center">
<div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
<div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?grunge,music');"></div>
<div class="col-12 col-md-5 align-self-center">
<div class="date-text m-5 p-3">
<h5 class="text-white pt-5 w-100">1993</h5>
<p class="pb-5 text-white">more text here</p>
</div>
</div>
</div>
</div>
<div class="carousel-item orange-bkg">
<div class="row jusify-content-center">
<div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
<div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?friends,eating');"></div>
<div class="col-12 col-md-5 align-self-center">
<div class="date-text m-5 p-3">
<h5 class="text-white pt-5 w-100">1995</h5>
<p class="pb-5 text-white">text here</p>
</div>
</div>
</div>
</div>
<div class="carousel-item orange-bkg">
<div class="row jusify-content-center">
<div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
<div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?y2k,celebrate');"></div>
<div class="col-12 col-md-5 align-self-center">
<div class="date-text m-5 p-3">
<h5 class="text-white pt-5 w-100">2001</h5>
<p class="pb-5 text-white">Some more text here</p>
</div>
</div>
</div>
</div>
<div class="carousel-item orange-bkg">
<div class="row jusify-content-center">
<div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
<div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?babies,cute');"></div>
<div class="col-12 col-md-5 align-self-center">
<div class="date-text m-5 p-3">
<h5 class="text-white pt-5 w-100">2005</h5>
<p class="pb-5 text-white">Text text text</p>
</div>
</div>
</div>
</div>
<div class="carousel-item orange-bkg">
<div class="row jusify-content-center">
<div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
<div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?rainbow,dogs');"></div>
<div class="col-12 col-md-5 align-self-center">
<div class="date-text m-5 p-3">
<h5 class="text-white pt-5 w-100">2007</h5>
<p class="pb-5 text-white">Text-o-rama</p>
</div>
</div>
</div>
</div>
<div class="carousel-item orange-bkg">
<div class="row jusify-content-center">
<div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
<div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?bicycle,cats');"></div>
<div class="col-12 col-md-5 align-self-center">
<div class="date-text m-5 p-3">
<h5 class="text-white pt-5 w-100">2008</h5>
<p class="pb-5 text-white">Text goes here</p>
</div>
</div>
</div>
</div>
<div class="carousel-item orange-bkg">
<div class="row jusify-content-center">
<div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
<div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?computers,bunnies');"></div>
<div class="col-12 col-md-5 align-self-center">
<div class="date-text m-5 p-3">
<h5 class="text-white pt-5 w-100">2010</h5>
<p class="pb-5 text-white">Text TEXT</p>
</div>
</div>
</div>
</div>
<div class="carousel-item orange-bkg">
<div class="row jusify-content-center">
<div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
<div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?teal,birds');"></div>
<div class="col-12 col-md-5 align-self-center">
<div class="date-text m-5 p-3">
<h5 class="text-white pt-5 w-100">2011</h5>
<p class="pb-5 text-white">It's more text</p>
</div>
</div>
</div>
</div>
<div class="carousel-item orange-bkg">
<div class="row jusify-content-center">
<div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
<div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?portrait,ocean');"></div>
<div class="col-12 col-md-5 align-self-center">
<div class="date-text m-5 p-3">
<h5 class="text-white pt-5 w-100">2014</h5>
<p class="pb-5 text-white">ACK MORE TEXT</p>
</div>
</div>
</div>
</div>
<div class="carousel-item orange-bkg">
<div class="row jusify-content-center">
<div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
<div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?flying,butterfly');"></div>
<div class="col-12 col-md-5 align-self-center">
<div class="date-text m-5 p-3">
<h5 class="text-white pt-5 w-100">2017</h5>
<p class="pb-5 text-white">Too many slides</p>
</div>
</div>
</div>
</div>
<div class="carousel-item orange-bkg">
<div class="row jusify-content-center">
<div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
<div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?trees,snow');"></div>
<div class="col-12 col-md-5 align-self-center">
<div class="date-text m-5 p-3">
<h5 class="text-white pt-5 w-100">2018</h5>
<p class="pb-5 text-white">Are we done yet?</p>
</div>
</div>
</div>
</div>
<div class="carousel-item orange-bkg">
<div class="row jusify-content-center">
<div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
<div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?mountains,river');"></div>
<div class="col-12 col-md-5 align-self-center">
<div class="date-text m-5 p-3">
<h5 class="text-white pt-5 w-100">2020</h5>
<p class="pb-5 text-white">Just one more</p>
</div>
</div>
</div>
</div>
<div class="carousel-item orange-bkg">
<div class="row jusify-content-center">
<div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
<div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?paris,love');"></div>
<div class="col-12 col-md-5 align-self-center">
<div class="date-text m-5 p-3">
<h5 class="text-white pt-5 w-100">2021</h5>
<p class="pb-5 text-white">Aaaaand it's done</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end HistoryCarousel -->
<!-- Thumbnail Carousel -->
<div id="thumbCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="row carousel-item active d-flex justify-content-center">
<div data-bs-target="#historyCarousel" data-bs-slide-to="0" class="showing date active px-3 d-inline-block" aria-current="true" aria-label="1979">
<div class="circle-indicator m-auto">
<div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?hippy,flowers');"></div>
</div>
<div class="circle-date text-center">1979</div>
</div>
<div data-bs-target="#historyCarousel" data-bs-slide-to="1" class="date px-3 d-inline-block" aria-label="1993">
<div class="circle-indicator m-auto">
<div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?grunge,music');"></div>
</div>
<div class="circle-date text-center">1993</div>
</div>
<div data-bs-target="#historyCarousel" data-bs-slide-to="2" class="date px-3 d-inline-block" aria-label="1995">
<div class="circle-indicator m-auto">
<div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?friends,eating');"></div>
</div>
<div class="circle-date text-center">1995</div>
</div>
<div data-bs-target="#historyCarousel" data-bs-slide-to="3" class="date px-3 d-inline-block" aria-label="2001">
<div class="circle-indicator m-auto">
<div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?y2k,celebrate');"></div>
</div>
<div class="circle-date text-center">2001</div>
</div>
<div data-bs-target="#historyCarousel" data-bs-slide-to="4" class="date px-3 d-inline-block" aria-label="2005">
<div class="circle-indicator m-auto">
<div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?babies,cute');"></div>
</div>
<div class="circle-date text-center">2005</div>
</div>
<div data-bs-target="#historyCarousel" data-bs-slide-to="5" class="date px-3 d-inline-block" aria-label="2007">
<div class="circle-indicator m-auto">
<div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?rainbow,dogs');"></div>
</div>
<div class="circle-date text-center">2007</div>
</div>
<div data-bs-target="#historyCarousel" data-bs-slide-to="6" class="date px-3 d-inline-block" aria-label="2008">
<div class="circle-indicator m-auto">
<div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?bicycle,cats');"></div>
</div>
<div class="circle-date text-center">2008</div>
</div>
</div>
<div class="row carousel-item display-content-center">
<div data-bs-target="#historyCarousel" data-bs-slide-to="7" class="date px-3 d-inline-block" aria-label="2010">
<div class="circle-indicator m-auto">
<div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?computers,bunnies');"></div>
</div>
<div class="circle-date text-center">2010</div>
</div>
<div data-bs-target="#historyCarousel" data-bs-slide-to="8" class="date px-3 d-inline-block" aria-label="2011">
<div class="circle-indicator m-auto">
<div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?teal,birds');"></div>
</div>
<div class="circle-date text-center">2011</div>
</div>
<div data-bs-target="#historyCarousel" data-bs-slide-to="9" class="date px-3 d-inline-block" aria-label="2014">
<div class="circle-indicator m-auto">
<div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?portrait,ocean');"></div>
</div>
<div class="circle-date text-center">2014</div>
</div>
<div data-bs-target="#historyCarousel" data-bs-slide-to="10" class="date px-3 d-inline-block" aria-label="2017">
<div class="circle-indicator m-auto">
<div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?flying,butterfly');"></div>
</div>
<div class="circle-date text-center">2017</div>
</div>
<div data-bs-target="#historyCarousel" data-bs-slide-to="11" class="date px-3 d-inline-block" aria-label="2018">
<div class="circle-indicator m-auto">
<div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?trees,snow');"></div>
</div>
<div class="circle-date text-center">2018</div>
</div>
<div data-bs-target="#historyCarousel" data-bs-slide-to="12" class="date px-3 d-inline-block" aria-label="2020">
<div class="circle-indicator m-auto">
<div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?mountains,river');"></div>
</div>
<div class="circle-date text-center">2020</div>
</div>
<div data-bs-target="#historyCarousel" data-bs-slide-to="13" class="date px-3 d-inline-block" aria-label="2021">
<div class="circle-indicator m-auto">
<div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?paris,love');"></div>
</div>
<div class="circle-date text-center">2021</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#thumbcarousel" role="button" data-bs-target="#thumbCarousel" data-bs-slide="prev">
<div class="fa-2x">
<i class="fas fa-angle-left" data-fa-transform="shrink-8" aria-hidden="true"></i>
</div>
</a>
<a class="carousel-control-next" href="#thumbcarousel" role="button" data-bs-target="#thumbCarousel" data-bs-slide="next">
<div class="fa-2x">
<i class="fas fa-angle-right" data-fa-transform="shrink-8" aria-hidden="true"></i>
</div>
</a>
</div>
<!-- /thumbcarousel -->【问题讨论】：
轮播项目上的.d-flex 类导致了显示问题。至于活动状态问题，请检查您是否没有拼写错误，例如#historyCarousel vs #historycarousel，你实际上选择了正确的元素。您可以使用传入事件的数据e.from / e.to 来选择要删除/添加类的元素。您可以简化元素选择：$('#thumbcarousel [data-slide-to="'+active+'"]')（注意我还将索引包装在 "" 中）
【参考方案1】：
额外的 CSS 和 jQuery 有很多功能。我清理了标记并简化了 jQuery 事件处理程序。这应该使 2 个轮播保持同步。
$('#thumbCarousel').on('slide.bs.carousel', function (e)
// advance main carousel
var nextSlide = e.to
$('#myCarousel').carousel(nextSlide*7)
)
$('#myCarousel').on('slid.bs.carousel', function (e)
// sync thumb years carousel
var currSlide = e.to
if (currSlide===6)
$('#thumbCarousel').carousel(1)
else if (currSlide===0)
$('#thumbCarousel').carousel(0)
)
Working demo
【讨论】：
以上是关于Bootstrap 5 双轮播定位的主要内容，如果未能解决你的问题，请参考以下文章
html Bootstrap Custom Select通过Selectpicker（Bootstrap select）https://github.com/silviomoreto/bootstra