ARTICLE AD BOX
I have a Bootstrap carousel (standard functionality - horizontal transition). What I've been trying to do is add vertical transition controls in addition to the horizontal transition controls. It's been zero-sum thus far and was hoping someone could give me a pointer as to how I'd be able to accommodate both types of sliding controls on the same carousel. Here's the code I'm working with:
<style> .carousel-item { transition: transform 1s ease-in-out !important; height: 100vh; overflow-x: hidden; overflow-y: hidden !important; } .carousel-item.active.carousel-item-start { transform: translateY(-100%) !important; } .carousel-item.carousel-item-next { transform: translateY(100%) !important; } .carousel-item.carousel-item-next.carousel-item-start { transform: translateY(0%) !important; } .carousel-item.active.carousel-item-end { transform: translateY(100%) !important; } .carousel-item.carousel-item-prev { transform: translateY(-100%) !important; } .carousel-item.carousel-item-prev.carousel-item-end { transform: translateY(0%) !important; } @media (max-width: 767px) { .carousel, .carousel-inner, .carousel-item { height: 100vh; } .carousel-item img { height: 100vh; object-fit: cover; object-position: center; } } </style> <body> <div id="carouselExampleControls" class="carousel slide"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://picsum.photos/800/600?1" class="d-block w-100" alt=""> </div> <div class="carousel-item"> <img src="https://picsum.photos/800/600?2" class="d-block w-100" alt=""> </div> <div class="carousel-item"> <img src="https://picsum.photos/800/600?3" 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> </body>