I've got a combo carousel that's mostly working. Basically, I'm using this as a timeline slider. I have 14 dates to display. In addition to thumbnails/indicators, I'm using dates. But because there are so many dates, I need them to display in separate rows, but with only the active row at a time. I'm hoping my code makes it clear what I'm trying to achieve. I had a version that worked in BS 3 at one time, but that page appears to be dead so I can't see what I did. I only remember that I did basically what's shown here. When you click the arrow for the next page of thumbnails, the previous ones slide in behind the new ones for some reason. Also, I can't seem to figure out how to add "shown" to the thumbnail that's currently targeted in the first carousel. I know is off, probably in the math. I pulled it from somewhere - can't remember where.
// 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 -->from Bootstrap 5 double carousel targeting
No comments:
Post a Comment