I'm trying to create a vertical carousel on bootstrap 5. I'm using this code for reference. I understand it was built on a different version of bootstrap but I can't seem to translate it to bootstrap 5. I have this so far. When ran, the website is blank. I'm also not sure if I've linked the CSS and JS properly in my html.
HTML
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript"src="{{ url_for('static', filename='js/scripts.js')}}"></script>
<link rel="stylesheet/less" type="text/css" href="{{ url_for('static', filename='less/mystyles.less')}}">
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div class="carousel slide vertical" id="carousel-vertical" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carousel-vertical" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carousel-vertical" data-bs-slide-to="1"></li>
<li data-bs-target="#carousel-vertical" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
</html>
JS
$(document).ready(function() {
var delta = 0;
var scrollThreshold = 5;
// detect available wheel event
wheelEvent = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
"DOMMouseScroll"; // let's assume that remaining browsers are older Firefox
// Bind event handler
$(window).on(wheelEvent, function (e) {
// Do nothing if we weren't scrolling the carousel
var carousel = $('.carousel.vertical:hover');
if (carousel.length === 0) return;
// Get the scroll position of the current slide
var currentSlide = $(e.target).closest('.item')
var scrollPosition = currentSlide.scrollTop();
// --- Scrolling up ---
if (e.originalEvent.detail < 0 || e.originalEvent.deltaY < 0 || e.originalEvent.wheelDelta > 0) {
// Do nothing if the current slide is not at the scroll top
if(scrollPosition !== 0) return;
delta--;
if ( Math.abs(delta) >= scrollThreshold) {
delta = 0;
carousel.carousel('prev');
}
}
// --- Scrolling down ---
else {
// Do nothing if the current slide is not at the scroll bottom
var contentHeight = currentSlide.find('> .content').outerHeight();
if(contentHeight > currentSlide.outerHeight() && scrollPosition + currentSlide.outerHeight() !== contentHeight) return;
delta++;
if (delta >= scrollThreshold)
{
delta = 0;
carousel.carousel('next');
}
}
// Prevent page from scrolling
return false;
});
})
CSS(less)
.carousel .item {
padding-bottom: 720/1280 * 100%;
background-size: cover;
&:nth-child(1) { background-image: url(' 1'); }
&:nth-child(2) { background-image: url(' 2'); }
&:nth-child(3) { background-image: url(' 3'); }
}
.carousel.vertical .carousel-inner > .item {
-webkit-transition: .6s ease-in-out top;
-o-transition: .6s ease-in-out top;
transition: .6s ease-in-out top;
}
@media all and (transform-3d),
(-webkit-transform-3d) {
.carousel.vertical .carousel-inner > .item {
-webkit-transition: -webkit-transform .6s ease-in-out;
-ms-transition: -ms-transform .6s ease-in-out;
-o-transition: -o-transform .6s ease-in-out;
transition: transform .6s ease-in-out;
-ms-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-ms-perspective: 1000;
-webkit-perspective: 1000;
perspective: 1000;
}
.carousel.vertical .carousel-inner > .item.next,
.carousel.vertical .carousel-inner > .item.active.right {
top: 0;
-ms-transform: translate3d(0, 100%, 0);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.carousel.vertical .carousel-inner > .item.prev,
.carousel.vertical .carousel-inner > .item.active.left {
top: 0;
-ms-transform: translate3d(0, -100%, 0);
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.carousel.vertical .carousel-inner > .item.next.left,
.carousel.vertical .carousel-inner > .item.prev.right,
.carousel.vertical .carousel-inner > .item.active {
top: 0;
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.carousel.vertical .carousel-inner > .active {
top: 0;
}
.carousel.vertical .carousel-inner > .next,
.carousel.vertical .carousel-inner > .prev {
top: 0;
height: 100%;
width: 100%;
}
.carousel.vertical .carousel-inner > .next {
left: 0;
top: 100%;
}
.carousel.vertical .carousel-inner > .prev {
left: 0;
top: -100%
}
.carousel.vertical .carousel-inner > .next.left,
.carousel.vertical .carousel-inner > .prev.right {
top: 0;
}
.carousel.vertical .carousel-inner > .active.left {
left: 0;
top: -100%;
}
.carousel.vertical .carousel-inner > .active.right {
left: 0;
top: 100%;
}
.carousel.vertical .carousel-indicators,
.carousel-indicators-vertical {
right: 20px;
top: 50%;
transform: translate(-50%);
bottom: auto;
left: auto;
width: auto;
margin: 0;
padding: 0;
li {
display: block;
margin: 5px 0;
}
}
1 Answer
1) Getting the right setup for Bootstrap :
you have 2 ways of using the framework -> download the files OR link the files
which one should you use ? I like downloading the files better so I can go and see what's going on. It also allows me to modify the things I want from the source code and not do "orders / counter-orders" with my own CSS / JS files.
where to get those links -> in Bootstrap "Getting Started" section (homepage - link here)
where to download the files ? -> in Bootstrap download section (here)
where should you place the links / scripts ? -> Links are in the
headsection of HTML but I really suggest putting the script right before the end of thebody. Why ? So your HTML structure/elements are loaded, and THEN only you can put eventlisteners and modifiers on those loaded elements.
2) How to make the carousel vertical ?
how does it currently work ? The carousel works in horizontal mode using Bootstrap Framework. If you go into their CSS files, you will understand how it works. It mainly uses a
float: left,display:noneandtransform: translateX(...)properties to make it work horizontally.what must you do to make it vertical ? Well, you need to get the
float:leftoff the code and you need to change thetransform-:translateX(...)to atransform-:translateY(...)transitions, awful ? I know, it doesn't look great. One thing you can do, first, to make it a little less "jumpy", is set a fixed
heightto thecarousel-innerclass.If you want the buttons (next / previous) to be vertical, you will need to work on their positionning (currently, their classes are in
left: 0/right: 0. The classes are :.carousel-control-prev /.carousel-control-next
3) Illustrated idea:
What vertical CSS modifications look like :
More info on the "Getting the right setup for Bootstrap" :
The link files of Bootstrap :
The download section of Bootstrap :
The .zip files for CSS, example :
Don't forget to "link" the download files into your html.
Example for CSS : <link rel="stylesheet" href="./bootstrap.css">
