We Keep Coding

How to use .classList.add("hide"); to hide curtains when viewing a 2nd time

Curtains stay hidden when .setAttribute("hidden", true); is being used. https://jsfiddle.net/g2th3opc/
evt.currentTarget.closest(".inner-container").querySelector(".sliding-panels").setAttribute("hidden", true);
Curtains don't stay hidden when .classList.add("hide"); is being used. https://jsfiddle.net/06vdjka4/
evt.currentTarget.closest(".inner-container").querySelector(".sliding-panels").classList.add("hide");
To reproduce: Click 1 svg play button, then click the X.
Do that repeatedly, click on all of them, even the ones you already clicked on.
You will notice that the curtains don't stay hidden when .classList.add("hide"); is being used.
The curtains are supposed to stay hidden after clicking on the same svg play button a 2nd time.
Why don't they stay hidden, and is there a fix for that?
I tried to post a snippet but it went over the character limit.

Your issue is the way you are showing the buttons:
function showAllButtons(buttonSelector) {
const allButtons = document.querySelectorAll(buttonSelector);
function showButton(button) {
// This is where the hide class is getting removed
button.classList.remove("hide");
}
allButtons.forEach(showButton);
}
function resetPage() {
resetBackground("body");
resetCurtains(".with-curtain");
// You aren't just matching buttons with this selector. You are matching everything that has been hidden!
showAllButtons(".hide");
resetButtons(".outer");
}
// This is called whenever an exit button is clicked
function exitClickHandler(evt) {
resetPage(); // During this function calls all other .sliding-panels divs are show
// This only hides the current video's .sliding-panels div
evt.currentTarget.closest(".inner-container").querySelector(".sliding-panels").classList.add("hide");
}
The solution is to be more specific with your selector for un-hiding buttons:
// Notice the increased specificity of this selector:
showAllButtons(".container.hide");
const manageUI = (function makeManageUI() {
function resetBackground(backgroundSelector) {
const allBackgrounds = document.querySelectorAll(backgroundSelector);
function showBackground(background) {
background.classList.remove("bg1");
}
allBackgrounds.forEach(showBackground);
}
function resetCurtains(curtainSelector) {
const allCurtains = document.querySelectorAll(curtainSelector);
function showCurtain(curtain) {
curtain.classList.remove("active");
}
allCurtains.forEach(showCurtain);
}
function showAllButtons(buttonSelector) {
const allButtons = document.querySelectorAll(buttonSelector);
function showButton(button) {
button.classList.remove("hide");
}
allButtons.forEach(showButton);
}
function resetButtons(buttonSelector) {
const allButtons = document.querySelectorAll(buttonSelector);
function showButton(button) {
button.classList.remove("isOpen");
}
allButtons.forEach(showButton);
}
function resetPage() {
resetBackground("body");
resetCurtains(".with-curtain");
// Notice the increased specificity of this selector:
showAllButtons(".container.hide");
resetButtons(".outer");
}
function exitClickHandler(evt) {
resetPage();
evt.currentTarget.closest(".inner-container").querySelector(".sliding-panels").classList.add("hide");
}
function addClickToExit(exitButtons) {
exitButtons.forEach(function addExitButtonHandler(exitButtons) {
exitButtons.addEventListener("click", exitClickHandler);
});
}
function init() {
const exitButtons = document.querySelectorAll(".exit");
addClickToExit(exitButtons);
}
return {
init
};
}());
const manageCover = (function makeManageCover() {
const config = {};
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function hideAll(elements) {
elements.forEach(hide);
}
function resetBackground(backgroundSelector) {
const allBackgrounds = document.querySelectorAll(backgroundSelector);
function hideBackground(background) {
background.classList.add("bg1");
}
allBackgrounds.forEach(hideBackground);
}
function resetButtons(buttonSelector) {
const allButtons = document.querySelectorAll(buttonSelector);
function hideButton(button) {
button.classList.add("isOpen");
}
allButtons.forEach(hideButton);
}
function resetPage() {
resetBackground("body");
resetButtons(".outer");
}
function markAsPlayed(played) {
played.classList.add("played");
}
function showCovers(playButton) {
const cover = playButton.parentElement;
cover.classList.add("active");
show(cover);
}
function coverClickHandler(evt) {
hideAll(config.containers);
resetPage();
markAsPlayed(evt.currentTarget);
const cover = evt.currentTarget;
showCovers(cover);
}
function addClickToButtons(playButtons) {
playButtons.forEach(function playButtonHandler(playButton) {
playButton.addEventListener("click", coverClickHandler);
});
}
function addCoverHandler(coverSelector, handler) {
const cover = document.querySelector(coverSelector);
cover.addEventListener("click", handler);
}
function init(selectors) {
config.containers = document.querySelectorAll(selectors.container);
const playButtons = document.querySelectorAll(selectors.playButton);
addClickToButtons(playButtons);
}
return {
addCoverHandler,
init
};
}());
function combinePlayerOptions(options1 = {}, options2 = {}) {
const combined = Object.assign({}, options1, options2);
Object.keys(options1).forEach(function checkObjects(prop) {
if (typeof options1[prop] === "object") {
combined[prop] = Object.assign({}, options1[prop], options2[prop]);
}
});
return combined;
}
const videoPlayer = (function makeVideoPlayer() {
const players = [];
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/player_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function createStopHandler(player) {
const stopButtons = document.querySelectorAll(".exit");
stopButtons.forEach(function stopButtonHandler(button) {
button.addEventListener("click", function buttonClickHandler() {
player.stopVideo();
});
});
}
function onPlayerReady(event) {
const player = event.target;
player.setVolume(100);
createStopHandler(player);
}
function addPlayer(video, settings) {
const defaults = {
height: 360,
host: "https://www.youtube-nocookie.com",
videoId: video.dataset.id,
width: 640
};
defaults.events = {
"onReady": onPlayerReady
};
const playerOptions = combinePlayerOptions(defaults, settings);
const player = new YT.Player(video, playerOptions);
players.push(player);
return player;
}
return {
addPlayer
};
}());
const managePlayer = (function makeManagePlayer() {
const defaults = {
playerVars: {
autoplay: 0,
controls: 1,
disablekb: 1,
enablejsapi: 1,
fs: 0,
iv_load_policy: 3
}
};
function show(el) {
el.classList.remove("hide");
}
function createPlayer(videoWrapper, settings = {}) {
const video = videoWrapper.querySelector(".video");
const playerOptions = combinePlayerOptions(defaults, settings);
return videoPlayer.addPlayer(video, playerOptions);
}
function createCoverClickHandler(playerOptions) {
return function coverClickHandler(evt) {
const cover = evt.currentTarget;
const wrapper = cover.nextElementSibling;
show(wrapper);
const player = createPlayer(wrapper, playerOptions);
wrapper.player = player;
};
}
function addPlayer(coverSelector, playerOptions) {
const clickHandler = createCoverClickHandler(playerOptions);
manageCover.addCoverHandler(coverSelector, clickHandler);
}
return {
add: addPlayer
};
}());
function onYouTubeIframeAPIReady() {
managePlayer.add(".playa", {});
managePlayer.add(".playb", {});
managePlayer.add(".playc", {});
managePlayer.add(".playd", {});
managePlayer.add(".playe", {
playerVars: {
playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
}
});
managePlayer.add(".playe", {});
managePlayer.add(".playf", {});
managePlayer.add(".playg", {});
managePlayer.add(".playh", {});
managePlayer.add(".playi", {});
manageCover.init({
container: ".container",
playButton: ".thePlay"
});
manageUI.init({});
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #353198;
animation: fade 2s ease 0s forwards;
}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.outer {
display: flex;
flex-wrap: wrap;
min-height: 100%;
width: 290px;
box-sizing: border-box;
justify-content: center;
align-content: center;
margin: auto;
gap: 10px;
}
.outer.isOpen {
display: flex;
width: auto;
align-content: stretch;
}
.container {
display: flex;
justify-content: center;
position: relative;
/*z-index: 2;*/
}
.container.active {
flex: 1 0 0;
}
body.bg1 {
animation: fadebody 5s ease 0s forwards;
}
.thePlay:hover {
box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}
.thePlay:focus {
outline: 0;
box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}
.inner-container {
display: none;
}
/* when container is active hide the svg and show the inner container*/
.container.active .thePlay {
display: none;
}
.container.active .inner-container {
display: flex;
}
.container.active .inner-container.curtain {
display: block;
}
#keyframes fadebody {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.thePlay {
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
border: none;
fill: blue;
background: transparent;
padding: 0;
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}
.played {
fill: green;
}
button.thePlay {
pointer-events: none;
}
.exit {
position: absolute;
top: auto;
bottom: -47.63px;
margin: auto;
right: 0;
left: 0;
width: 47.63px;
height: 47.63px;
cursor: pointer;
border: none;
background: transparent;
fill: red;
padding: 0;
}
.exitsvg {
fill: none;
fill-rule: evenodd;
stroke: #ff0000;
stroke-width: 17.80202103;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
border: 4.625px solid #4e4e4e;
border-radius: 100%;
}
.curtain {
position: relative;
max-width: 642px;
margin: auto;
flex: 1 0 0%;
background: #0a0a0a;
border: 20px solid #000;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
}
.panel-left,
.panel-right {
position: absolute;
height: 100%;
width: calc(50% + 1px);
/* rounding error fix */
top: 0%;
transition: all ease 10s;
/*background-image: url("https://picsum.photos/600");
background-size: cover;
background-repeat: no-repeat;
background-position: center;*/
overflow: hidden;
}
.panel-left {
left: 0;
/*background-color: rgb(91, 96, 106);*/
}
.panel-right {
right: 0;
/*background-color: rgb(229, 211, 211);*/
}
.panel-left::before,
.panel-right::before {
content: "";
position: absolute;
height: 100%;
width: 200%;
top: 0;
left: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
background-size: auto;
background-repeat: no-repeat;
background-position: 0 0;
}
.panel-right::before {
left: -100%;
}
.container.active .curtain .panel-left {
animation: curtain1 8s forwards;
animation-delay: 1s;
}
#keyframes curtain1 {
to {
transform: translateX(-100%);
}
}
.container.active .curtain .panel-right {
animation: curtain2 8s forwards;
animation-delay: 1s;
}
#keyframes curtain2 {
to {
transform: translateX(100%);
}
}
.container.active .curtain .panel-right {
animation: curtain3 8s forwards;
animation-delay: 1s;
}
#keyframes curtain3 {
to {
transform: translateX(100%);
}
}
.container.active .curtain .panel-right {
animation: curtain4 8s forwards;
animation-delay: 1s;
}
#keyframes curtain4 {
to {
transform: translateX(100%);
}
}
.container.active .curtain .panel-right {
animation: curtain5 8s forwards;
animation-delay: 1s;
}
#keyframes curtain5 {
to {
transform: translateX(100%);
}
}
.container.active .curtain .panel-right {
animation: curtain6 8s forwards;
animation-delay: 1s;
}
#keyframes curtain6 {
to {
transform: translateX(100%);
}
}
.container.active .curtain .panel-right {
animation: curtain7 8s forwards;
animation-delay: 1s;
}
#keyframes curtain7 {
to {
transform: translateX(100%);
}
}
.container.active .curtain .panel-right {
animation: curtain8 8s forwards;
animation-delay: 1s;
}
#keyframes curtain8 {
to {
transform: translateX(100%);
}
}
.container.active .curtain .panel-right {
animation: curtain9 8s forwards;
animation-delay: 1s;
}
#keyframes curtain9 {
to {
transform: translateX(100%);
}
}
.ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
margin: auto;
overflow: hidden;
border: 1px solid #333;
}
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hide {
display: none;
}
<div class="outer">
<div class="container with-curtain">
<button class="playa thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<g id="play">
<title>Play</title>
<circle cx="32" cy="32" r="32" fill="transparent" pointer-events="visiblePainted" />
<path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
</g>
</svg>
</button>
<div class="inner-container curtain curtain1">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame" data-id="CHahce95B1g"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
<g id="exit">
<title>exit</title>
<path d="M 6.3895625,6.4195626 C 93.580437,93.610437 93.580437,93.610437 93.580437,93.610437" />
<path d="M 6.3894001,93.6106 C 93.830213,6.4194003 93.830213,6.4194003 93.830213,6.4194003" />
</g>
</svg>
</button>
</div>
</div>
<div class="container play2 with-curtain">
<button class="playb thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain2">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play3 with-curtain">
<button class="playc thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain3">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play4 with-curtain">
<button class="playd thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain4">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play5 with-curtain">
<button class="playe thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain5">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play6 with-curtain">
<button class="playf thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain6">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play7 with-curtain">
<button class="playg thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain7">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play8 with-curtain">
<button class="playh thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain8">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play9 with-curtain">
<button class="playi thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain9">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
<use href="#exit" />
</svg>
</button>
</div>
</div>
</div>

Just do this small fix to exit handler.
function exitClickHandler(evt) {
resetPage();
evt.currentTarget
.closest(".inner-container")
.querySelector(".sliding-panels")
.removeAttribute("hidden"); //remove hidden attribute on exit
}
https://jsfiddle.net/h9yfd1nv/

Captions in Bootstrap Carousel animate diagonally instead of vertically

I have a Bootstrap 5 carousel with three slides, each with two lines of captions. The captions are supposed to move vertically up and down out of frame each time a slide changes. But since they are attached to the slides, which move horizontally, they end up moving out of frame diagonally.
Is there a way to fix this?
I've tried to compensate by moving the captions horizontally in the opposite direction, but that just results in them entering the frame diagonally on the next slide.
const topcap = document.querySelectorAll(".caption-top");
const bottomcap = document.querySelectorAll(".caption-bottom");
const SlideClass = ("slide");
var TCarousel = document.querySelector('#TestCarousel');
TCarousel.addEventListener('slide.bs.carousel', function() {
topcap.forEach(cap => cap.classList.add(SlideClass));
bottomcap.forEach(cap => cap.classList.add(SlideClass));
});
TCarousel.addEventListener('slid.bs.carousel', function() {
topcap.forEach(cap => cap.classList.remove(SlideClass));
bottomcap.forEach(cap => cap.classList.remove(SlideClass));
});
.carousel-inner .carousel-item {
transition: transform 1s ease;
}
.carousel-caption {
position: absolute;
left 0;
top: 33%;
color: white;
text-shadow: 1px 1px 2px rgba(2, 15, 19, 0.70);
font-family: 'Julius Sans One';
font-style: normal;
font-weight: 400;
font-size: 4.5vw;
transition: 1s ease;
}
.caption-top {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
opacity: 1;
transition: 1s ease;
}
.caption-top.slide {
font-size: 2vw;
top: -70%;
opacity: 1;
}
.caption-bottom {
position: relative;
top: 15%;
left: 0;
width: 100%;
text-align: center;
opacity: 1;
transition: 1s ease;
}
.caption-bottom.slide {
font-size: 2vw;
top: 140%;
opacity: 1;
}
#media (min-width: 993px) and (max-width: 1200px) {
.carousel-inner .carousel-item {
margin-top: 70px;
}
}
#media (max-width: 992px) {
.carousel-inner .carousel-item {
margin-top: 52px;
}
}
#media (max-width: 776px) {
.carousel-caption {
font-size: 5vw;
}
.caption-top-slide,
.caption-bottom-slide {
font-size: 2vw;
}
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Carousel text anim</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid p-0 mb-5" id="carousel">
<section class="slideshow">
<div id="TestCarousel" class="carousel slide carousel-slide" data-bs-ride="carousel" data-bs-interval="2000" data-bs-pause="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://cutewallpaper.org/21/black-1920x1080-wallpaper/Dark-Desktop-Backgrounds-1920x1080-,-Best-Background-Images-.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<span id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</span>
<span class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</span>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<span class="h1-carousel edit1 mb-5 caption-top">UP TOP</span>
<span class="h1-carousel mb-5 caption-bottom">DOWN LOW</span>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<span class="h1-carousel edit1 mb-5 caption-top">OVER &</span>
<span class="h1-carousel mb-5 caption-bottom">UNDER</span>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#TestCarousel" data-bs-slide="prev">
<span class="carousel-control carousel-control-prev-icon" style="display: none" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#TestCarousel" data-bs-slide="next">
<span class="carousel-control carousel-control-next-icon" style="display: none" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
</body>

Animate captions and slides separately in Bootstrap 5 carousel?

Novice coder, doing this as a (self-imposed) excercise.
I have a bootstrap 5 carousel with three slides with two lines of captions each. Each time a slide leaves the window, the top caption moves up, and the bottom caption moves down. Then with the next slide, the new captions move into place in the reverse direction.
I've almost got it, but I'm stuck on one last problem: since the caption div is within the slide div, the captions inherit the sliding animation, making them move diagonally when the slides change. In addition, the slides don't stick together. There's a bit of white space between them when they change. The interference apparently goes both ways.
I've tried just taking the caption div out of the slide div and putting it after it, but then all captions that appear after the active slides overlap.
Is there a good way to separate the two divs so they don't interfere with each other?
Here's a codepen where you can see the problem: https://codepen.io/AlexanderSplat/pen/YzZvEaM
And here's the same one, but with the caption divs taken out of the slide divs, so you can see what it should look like (except for the overlapping text): https://codepen.io/AlexanderSplat/pen/vYxROqo
The same in code snippets (which aren't working for me right now, but I assume that's just due to the Fastly disruption from a few minutes ago):
Bad transitions:
const topcap = document.querySelectorAll(".carousel-caption");
const bottomcap = document.querySelectorAll(".caption-bottom");
const slideclass = ("slide");
var TACarousel = document.querySelector("#CarouselTextAnim");
TACarousel.addEventListener("slide.bs.carousel", function() {
topcap.forEach(cap => cap.classList.add(slideclass));
bottomcap.forEach(cap => cap.classList.add(slideclass));
});
TACarousel.addEventListener("slid.bs.carousel", function() {
topcap.forEach(cap => cap.classList.remove(slideclass));
bottomcap.forEach(cap => cap.classList.remove(slideclass));
});
.carousel-inner .carousel-item {
transition: transform 2s ease;
}
.h1-carousel {
width: 100%;
text-align: center;
color: white;
text-shadow: 1px 1px 2px rgba(2, 15, 19, 0.70);
font-family: 'Julius Sans One';
font-style: normal;
font-weight: 400;
font-size: 4vw;
transition: 0.4s;
}
.carousel-caption {
position: absolute;
top: 40%;
opacity: 1;
transition: 1s;
}
.carousel-caption.slide {
top: 0;
opacity: 1;
}
.caption-bottom {
position: relative;
bottom: 4vh;
opacity: 1;
transition: 1s;
}
.caption-bottom.slide {
bottom: -90vh;
opacity: 1;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Top Motion Productions</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/v4-shims.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="container-fluid" style="padding: 0" id="carousel">
<section class="slideshow">
<div id="CarouselTextAnim" class="carousel slide carousel-slide" data-bs-ride="carousel" data-bs-interval="2000" data-bs-pause="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://cutewallpaper.org/21/black-1920x1080-wallpaper/Dark-Desktop-Backgrounds-1920x1080-,-Best-Background-Images-.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</h1>
<h1 class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</h1>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top">UP TOP</h1>
<h1 class="h1-carousel mb-5 caption-bottom">DOWN LOW</h1>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top">OVER</h1>
<h1 class="h1-carousel mb-5 caption-bottom">UNDER</h1>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="prev">
<span class="carousel-control 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="#CarouselTextAnim" data-bs-slide="next">
<span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
</body>
Good transitions, but overlapping letters:
const topcap = document.querySelectorAll(".carousel-caption");
const bottomcap = document.querySelectorAll(".caption-bottom");
const slideclass = ("slide");
var TACarousel = document.querySelector("#CarouselTextAnim");
TACarousel.addEventListener("slide.bs.carousel", function() {
topcap.forEach(cap => cap.classList.add(slideclass));
bottomcap.forEach(cap => cap.classList.add(slideclass));
});
TACarousel.addEventListener("slid.bs.carousel", function() {
topcap.forEach(cap => cap.classList.remove(slideclass));
bottomcap.forEach(cap => cap.classList.remove(slideclass));
});
.carousel-inner .carousel-item {
transition: transform 1s ease;
}
.h1-carousel {
width: 100%;
text-align: center;
color: white;
text-shadow: 1px 1px 2px rgba(2, 15, 19, 0.70);
font-family: 'Julius Sans One';
font-style: normal;
font-weight: 400;
font-size: 4vw;
transition: 0.4s;
}
.carousel-caption {
position: absolute;
top: 40%;
opacity: 1;
transition: 0.4s;
}
.carousel-caption.slide {
top: 0;
opacity: 0;
transition: 0.4s;
}
.caption-bottom {
position: relative;
bottom: 4vh;
opacity: 1;
transition: 0.4s;
}
.caption-bottom.slide {
bottom: -90vh;
opacity: 0;
transition: 0.4s;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Top Motion Productions</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/v4-shims.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="container-fluid" style="padding: 0" id="carousel">
<section class="slideshow">
<div id="CarouselTextAnim" class="carousel slide carousel-slide" data-bs-ride="carousel" data-bs-interval="2000" data-bs-pause="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://cutewallpaper.org/21/black-1920x1080-wallpaper/Dark-Desktop-Backgrounds-1920x1080-,-Best-Background-Images-.jpg" class="img-carousel d-block w-100" alt="">
</div>
<div class="carousel-caption">
<h1 id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</h1>
<h1 class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</h1>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
</div>
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top">UP TOP</h1>
<h1 class="h1-carousel mb-5 caption-bottom">DOWN LOW</h1>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
</div>
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top">OVER</h1>
<h1 class="h1-carousel mb-5 caption-bottom">UNDER</h1>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="prev">
<span class="carousel-control 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="#CarouselTextAnim" data-bs-slide="next">
<span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
</body>

I've made many, many changes to your (second) code.
HTML
All unnecessary imports (animated.css, jquery, font-awesome) have been removed.
In the h1 with classes caption-top and caption-bottom that don't correspond to the first slide, the class hidden has been added.
CSS
.carousel-caption was replaced by .carousel-top, but another .carousel-caption was added to set default top property.
.slide was replaced by .hidden, for better understanding.
Previous values have been put as comments.
JS
Here is the fun! Changes and explanation:
slideclass was replaced with hiddenClass.
All selected .caption-top have been set to topcap, and all .carousel-caption to captions.
The currentItem and nextItem variables have the functionality to store the current and next .carousel-caption element of each slide.
On DOMContentLoaded, the first .carousel-caption element (zero position), corresponding to the first slide, has been set to currentItem.
In both event types slide.bs.carousel and slid.bs.carousel the relatedTarget property is used.
Bootstrap's documentation says:
relatedTarget: The DOM element that is being slid into place as the active item.
nextElementSibling here refers to the element immediately following it. Looking at the html, we know that after a .caption-item there is a .carousel-caption. I think firstElementChild and lastElementChild need no explanation :)
At slid.bs.carousel, nextItem is shown, and at slide.bs.carousel, currentItem is hidden (as it transitions to the next slide).
const topcap = document.querySelectorAll(".caption-top");
const bottomcap = document.querySelectorAll(".caption-bottom");
const captions = document.querySelectorAll(".carousel-caption");
const hiddenClass = "hidden";
var TACarousel = document.querySelector("#CarouselTextAnim");
let currentItem, nextItem;
document.addEventListener("DOMContentLoaded", function(e) {
currentItem = captions[0];
});
TACarousel.addEventListener("slid.bs.carousel", function(e) {
currentItem = e.relatedTarget.nextElementSibling;
nextItem.firstElementChild.classList.remove(hiddenClass);
nextItem.lastElementChild.classList.remove(hiddenClass);
});
TACarousel.addEventListener("slide.bs.carousel", function(e) {
nextItem = e.relatedTarget.nextElementSibling;
currentItem.firstElementChild.classList.add(hiddenClass);
currentItem.lastElementChild.classList.add(hiddenClass);
});
.carousel-inner .carousel-item {
transition: transform 1s ease;
}
.h1-carousel {
width: 100%;
text-align: center;
color: white;
text-shadow: 1px 1px 2px rgba(2, 15, 19, 0.7);
font-family: "Julius Sans One";
font-style: normal;
font-weight: 400;
font-size: 4vw;
/*transition: 0.4s;*/
}
.carousel-caption {
top: 40%;
}
.caption-top {
position: relative; /*absolute*/
top: 0; /*<= added*/
opacity: 1;
transition: .4s;
}
.caption-top.hidden {
top: -90vh; /*0*/
opacity: 0;
transition: .4s;
}
.caption-bottom {
position: relative;
bottom: 4vh;
opacity: 1;
transition: .4s;
}
.caption-bottom.hidden {
bottom: -90vh;
opacity: 0;
transition: .4s;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Top Motion Productions</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid" style="padding: 0" id="carousel">
<section class="slideshow">
<div id="CarouselTextAnim" class="carousel slide carousel-slide" data-bs-ride="carousel" data-bs-interval="2000" data-bs-pause="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://cutewallpaper.org/21/black-1920x1080-wallpaper/Dark-Desktop-Backgrounds-1920x1080-,-Best-Background-Images-.jpg" class="img-carousel d-block w-100" alt="">
</div>
<div class="carousel-caption">
<h1 id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</h1>
<h1 class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</h1>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
</div>
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top hidden">UP TOP</h1>
<h1 class="h1-carousel mb-5 caption-bottom hidden">DOWN LOW</h1>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
</div>
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top hidden">OVER</h1>
<h1 class="h1-carousel mb-5 caption-bottom hidden">UNDER</h1>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="prev">
<span class="carousel-control 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="#CarouselTextAnim" data-bs-slide="next">
<span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
</body>

const topcap = document.querySelectorAll(".carousel-caption");
const bottomcap = document.querySelectorAll(".caption-bottom");
const slideclass = ("slide");
var TACarousel = document.querySelector("#CarouselTextAnim");
TACarousel.addEventListener("slide.bs.carousel", function() {
topcap.forEach(cap => cap.classList.add(slideclass));
bottomcap.forEach(cap => cap.classList.add(slideclass));
});
TACarousel.addEventListener("slid.bs.carousel", function() {
topcap.forEach(cap => cap.classList.remove(slideclass));
bottomcap.forEach(cap => cap.classList.remove(slideclass));
});
.carousel-inner .carousel-item {
transition: transform 1s ease;
}
.h1-carousel {
width: 100%;
text-align: center;
color: white;
text-shadow: 1px 1px 2px rgba(2, 15, 19, 0.70);
font-family: 'Julius Sans One';
font-style: normal;
font-weight: 400;
font-size: 4vw;
transition: 0.4s;
}
.carousel-caption {
position: absolute;
top: 40%;
opacity: 1;
transition: 1s;
}
.carousel-caption.slide {
top: 0;
opacity: 1;
}
.caption-bottom {
position: relative;
bottom: 4vh;
opacity: 1;
transition: 1s;
}
.caption-bottom.slide {
bottom: -90vh;
opacity: 1;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Top Motion Productions</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/v4-shims.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="container-fluid" style="padding: 0" id="carousel">
<section class="slideshow">
<div id="CarouselTextAnim" class="carousel slide carousel-slide" data-bs-ride="carousel" data-bs-interval="2000" data-bs-pause="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://cutewallpaper.org/21/black-1920x1080-wallpaper/Dark-Desktop-Backgrounds-1920x1080-,-Best-Background-Images-.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</h1>
<h1 class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</h1>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top">UP TOP</h1>
<h1 class="h1-carousel mb-5 caption-bottom">DOWN LOW</h1>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top">OVER</h1>
<h1 class="h1-carousel mb-5 caption-bottom">UNDER</h1>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="prev">
<span class="carousel-control 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="#CarouselTextAnim" data-bs-slide="next">
<span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
</body>
Just change the 2s to 1s transition speed.Please check the snippet

Having problem with Slick slider and Bootstrap (image is resized after using the Slick js function)

I am trying to create a product category container with a slick right & left carousel. However, using the slick js function my images get smaller in sizeenter image description hereenter image description here. I am using Bootstrap for classes (container-fluid, row, col-md-3 etc) everything looks good in shape but once I add the slick function (second slider) my product category images get smaller. I was trying to figure it out what is the issue but could not... any help will be appreciated
/*banner slider*/
$('.slider-one')
.not(".slick-intialized")
.slick({
autoplay: false,
autoplaySpeed: 3000,
dots: true,
prevArrow: ".site-slider .slider-btn .prev",
nextArrow: ".site-slider .slider-btn .next",
});
/*second slider*/
$('.slider-two')
.not(".slick-intialized")
.slick({
prevArrow: ".site-slider-two .prev",
nextArrow: ".site-slider-two .next",
slidesToShow:5,
slidesToScroll:1,
autoplaySpeed:3000
});
/*root varialbe*/
:root{
--light-gray: #2b3032a1;
--primary-color: #45ccb8;
--border: #2b303218;
--text-color: #ff686b;
--roboto: "Roboto", sans-serif;
--gugi: "Gugi", cursive;
--sofia: "Sofia", cursive;
}
/*Global css classes*/
.primary-color{
color: var(--primary-color);
}
.bg-primary-color{
background-color: var(--primary-color) !important;
}
.text-color{
color: var(--text-color);
}
.font-roboto{
font-family: var(--roboto);
}
.lightblue{
color: lightblue;
}
/*header*/
header{
background-color: var(--primary-color);
font-family: var(--roboto);
}
header .site-title{
font-family: var(--gugi);
}
.container .dropdown-toggle,
.container .dropdown-item{
font-size: 0.7em;
}
.header-links a{
font-size: 0.9em;
text-decoration: none;
color: white;
}
/*Slider one */
.site-slider{
position: relative;
}
.position-top{
position: absolute;
top: 50%;
}
.site-slider .slider-btn .prev,
.site-slider .slider-btn .next{
background-color: var(--primary-color);
padding: 1rem 1.5rem;
border-radius: 10rem;
color: white;
margin: 0 1rem;
opacity: 0;
transition: opacity 1s ease;
}
.site-slider:hover .slider-btn .prev,
.site-slider:hover .slider-btn .next{
opacity: 1;
}
.right-0{
right: 0;
}
/*slide dotd*/
.slick-dots li{
color: white;
}
.slick-dots li.slick-active{
transition: scale(2.5);
box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.205);
background-color: white;
border-radius: 100%;
}
/*slider two*/
.site-slider-two{
position: relative;
height: 30%;
}
.site-slider-two .product{
height: 25rem;
position: relative;
overflow: hidden;
}
.site-slider-two .product img{
width: 90%;
margin: auto;
}
.site-btn.btn-span{
padding: 0.8rem 1.9rem;
border-radius: 4rem;
border: 1px solid var(--primary-color);
background-color: white;
color: var(--light-gray);
}
.slider-two .slick-track .product:hover span{
background-color: var(--primary-color);
}
/*slider wrapper test*/
.post-slider{
border: 1px black solid;
position: relative;
}
.post-slider .post-wrapper{
width: 84%;
height: 350px;
margin: 0 auto;
border: 1px red dotted;
}
.post-slider .post-wrapper .post{
width: 300px;
height: 350px;
display: inline-block;
}
.post-slider .slider-title{
text-align: center;
margin: 30px auto;
}
.post-slider .post img{
text-align: center;
margin: 0 10px;
width: 480px;
height: 340px;
}
.post-slider .prev{
position: absolute;
top: 50%;
}
.post-slider .next{
position: absolute;
top: 50%;
}
.right-0{
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Store</title>
<!--Bootstrap CND-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--Font Awesome CND-->
<script src="https://kit.fontawesome.com/36eac67c14.js" crossorigin="anonymous"></script>
<!--slick Slider-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<!--animate css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<!--Google fonts-->
<link
href="https://fonts.googleapis.com/css2?family=Anton&family=Gugi&family=Lato&family=Roboto&family=Sofia&display=swap"
rel="stylesheet">
<!--Custom Stylesheet-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--header-->
<header>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12 col-12">
<div class="btn-group">
<button class="btn border border-dark dropdown-toggle my-md-4 my-2 " data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
USD
</button>
<div class="dropdown-menu">
ERU-Euro
</div>
</div>
</div>
<div class="col-md-4 col-12 text-center">
<h2 class="my-md-3 site-title text-white">Online Shopping</h2>
</div>
<div class="col-md-4 col-12 text-right">
<p class="my-md-4 header-links">
Sign In
Create an Account
</p>
</div>
</div>
</div>
</header>
<!--/header-->
<main>
<!--banner slider-->
<div class="container-fluid p-0">
<div class="site-slider">
<div class="slider-one">
<div>
<img src="./assets/item-1.jpg" class="img-fluid" alt="Banner-1" />
</div>
<div>
<img src="./assets/item-2.jpg" class="img-fluid" alt="Banner-2" />
</div>
<div>
<img src="./assets/item-3.jpg" class="img-fluid" alt="Banner-3" />
</div>
</div>
<div class="slider-btn">
<span class="prev position-top"><i class="fas fa-chevron-left"></i></span>
<span class="next position-top right-0"><i class="fas fa-chevron-right"></i></span>
</div>
</div>
</div>
<!--banner slider-->
<!--Second slider-->
<div class="container-fluid">
<div class="site-slider-two px-md-4">
<div class="row slider-two text-center">
<div class="col-md-2 product pt-md-5 pt4">
<img src="./assets/id-9-cat-1.jpg" class="img-fluid" alt="product 1">
<span class="border site-btn btn-span">SOFA & CHAIRS</span>
</div>
<div class="col-md-2 product pt-md-5 pt4">
<img src="./assets/id-9-cat-2.jpg" class="img-fluid" alt="product 2">
<span class="border site-btn btn-span">SOFA & CHAIRS</span>
</div>
<div class="col-md-2 product pt-md-5 pt4">
<img src="./assets/id-9-cat-3.jpg" class="img-fluid" alt="product 3">
<span class="border site-btn btn-span">SOFA & CHAIRS</span>
</div>
<div class="col-md-2 product pt-md-5 pt4">
<img src="./assets/id-9-cat-4.jpg" class="img-fluid" alt="product 4">
<span class="border site-btn btn-span">SOFA & CHAIRS</span>
</div>
<div class="col-md-2 product pt-md-5 pt4">
<img src="./assets/id-9-cat-5.jpg" class="img-fluid" alt="product 5">
<span class="border site-btn btn-span">SOFA & CHAIRS</span>
</div>
<div class="col-md-2 product pt-md-5 pt4">
<img src="./assets/id-9-cat-3.jpg" class="img-fluid" alt="product 5">
<span class="border site-btn btn-span">SOFA & CHAIRS</span>
</div>
</div>
<div class="slider-btn">
<span class="prev position-top"><i class="fas fa-chevron-left fa-2x text-secondary"></i></span>
<span class="next position-top right-0"><i class="fas fa-chevron-right fa-2x text-secondary"></i></span>
</div>
</div>
</div>
<!--Second slider-->
</main>
<footer></footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<!--slick slider-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!--custom js-->
<script src="./js/main.js"></script>
</body>
</html>

you got col-md-2 (bootstrap CSS) class on your .slider-two > .product items. which gives the columns a low width setting and conflicts with the behaviour of the slick slider.
when removed it shall work better.
thats messed up. if possible clean up there.

How to make responsive youtube video card/image with no black bars on top and bottom?

I want to display the youtube video in card image with no black bars on top and bottom of it. Here is the code that I have for full card:
.media-video-container {
position: relative;
overflow: hidden;
}
.media-video-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="list p-y">
<div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 video" *ngFor="let item of media">
<a class="block box card-item b-a media-item text-left" target="blank" href="{{item?.url}}" title="{{item?.name}}">
<span class="block clear img-card b-b b-light text-center media-video-container ">
<img class="h-auto h-full w-full" src="{{getMediaImageUrl(item)}}" alt="{{item?.name}}"/>
</span>
<div class="box-body p-y-sm">
<div class="block clear text-sm">
{{item?.name}}
</div>
</div>
<button *ngIf="item.type == 'video'" class="ytp-button ytp-large-play-button" aria-label="Play">
<svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%">
<path class="ytp-large-play-button-bg" d="..."
fill="#212121" fill-opacity="0.8"></path>
<path d="M 45,24 27,14 27,34" fill="#fff"></path>
</svg>
</button>
</a>
</div>
</div>
I would really appreciate any help :)
NOTE: I have already tried:
Responsive fullscreen youtube video with no black bars?
Responsive video iframes (keeping aspect ratio), with only css?

Try this, Thil will work, adjust the scale value as you wanted.
You can learn more about youtube image thumbnails here
.media-video-container {
position: relative;
overflow: hidden;
}
.media-video-container img {
/*position: absolute;
top: 0;
left: 0;*/
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
-webkit-transform: scaleY(1.2);
-moz-transform: scaleY(1.2);
-ms-transform: scaleY(1.2);
transform: scaleY(1.2);
}
<div class="list p-y">
<div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 video" *ngFor="let item of media">
<a class="block box card-item b-a media-item text-left" target="blank" href="{{item?.url}}" title="{{item?.name}}">
<span class="block clear img-card b-b b-light text-center media-video-container ">
<img class="h-auto h-full w-full" src="{{getMediaImageUrl(item)}}" alt="{{item?.name}}"/>
</span>
<div class="box-body p-y-sm">
<div class="block clear text-sm">
{{item?.name}}
</div>
</div>
<button *ngIf="item.type == 'video'" class="ytp-button ytp-large-play-button" aria-label="Play">
<svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%">
<path class="ytp-large-play-button-bg" d="..."
fill="#212121" fill-opacity="0.8"></path>
<path d="M 45,24 27,14 27,34" fill="#fff"></path>
</svg>
</button>
</a>
</div>
</div>