I have a lot of images and I want to compare them with an image comparison slider but I can't see the entire image only a part of it. And I want to scroll into it to be able to see the entire image.
My HTML code looks like this :
<div class="overflow-scroll" id="image-comparison-slider">
<img class="overflow-scroll" width="100%" id="image1" src="../../static/img/screenshot.png" alt="before">
<div class="img-wrapper">
<img width="100%" id="image2" alt="after" src="../../static/img/screenshot1.png"/>
</div>
<span class="label label-before">Before</span>
<span class="label label-after">After</span>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
<i class="fa fa-arrow-left"></i>
<i class="fa fa-arrow-right"></i>
</div>
<div class="handle-line"></div>
</div>
</div>
I tried to use overflow-scroll from bootstrap 5 but it didn't work.
Now it look like this:
And I want to scroll down into the both images in the same time.
Set the parent div overflow-y: scroll so that, you can scroll to see the whole image. and here I am using bootstrap carousel to see all the images.
.carousel {
height: 600px;
width: 100%;
}
.carousel-inner {
height: 100%;
width: 100%;
overflow-y: scroll;
}
img {
height: auto
width: 100%;
object-fit: cover;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/red-flowers-1659044733.jpeg"
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://cf.ltkcdn.net/small-pets/images/orig/304120-1600x1066-lovebirds-as-pets.jpg"
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="http://www.evolo.us/wp-content/uploads/2019/04/0516-0.jpg"
class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js"
integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js"
integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
crossorigin="anonymous"></script>
Related
I'm trying to have a slideshow (carousel) of cards on my index.html.
The code I currently have presents all five cards vertically stacked, with clickable arrows that don't do anything. Anyone know how to make it so one card is shown at a time and can be clicked on to the next?
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="card active" style="width: 12rem;">
<img src="https://static.americasbestracing.net/s3fs-public/styles/large/public/reylu-gutierrez.jpg?KHONSa1SS2GQbZtqmIed8QZzxaE.XX.4&itok=AKl_nQxN" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Reylu Gutierrez.</p>
</div>
</div>
<div class="card" style="width: 12rem;">
<img src="https://www.nyra.com/uploads/profile-images/eric-cancel.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Eric Cancel.</p>
</div>
</div>
<div class="card" style="width: 12rem;">
<img src="https://www.nyra.com/uploads/profile-images/manuel-franco.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Manuel Franco.</p>
</div>
</div>
<div class="card" style="width: 12rem;">
<img src="https://www.nyra.com/uploads/profile-images/joel-rosario.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Joel Rosario.</p>
</div>
</div>
<div class="card" style="width: 12rem;">
<img src="https://live.staticflickr.com/65535/43429236045_546119af43_b.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Andre Worrie.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
I have the CSS and JS sources. My js file has these lines
const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
interval: 2000,
touch: false
})
Console log says bootstrap is not defined in the const carousel line?
okay in bootstrap you must follow template provide ,see this https://getbootstrap.com/docs/5.2/components/carousel/
you forget take class= "carousel-item"
so like this
<div class="card carousel-item " style="width: 12rem;">
<img src="https://www.nyra.com/uploads/profile-images/joel-rosario.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Joel Rosario.</p>
</div>
</div>
I try create slider / carousel products like this below screen using Bootstrap5:
Here I paste, This is my current code:
<style>
<!-- Temporary -->
.carousel-control-next-icon {
background: black;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- Home Section End -->
<div class="container-fluid mt-3">
<div class="row g-4">
<div class="col-xl-6 col-md-4 ratio_medium d-sm-block d-none">
<div class="home-section bg-white div-content" style="height:236px;">
<!-- With Captions -->
<div id="carouselExampleCaption" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item">
<img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
</div>
<div class="carousel-item active">
<img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaption" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaption" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="col-xl-6 ratio_65 d-xl-block d-none">
<div class="home-section bg-white div-content" style="height:236px;">
<!-- With Captions -->
<div id="carouselExampleCaption2" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item">
<img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
</div>
<div class="carousel-item active">
<img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaption2" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaption2" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Home Section End -->
But currently this look like bad:
Display only one item, but I need display like this 3 items and half. Also I try add under photo price and product title and image must be responsive. Can anyone little help me correct this code?
If you were to search for this you can find this Codepen and this Codeply.
Combining the two gives you a working example here (Codepen).
The JS clones the content of each .carousel-item, so each .carousel-item will hold the content of its (5) siblings. The CSS changes the transform so the slider moves accordingly.
It's also responsive by only showing one item before the smallest breakpoint, but this can be easily adjusted (CSS only).
Here it is in a snippet, view it in full screen using the "Full page" link:
Note: had to add a bunch of !important in the CSS which is not needed if you load your CSS after Bootstrap's, like in the Codepen.
let items = document.querySelectorAll('.carousel .carousel-item')
items.forEach((el) => {
const minPerSlide = 5
let next = el.nextElementSibling
for (var i = 1; i < minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
.carousel-item .col {
padding: 0 5px;
}
#media (max-width: 767px) {
.carousel-inner .carousel-item>div {
display: none !important;
}
.carousel-inner .carousel-item>div:first-child {
display: block !important;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex !important;
}
/* medium and up screens */
#media (min-width: 768px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(20%) !important;
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-20%) !important;
}
/* half slides CSS */
.carousel-inner:before {
position: absolute;
top: 0;
bottom: 0;
right: 85%;
left: 0;
content: "";
display: block;
background-color: #fff;
z-index: 2;
}
.carousel-inner:after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 85%;
content: "";
display: block;
background-color: #fff;
z-index: 2;
}
.carousel-control-prev {
left: 12% !important;
}
.carousel-control-next {
right: 12% !important;
}
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0) !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<div class="container">
<div class="row justify-content-center">
<div id="carouselExampleControls" class="carousel carousel-dark slide">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col">
<div class="card">
<img src="https://via.placeholder.com/700x500.png/CB997E/333333?text=1" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col">
<div class="card">
<img src="https://via.placeholder.com/700x500.png/DDBEA9/333333?text=2" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col">
<div class="card">
<img src="https://via.placeholder.com/700x500.png/FFE8D6/333333?text=3" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col">
<div class="card">
<img src="https://via.placeholder.com/700x500.png/B7B7A4/333333?text=4" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col">
<div class="card">
<img src="https://via.placeholder.com/700x500.png/A5A58D/333333?text=5" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col">
<div class="card">
<img src="https://via.placeholder.com/700x500.png/6B705C/eeeeee?text=6" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev bg-transparent w-aut" href="#carouselExampleControls" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next bg-transparent w-aut" href="#carouselExampleControls" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
I created slider using Bootstrap 5. Currently result is:
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<div class="col-xl-6 col-md-12 ratio_65">
<div class="row g-3">
<div class="col-xl-12 col-sm-12">
<div class="home-contain">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="home-detail text-white p-center text-center">
<div>
<h4 class="text-center">
<!--Organic Lifestyle-->
</h4>
<h5 class="text-center">
<!--Best Weekend Sales-->
</h5>
</div>
</div>
</div>
</div>
</div>
</div>
I read the Bootstrap documentation about carousel, also tried all available "example" in the search engine. Unfortunately, there is no way I can achieve such an effect.
I try get effect and add name every slider as tab. Can anyone little help me on how to add extra tabs like this? I paste example photo here:
You are right, Bootstrap does not support carousel slider tabs out of the box. But because Bootstrap uses the data attributes data-bs-target and data-bs-slide-to for the indicators you can apply them to other elements.
For example, apply them on a list outside of the carousel, which are the slider tabs:
<ul class="custom-indicators">
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-label="Slide 1">
Slide 1
</li>
...
</ul>
The slider tabs in the snippet has more classes to position everything using a row with four columns col. Simply clicking on a <li> element will already set the carousel to that slide index (0).
To style the active slider tab use JavaScript by toggling a class on it, like .active and style it using CSS.
Here are two basic examples, using Jquery or plain Javascript.
Solution with Jquery
Lucky for us, Bootstrap’s carousel class exposes events for hooking into carousel functionality, like slide.bs.carousel:
$('#carouselExampleIndicators').on('slide.bs.carousel', event => { ... });
This function will fire whenever the carousel transitions to another slide. Inside access the event property to, which holds the index of the next slide. Then toggle the active class:
const nextSlide = event.to;
$('.custom-indicators li').removeClass('active');
$('.custom-indicators li[data-bs-slide-to=' + nextSlide + ']').addClass('active');
Now apply some custom CSS to style the tabs, and that's. Here's the complete basic example of custom indicators that can be styled:
$('#carouselExampleIndicators').on('slide.bs.carousel', event => {
const nextSlide = event.to;
$('.custom-indicators li').removeClass('active');
$('.custom-indicators li[data-bs-slide-to=' + nextSlide + ']').addClass('active');
});
.custom-indicators li {
border-top: 3px solid transparent;
}
.custom-indicators li.active {
color: black;
font-weight: bold;
border-top: 3px solid black;
}
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<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.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<div class="col-xl-6 col-md-12 ratio_65">
<div class="row g-3">
<div class="col-xl-12 col-sm-12">
<div class="home-contain">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel" >
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="">
<ul class="list-unstyled row gx-0 text-center text-secondary custom-indicators" role="button">
<li class="col p-2 active" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-label="Slide 1">
Slide 1
</li>
<li class="col p-2" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2">
Slide 2
</li>
<li class="col p-2" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3">
Slide 3
</li>
<li class="col p-2" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4">
Slide 4
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Solution with JavaScript
Here's a solution that uses plain Javascript to accomplish the same thing. It loops over all slider tabs removing the class active and applies it on the slider tab that has the index (data-bs-slide-to="?") of the next slide.
var carousel = document.querySelector('#carouselExampleIndicators');
carousel.addEventListener('slide.bs.carousel', event => {
var nextSlide = event.to;
var customIndicators = document.querySelectorAll('.custom-indicators li');
for (var i = 0; i < customIndicators.length; i++) {
customIndicators[i].classList.remove('active');
}
document.querySelector('.custom-indicators li[data-bs-slide-to="' + nextSlide + '"]').classList.add('active');
});
.custom-indicators li {
border-top: 3px solid transparent;
}
.custom-indicators li.active {
color: black;
font-weight: bold;
border-top: 3px solid black;
}
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<div class="col-xl-6 col-md-12 ratio_65">
<div class="row g-3">
<div class="col-xl-12 col-sm-12">
<div class="home-contain">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="">
<ul class="list-unstyled row gx-0 text-center text-secondary custom-indicators" role="button">
<li class="col p-2 active" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-label="Slide 1">
Slide 1
</li>
<li class="col p-2" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2">
Slide 2
</li>
<li class="col p-2" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3">
Slide 3
</li>
<li class="col p-2" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4">
Slide 4
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I am trying to get a bootstrap 5 carousel with collapse outside the carousel going but I'm stuck on the java script part. I am a absolute beginner and not sure how to solve this problem.
I made a console log to see if I have the carousel slides and yes this is working. I can get the collapse working. because of "SyntaxError: Document.querySelector: '[object HTMLDivElement]' is not a valid selector".
Any help would be appreciated.
document.getElementById("carouselExampleControls");
document.addEventListener("slide.bs.carousel", function (e) {
console.log(e.relatedTarget);
});
document.getElementById("carouselExampleControls");
document.addEventListener("slide.bs.carousel", function (e) {
var forSlide = document.querySelector(
".for-slide-" + document.querySelector(e.relatedTarget).index()
);
if (!forSlide.classList.contains("in")) {
document.querySelector("#collapseGroup>.collapse.in").collapse("hide");
forSlide.collapse("show");
}
});
#import url(https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css);
.img0 {
height: 300px;
width: 400px;
background-color: blue;
position: relative;
}
.img1 {
height: 300px;
width: 400px;
background-color: green;
position: relative;
}
.img2 {
height: 300px;
width: 400px;
background-color: red;
position: relative;
}
.img3 {
height: 300px;
width: 400px;
background-color: purple;
position: relative;
}
.description-group {
border: 1px solid red;
}
.textarea {
margin: 20px 50px;
color: black;
}
<div class="container mt-4">
<div class="row row-flex">
<div class="col-md-4">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></a>
<a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="1" aria-label="Slide 2"></a>
<a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="2" aria-label="Slide 3"></a>
<a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="3" aria-label="Slide 4"></a>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100 img0" alt="Slide 0">
<div class="carousel-caption d-none d-md-block">
<h5>Caption 0</h5>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100 img1" alt="Slide 1">
<div class="carousel-caption d-none d-md-block">
<h5>Caption 1</h5>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100 img2" alt="Slide 2">
<div class="carousel-caption d-none d-md-block">
<h5>Caption 2</h5>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100 img3" alt="Slide 3">
<div class="carousel-caption d-none d-md-block">
<h5>Caption 3</h5>
</div>
</div>
</div>
<!-- Controls -->
<a class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>
<div class="col-md-8 description-group">
<div id="collapseGroup">
<div class="collapse for-slide-0 in">
<div class="card card-body">
<div class="textarea">
<h3>Text for Slide 0</h3>
</div>
</div>
</div>
<div class="collapse for-slide-1">
<div class="card card-body">
<div class="textarea">
<h3>Text for Slides 1</h3>
</div>
</div>
</div>
<div class="collapse for-slide-2">
<div class="card card-body">
<div class="textarea">
<h3>Text for Slide 2</h3>
</div>
</div>
</div>
<div class="collapse for-slide-3">
<div class="card card-body">
<div class="textarea">
<h3>Text for Slide 3</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
You probably want to refer to the correct slide from carousel item. You can get index of current targetElement node using indexOf. However the collapse part still doesn't work need to fix the markup.
document.addEventListener("slide.bs.carousel", function(e) {
var child = e.relatedTarget
var index = [].indexOf.call(child.parentNode.children, child);
var forSlide = document.querySelector(".for-slide-" + index);
console.log("should show collapse " + forSlide.innerText.trim())
return;
// check your collapse code currently doesn't work
if (!forSlide.classList.contains("in")) {
document.querySelector("#collapseGroup>.collapse.show").collapse("hide");
forSlide.collapse("show");
}
});
#import url(https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css);
.img0 {
height: 300px;
width: 400px;
background-color: blue;
position: relative;
}
.img1 {
height: 300px;
width: 400px;
background-color: green;
position: relative;
}
.img2 {
height: 300px;
width: 400px;
background-color: red;
position: relative;
}
.img3 {
height: 300px;
width: 400px;
background-color: purple;
position: relative;
}
.description-group {
border: 1px solid red;
}
.textarea {
margin: 20px 50px;
color: black;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container mt-4">
<div class="row row-flex">
<div class="col-md-4">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></a>
<a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="1" aria-label="Slide 2"></a>
<a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="2" aria-label="Slide 3"></a>
<a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="3" aria-label="Slide 4"></a>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100 img0" alt="Slide 0">
<div class="carousel-caption d-none d-md-block">
<h5>Caption 0</h5>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100 img1" alt="Slide 1">
<div class="carousel-caption d-none d-md-block">
<h5>Caption 1</h5>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100 img2" alt="Slide 2">
<div class="carousel-caption d-none d-md-block">
<h5>Caption 2</h5>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100 img3" alt="Slide 3">
<div class="carousel-caption d-none d-md-block">
<h5>Caption 3</h5>
</div>
</div>
</div>
<!-- Controls -->
<a class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>
<div class="col-md-8 description-group">
<div id="collapseGroup">
<div class="collapse for-slide-0 show in">
<div class="card card-body">
<div class="textarea">
<h3>Text for Slide 0</h3>
</div>
</div>
</div>
<div class="collapse for-slide-1">
<div class="card card-body">
<div class="textarea">
<h3>Text for Slides 1</h3>
</div>
</div>
</div>
<div class="collapse for-slide-2">
<div class="card card-body">
<div class="textarea">
<h3>Text for Slide 2</h3>
</div>
</div>
</div>
<div class="collapse for-slide-3">
<div class="card card-body">
<div class="textarea">
<h3>Text for Slide 3</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
In bootstrap I am trying to make an image gallery for our webpage. We are using the latest version of bootstrap and we have our images, but there is just one thing. Our images are different sizes and every time it switches to the next image it changes the whole size of the gallery. I was wondering if there was a way to have just whitespace or blackspace fill the area that it doesn't change the size of the gallery.
<h2>Galleries</h2>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/Gallery_1.jpeg" class="d-block w-100" alt="Thompson Machinery">
<div class="carousel-caption d-none d-md-block">
<h5 class="galleryCaptions">Thompson Machinery</h5>
</div>
</div>
<div class="carousel-item">
<img src="images/Gallery_2.jpeg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 class="galleryCaptions">Second slide label</h5>
</div>
</div>
<div class="carousel-item">
<img src="images/Gallery_3.jpeg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 class="galleryCaptions">Third slide label</h5>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
This will help you i guess
Wraping images inside a container
<div class="image-container">
<img src="https://source.unsplash.com/random/400x500" class="d-block w-100" alt="...">
</div>
and give a height and width properties to that container
.image-container{
width: 500px;
height: 500px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body{
min-height: 100vh;
position: relative;
display: grid;
place-content: center;
}
.image-container{
width: 500px;
height: 500px;
border: 1px solid blue;
display: grid;
place-content: center;
}
img{
max-width:100%;
display: block;
}
<h2>Galleries</h2>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="image-container">
<img src="https://source.unsplash.com/random/300x150" alt="Thompson Machinery">
</div>
<div class="carousel-caption d-none d-md-block">
<h5 class="galleryCaptions">Thompson Machinery</h5>
</div>
</div>
<div class="carousel-item">
<div class="image-container">
<img src="https://source.unsplash.com/random/400x500" class="d-block w-100" alt="...">
</div>
<div class="carousel-caption d-none d-md-block">
<h5 class="galleryCaptions">Second slide label</h5>
</div>
</div>
<div class="carousel-item">
<div class="image-container">
<img src="https://source.unsplash.com/random/200x300" class="d-block w-100" alt="...">
</div>
<div class="carousel-caption d-none d-md-block">
<h5 class="galleryCaptions">Third slide label</h5>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>