Animate captions and slides separately in Bootstrap 5 carousel? - javascript

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

Related

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>

script.js not linked to html?

Here is my html:
Hello i dont get my Javascript working i used codepen.io to write it and it worked. but when i want to use it on my webhost it isnt responding. I try to use it local but its not working. I googled the problem and its proberly something about the place of but im not sure about that. Can someone help me out and teach me how i can fix this? its a problem that i get alot of times.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Responsive Portfolio Template">
<meta name="author" content="Sandro Swabedissen">
<title>Portfolio</title>
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><i class="fa fa-globe"></i></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container-fluid splash" id="splash">
<div class="container">
<img src="https://i.imgur.com/dqhQX0E.png" alt="Portrait of Mr. Swabedissen" class="profile-image">
<h1>HELLO!</h1>
<h1 class="intro-text"><span class="lead" id="typed">I am a </span></h1>
<span class="continue"><i class="fa fa-angle-down"></i></span>
</div>
</div>
<!-- About Section -->
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>About Me</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p class="content-text">Hi! I'm Sandro Swabedissen I'm 18 years old and I'm from the Netherlands and I live in Apeldoorn. I study IT support at ROC Aventus in Deventer.
</p>
</div>
<div class="col-lg-4">
<p class="content-text">I like to Photograph and longboarding and basic website coding. I spent most of my time behind the desk or hanging out with my friends.</p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center contact-button">
<a href="#contact" class="btn btn-lg btn-outline">
<i class="fa fa-envelope"></i> Contact Me
</a>
</div>
</div>
</div>
</section>
<!-- Portfolio -->
<div class="container-fluid portfolio-container-holder content-section" id="portfolio">
<div class="portfolio-container container">
<h1 class="text-center">My Portfolio</h1>
<hr class="star-portfolio">
<div class="row">
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact form -->
<div class="container-fluid contact-me-container content-section" id="contact">
<div class="container">
<h1 class="intro-text text-center">Contact Me</h1>
<hr class="star-light">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-at"></i></div>
<input type="text" class="form-control" id="email" placeholder="Email ID">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-phone"></i></div>
<input type="text" class="form-control" id="phone" placeholder="Phone Number">
</div>
</div>
</div>
<div class="col-sm-12">
<textarea class="form-control" rows="5" placeholder="Message"></textarea>
</div>
</div>
<div class="text-center">
<button class="btn btn-default submit-button btn-lg btn-primary"><i class="fa fa-paper-plane"></i> Send</button>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container footer-container">
<div class="row footer-row">
<div class="col-xs-12 col-sm-6 col-md-6 text-center">
<h4 class="text-center">Find me here</h4>
<address>
<strong><i class="fa fa-location-arrow"></i> Swabedissen Inc.</strong><br>Netherlands,<br>Gelderland, Apeldoorn<br><br>
<a class="tel" href="tel:0636597738" type="tel"><i class="fa fa-mobile"></i><span> +31 06-36597738</span></a>
</address>
</div>
<div class="col-xs-12 col-md-6 col-sm-6 social-section">
<div class="text-center">
<h4 class="text-center">Also, I can be found here</h4>
<div class="text-center social-buttons">
<a href="https://instagram.com/simplysuvi" class="btn btn-default btn-lg social-button link-instagram"><i class="fa fa-instagram"></i>
</a>
</div><hr class="footer-hr">
<h4 class="author">Made with <i class="fa fa-heart"></i> by <strong>Sandro Swabedissen</strong></h4>
</div>
</div>
</div><hr class="copyright">
<h4><i class="fa fa-copyright"></i> COPYRIGHTS 2012 ALL RIGHTS RESERVED</h4>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
</html>
Here is my css:
* {
box-sizing: border-box;
}
#menu
{
background-color: #ffffff79;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
ul.navbar-nav {
float:right;
text-align:center;
}
ul.navbar-nav li
{
padding: 0 10px;
}
#media only screen and (max-width:767px)
{ ul.navbar-nav { float:none; } }
.container-fluid {
padding: 0 1em;
}
.navbar-nav li a
{
color:black!important;
font-size:1.2em;
font-family: Century gothic,sans-serif;
font-weight:600;
transition: 0.4s ease;
}
.navbar-nav li a:hover
{
color:#fff!important;
background-color:black!important;
}
.navbar-brand {
padding:10px 15px!important;
}
a.navbar-brand .fa-globe
{
font-size: 30px;
color: black;
transition:0.5s ease;
}
a.navbar-brand .fa-globe:hover
{
color: #3935e6;
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: black!important;
}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
background-color: #fff!important;
}
.container {
margin: 0 auto;
max-width: 996px;
}
.splash {
background:url("https://photos.gurushots.com/unsafe/0x0/351cef5284542fdc28a01f8d2c67c3be/3_ea1623d74f3828136d8e55e6cd5501e1.jpg") no-repeat fixed center bottom;
background-size: cover;
color: #fff;
}
.splash .container {
padding-top: 15vh; /* No JS fallback*/
padding-bottom: 10vh; /* No JS fallback*/
}
.profile-image {
border-radius: 50%;
display: block;
max-height:250px;
max-width: 250px;
margin: 0 auto 1em;
width: 100%;
opacity: 0.85;
}
.splash h1 {
font-size: 40px;
margin-bottom: .15em;
text-align: center;
}
.splash .lead, .splash .continue {
display: inline-block;
text-align: center;
}
h1.intro-text
{
margin:0;
color:#fff;
}
.splash .lead {
font-size: 30px;
margin-bottom: 1em;
font-family: Rockwell;
}
.navbar-inverse
{
border:none!important;
}
#keyframes blink
{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-webkit-keyframes blink
{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-moz-keyframes blink
{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-ms-keyframes blink
{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-o-keyframes blink
{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
/* code for animated blinking cursor */
#typed-cursor
{
opacity: 1;
font-size: 40px;
color: #fff;
font-weight: 50;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
-o-animation: blink 1s infinite;
animation: blink 1s infinite;
}
.splash .continue {
font-size: 3em;
display:block;
}
.splash .continue a {
border: 2px solid #fff;
border-radius: 100%;
color: #fff;
display: inline-block;
text-decoration: none;
width: 40px;
height:40px;
font-size:30px;
}
.splash .continue a:hover {
background-color: rgba(255, 255, 255, .25);
}
#about,#portfolio,#contact
{
padding-top:4em!important;
}
section h2 {
margin: 0;
font-size: 3em;
}
section.success {
color: #fff;
background: rgb(13, 79, 136);
padding: 2%;
}
section.success a
{
color:black;
transition: 0.4s ease;
}
section.success a:hover {
outline: 0;
color: #fff;
border: 2px solid #fff;
}
.contact-button
{
padding-bottom:2%;
}
hr.star-light,hr.star-portfolio {
margin: 25px auto 30px;
padding: 0;
max-width: 250px;
border: 0;
border-top: solid 3px;
text-align: center;
}
hr.star-light:after,hr.star-portfolio:after {
content: "\f005";
display: inline-block;
position: relative;
top: -.8em;
padding: 0 .25em;
font-family: FontAwesome;
font-size: 2em;
}
hr.star-light {
border-color: #fff;
}
hr.star-portfolio {
border-color: black;
}
hr.star-portfolio:after {
color: black;
background-color: #eee;
}
hr.star-light:after {
color: #fff;
background-color: rgb(13, 79, 136);
}
p.content-text { font-size: 25px; }
/* PORTFOLIO */
.portfolio-card{
box-shadow: 0px 2px 5px #888888;
background: #eee;
border-radius: 4px;
}
.portfolio-card:hover{
box-shadow: 0px 10px 10px #888888;
cursor: pointer
}
.portfolio-container-holder{
background: #eee;
padding-bottom: 20px;
}
.portfolio-card-holder{
padding: 5px;
margin-bottom: 5px;
}
.portfolio-img{
width: 100%;
border-radius: 4px 4px 0 0;
}
.portfolio-img-desc{
position: relative;
bottom: 0px;
left: 0px;
right: 0px;
background: #fff;
color: #000;
text-align: center;
padding: 5px;
}
/* Contact */
.contact-me-container{
padding:3%;
background: rgb(13, 79, 136);
}
.fa-user,.fa-at,.fa-phone
{
color:black;
}
.submit-button{
margin-top: 10px;
margin-bottom: 10px;
}
/* ========================
Footer
======================== */
footer {
background-color: #2C3E50;
color: #fff;
font-size: 1.5em;
text-align: center;
padding:3%;
}
a.tel,a.tel:hover
{
text-decoration:none;
color:#fff;
}
a.social-button {
background: #fff;
font-size: 20px;
border-radius: 50%;
margin: 5px;
}
.address-container{
display: inline-block;
margin: 0 auto;
}
a.link-facebook,a.link-twitter,a.link-codepen,a.link-linkedin,a.link-instagram
{
transition:0.4s ease;
}
a.link-twitter
{
color:#1DA1F2;
}
a.link-facebook
{
color: #3b5998;
}
a.link-linkedin
{
color:#007bb6;
}
a.link-instagram
{
color:#e95950;
}
a.link-facebook:hover{
background-color: #3b5998;
color: #fff;
}
a.link-twitter:hover{
background-color: #1DA1F2;
color: #fff;
}
a.link-codepen:hover{
background-color: black;
color: #fff;
}
a.link-linkedin:hover{
background-color: #007bb6;
color: #fff;
}
a.link-instagram:hover{
background-color: #e95950;
color: #fff;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: transparent!important;
}
.fa-heart {
color:#f32323;
}
h4.author
{
letter-spacing:4px;
}
hr.footer-hr
{
width:150px;
}
hr.copyright
{
opacity:0.4;
}
Here is my script.js:
$( window ).resize( function() {
centerSplash();
});
!function($){
"use strict";
var Typed = function(el, options){
// chosen element to manipulate text
this.el = $(el);
// options
this.options = $.extend({}, $.fn.typed.defaults, options);
// text content of element
this.text = this.el.text();
// typing speed
this.typeSpeed = this.options.typeSpeed;
// amount of time to wait before backspacing
this.backDelay = this.options.backDelay;
// input strings of text
this.strings = this.options.strings;
// character number position of current string
this.strPos = 0;
// current array position
this.arrayPos = 0;
// current string based on current values[] array position
this.string = this.strings[this.arrayPos];
// number to stop backspacing on.
// default 0, can change depending on how many chars
// you want to remove at the time
this.stopNum = 0;
// Looping logic
this.loop = this.options.loop;
this.loopCount = this.options.loopCount;
this.curLoop = 1;
if (this.loop === false){
// number in which to stop going through array
// set to strings[] array (length - 1) to stop deleting after last string is typed
this.stopArray = this.strings.length-1;
}
else{
this.stopArray = this.strings.length;
}
// All systems go!
this.init();
this.build();
}
Typed.prototype = {
constructor: Typed
, init: function(){
// begin the loop w/ first current string (global self.string)
// current string will be passed as an argument each time after this
this.typewrite(this.string, this.strPos);
}
, build: function(){
this.el.after("<span id=\"typed-cursor\">|</span>");
}
// pass current string state to each function
, typewrite: function(curString, curStrPos){
// varying values for setTimeout during typing
// can't be global since number changes each time loop is executed
var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed;
var self = this;
// ------------- optional ------------- //
// backpaces a certain string faster
// ------------------------------------ //
// if (self.arrayPos == 1){
// self.backDelay = 50;
// }
// else{ self.backDelay = 500; }
// containg entire typing function in a timeout
setTimeout(function() {
// make sure array position is less than array length
if (self.arrayPos < self.strings.length){
// start typing each new char into existing string
// curString is function arg
self.el.text(self.text + curString.substr(0, curStrPos));
// check if current character number is the string's length
// and if the current array position is less than the stopping point
// if so, backspace after backDelay setting
if (curStrPos > curString.length && self.arrayPos < self.stopArray){
clearTimeout(clear);
var clear = setTimeout(function(){
self.backspace(curString, curStrPos);
}, self.backDelay);
}
// else, keep typing
else{
// add characters one by one
curStrPos++;
// loop the function
self.typewrite(curString, curStrPos);
// if the array position is at the stopping position
// finish code, on to next task
if (self.loop === false){
if (self.arrayPos === self.stopArray && curStrPos === curString.length){
// animation that occurs on the last typed string
// fires callback function
var clear = self.options.callback();
clearTimeout(clear);
}
}
}
}
// if the array position is greater than array length
// and looping is active, reset array pos and start over.
else if (self.loop === true && self.loopCount === false){
self.arrayPos = 0;
self.init();
}
else if(self.loopCount !== false && self.curLoop < self.loopCount){
self.arrayPos = 0;
self.curLoop = self.curLoop+1;
self.init();
}
// humanized value for typing
}, humanize);
}
, backspace: function(curString, curStrPos){
// varying values for setTimeout during typing
// can't be global since number changes each time loop is executed
var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed;
var self = this;
setTimeout(function() {
// ----- this part is optional ----- //
// check string array position
// on the first string, only delete one word
// the stopNum actually represents the amount of chars to
// keep in the current string. In my case it's 14.
if (self.arrayPos == 1, 2, 3, 4){
self.stopNum = 0;
}
//every other time, delete the whole typed string
//else{
//self.stopNum = 0;
//}
// ----- continue important stuff ----- //
// replace text with current text + typed characters
self.el.text(self.text + curString.substr(0, curStrPos));
// if the number (id of character in current string) is
// less than the stop number, keep going
if (curStrPos > self.stopNum){
// subtract characters one by one
curStrPos--;
// loop the function
self.backspace(curString, curStrPos);
}
// if the stop number has been reached, increase
// array position to next string
else if (curStrPos <= self.stopNum){
clearTimeout(clear);
var clear = self.arrayPos = self.arrayPos+1;
// must pass new array position in this instance
// instead of using global arrayPos
self.typewrite(self.strings[self.arrayPos], curStrPos);
}
// humanized value for typing
}, humanize);
}
}
$.fn.typed = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('typed')
, options = typeof option == 'object' && option
if (!data) $this.data('typed', (data = new Typed(this, options)))
if (typeof option == 'string') data[option]()
});
}
$.fn.typed.defaults = {
strings: ["Hello, hola, hi! ", "Welcome to my website ", "Go on, scroll down", ":)"],
// typing and backspacing speed
typeSpeed: 50, // speed decreases as number increased
// time before backspacing
backDelay: 100,
// loop
loop: true,
// false = infinite
loopCount: false,
// ending callback function
callback: function(){ null }
}
}(window.jQuery);
$(function(){
$("#typed").typed({
strings: ["web developer","photographer","human being"], //Strings to display when typing
typeSpeed: 40,
backDelay: 600,
loop: true,
// defaults to false for infinite loop
loopCount: false,
callback: function(){ foo(); }
});
function foo(){ console.log("Callback"); }
});

You are running the script in head and expecting all of the document's content to be loaded (for example the typed div). This explains why it works in Codepen but not in your local environment, because Codepen runs the javascript after the html content has been loaded.
To solve this, you can use an event listener to wait for the document to fully load.
The document is not loaded by the time you are trying to find an element with the id typed. Change it to
$(document).ready(function(){
$("#typed").typed({
strings: ["web developer","photographer","human being"], //Strings to display when typing
typeSpeed: 40,
backDelay: 600,
loop: true,
// defaults to false for infinite loop
loopCount: false,
callback: function(){ foo(); }
});
function foo(){ console.log("Callback"); }
});
Docs on document.ready

I was able to fix your web page for you, but there is one thing I cannot fix. I have no idea what you wanted to do with this part of your script.js:
$( window ).resize( function() {
centerSplash();
});
There is no function anywhere called centerSplash. Most of your errors were in your html file, but I fixed them all. The main errors were that you were importing 2 different versions of jQuery and your scripts/links were trying to access local files when they were being run directly through the file system.
With that out of the way, here is your fixed HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Responsive Portfolio Template">
<meta name="author" content="Sandro Swabedissen">
<title>Portfolio</title>
<!-- Bootstrap core CSS -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><i class="fa fa-globe"></i></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container-fluid splash" id="splash">
<div class="container">
<img src="https://i.imgur.com/dqhQX0E.png" alt="Portrait of Mr. Swabedissen" class="profile-image">
<h1>HELLO!</h1>
<h1 class="intro-text"><span class="lead" id="typed">I am a </span></h1>
<span class="continue"><i class="fa fa-angle-down"></i></span>
</div>
</div>
<!-- About Section -->
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>About Me</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p class="content-text">Hi! I'm Sandro Swabedissen I'm 18 years old and I'm from the Netherlands and I live in Apeldoorn. I study IT support at ROC Aventus in Deventer.
</p>
</div>
<div class="col-lg-4">
<p class="content-text">I like to Photograph and longboarding and basic website coding. I spent most of my time behind the desk or hanging out with my friends.</p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center contact-button">
<a href="#contact" class="btn btn-lg btn-outline">
<i class="fa fa-envelope"></i> Contact Me
</a>
</div>
</div>
</div>
</section>
<!-- Portfolio -->
<div class="container-fluid portfolio-container-holder content-section" id="portfolio">
<div class="portfolio-container container">
<h1 class="text-center">My Portfolio</h1>
<hr class="star-portfolio">
<div class="row">
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact form -->
<div class="container-fluid contact-me-container content-section" id="contact">
<div class="container">
<h1 class="intro-text text-center">Contact Me</h1>
<hr class="star-light">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-at"></i></div>
<input type="text" class="form-control" id="email" placeholder="Email ID">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-phone"></i></div>
<input type="text" class="form-control" id="phone" placeholder="Phone Number">
</div>
</div>
</div>
<div class="col-sm-12">
<textarea class="form-control" rows="5" placeholder="Message"></textarea>
</div>
</div>
<div class="text-center">
<button class="btn btn-default submit-button btn-lg btn-primary"><i class="fa fa-paper-plane"></i> Send</button>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container footer-container">
<div class="row footer-row">
<div class="col-xs-12 col-sm-6 col-md-6 text-center">
<h4 class="text-center">Find me here</h4>
<address>
<strong><i class="fa fa-location-arrow"></i> Swabedissen Inc.</strong><br>Netherlands,<br>Gelderland, Apeldoorn<br><br>
<a class="tel" href="tel:0636597738" type="tel"><i class="fa fa-mobile"></i><span> +31 06-36597738</span></a>
</address>
</div>
<div class="col-xs-12 col-md-6 col-sm-6 social-section">
<div class="text-center">
<h4 class="text-center">Also, I can be found here</h4>
<div class="text-center social-buttons">
<a href="https://instagram.com/simplysuvi" class="btn btn-default btn-lg social-button link-instagram"><i class="fa fa-instagram"></i>
</a>
</div><hr class="footer-hr">
<h4 class="author">Made with <i class="fa fa-heart"></i> by <strong>Sandro Swabedissen</strong></h4>
</div>
</div>
</div><hr class="copyright">
<h4><i class="fa fa-copyright"></i> COPYRIGHTS 2012 ALL RIGHTS RESERVED</h4>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
</html>
style.css is the same.
script.js will work as is, but I would comment out those first three lines until you figure out what it is you want to do with the centerSplash thing.
Nice page btw.

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 remove space on right side when in mobile view in Bootstrap 4?

I can't seem to figure out why this won't fit on mobile (seems to kick in around 616 px, a bottom scroll bar shows up). Trying to figure out how to get this to go away at least till 414 px for iPhone and other smartphones). I cut out as much code as I could, but if you need more code context let me know.
// JavaScript Document
$('#carouselExample').on('slide.bs.carousel', modCarousel);
$('#test').on('slide.bs.carousel', modCarousel);
function modCarousel (e) {
var $e = $(e.relatedTarget),
idx = $e.index(),
itemsPerSlide = 3,
$c = $e.closest('.carousel-inner'),
totalItems = $('.carousel-item', $c).length;
if (idx >= totalItems-(itemsPerSlide-1)) {
var it = itemsPerSlide - (totalItems - idx);
for (var i=0; i<it; i++) {
// append slides to end
if (e.direction=="left") {
$('.carousel-item', $c).eq(i).appendTo($c);
}
else {
$('.carousel-item', $c).eq(0).appendTo($c);
}
}
}
};
#charset "utf-8";
#top-nav-row {
background-color: #173A4F;
}
#bottom-nav-row {
background-color: #242122;
}
body {
background-color: #242122;
font-family: 'Roboto', sans-serif;
color: #EEEEEE;
}
#video-bg {
position: relative;
width: auto;
min-width: 100%;
height: auto;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
video {
display: block;
}
.video-container {
width: 100%;
max-height: 500px;
overflow: hidden;
position: static;
top: 0;
right: 0;
z-index: -100;
padding-top: 50px;
}
.overlay-desc {
background: rgba(0,0,0,0);
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
align-items: center;
justify-content: center;
}
.main-logo {
max-height: 27%;
width: 33%;
}
.main-top-nav {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
background-color: #173A4F;
}
.recent-pro-clip{
padding-top: 50px;
padding-left: 45px;
}
.recent-news{
padding-top: 50px;
}
.no-pad {
padding-left: 0px;
padding-right: 0px;
}
.navbar-toggler {
border: none;
outline: none;
}
.navbar-toggler-icon {
border: none;
outline: none;
}
.navbar-brand {
padding-bottom: 13px;
}
.recent-news-desc {
font-size: 0.8rem;
text-align: center;
font-weight: lighter;
padding-bottom: 0px;
background-color: #333333;
padding-left: 0px;
margin-left: 14px;
margin-right: 14px;
margin-bottom: 20px;
}
#media (min-width: 768px) {
/* show 3 items */
.carousel-inner .active,
.carousel-inner .active + .carousel-item,
.carousel-inner .active + .carousel-item + .carousel-item {
display: block;
}
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
transition: none;
}
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
position: relative;
transform: translate3d(0, 0, 0);
}
.carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -33.3333%;
z-index: -1;
display: block;
visibility: visible;
}
/* left or forward direction */
.active.carousel-item-left + .carousel-item-next.carousel-item-left,
.carousel-item-next.carousel-item-left + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* farthest right hidden item must be abso position for animations */
.carousel-inner .carousel-item-prev.carousel-item-right {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
visibility: visible;
}
/* right or prev direction */
.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
.carousel-item-prev.carousel-item-right + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Font CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- MY CSS FILE-->
<link href="../css/main.css" rel="stylesheet">
<style type="text/css"></style>
</head>
<body>
<!-------------------------- START OF TOP RECENT EPISODES CAROUSELS CONTENT ----------------------------------->
<div class="container no-pad">
<div class="row">
<div class="col-md-9 no-pad">
<div class="row">
<div class="col-md-12 recent-pro-clip">
<h3>Recent Projects</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="carouselExample" class="carousel slide no-pad" data-ride="carousel" data-interval="9000">
<div class="carousel-inner row w-100 mx-auto" role="listbox">
<div class="carousel-item col-md-4 active"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=1" alt="slide 2"> </div>
<div class="carousel-item col-md-4"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2"> </div>
<div class="carousel-item col-md-4"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 2"> </div>
<div class="carousel-item col-md-4"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 2"> </div>
<div class="carousel-item col-md-4"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 2"> </div>
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev"> <i class="fa fa-chevron-left fa-lg"></i> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next"> <i class="fa fa-chevron-right fa-lg"></i> <span class="sr-only">Next</span> </a> </div>
<!--------------------- START OF TOP RECENT CLIPS CAROUSELS CONTENT -------------------->
</div>
</div>
<div class="row">
<div class="col-md-12 recent-pro-clip">
<h3>Recent Clips</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="test" class="carousel slide no-pad" data-ride="carousel" data-interval="9000">
<div class="carousel-inner row w-100 mx-auto" role="listbox">
<div class="carousel-item col-md-4 active"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=1" alt="slide 2"> </div>
<div class="carousel-item col-md-4"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2"> </div>
<div class="carousel-item col-md-4"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 2"> </div>
<div class="carousel-item col-md-4"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 2"> </div>
<div class="carousel-item col-md-4"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 2"> </div>
</div>
<a class="carousel-control-prev" href="#test" role="button" data-slide="prev"> <i class="fa fa-chevron-left fa-lg"></i> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next text-faded" href="#test" role="button" data-slide="next"> <i class="fa fa-chevron-right fa-lg"></i> <span class="sr-only">Next</span> </a> </div>
</div>
<!-- clips carsoel div -->
</div>
</div>
<!-- recent projects and clips carousel overall col -->
<div class="col-md-3">
<div class="row">
<div class="col-md-12 recent-news">
<h3>News</h3>
</div>
</div>
<div class="row">
<div class="col"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 2"> </div>
</div>
<div class="row">
<div class="col"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 2"> <br/>
</div>
</div>
</div>
<!--overall news carousel col-->
</div>
<!-- overall carousel row -->
</div>
<!-- Container Div from Top -->
<!-------------------------- FOOTER ----------------------------------->
<div id="footer-fluid" class="container-fluid">
<div class="container">
<div class="row">
<div class="col"> test </div>
</div>
</div>
</div>
<!-- container fluid -->
<!-------------------------- SCRIPTS ----------------------------------->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
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="../../js/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="../js/my_js_main.js" crossorigin="anonymous"></script>
</body>
</html>

It's caused by this rule:
.no-pad {
padding-right: 0px;
}
Remove the no-pad class and use responsive Bootstrap spacing classes (such as px-md-0 etc.) for spacing.

How to slide in from right with jQuery, with transitions?

I have a code that when you click on a button, a div appears. But the thing is, my div slides in from the top, and I want to have it when someone clicks on the button, it slides in from the right with transitions. But I don't know how to change my current code to make that work. I know I can't switch from display: none to visibility and opacity to add CSS animations, right? So what can I do to make this as smooth as possible? Can someone please take a look and help me out?
Here's my code:
$(function() {
$("a#toggle").click(function() {
$("#slidein").slideToggle();
return false;
});
});
#slidein {
display: none;
}
.card {
background-color: #bdbdbd;
text-transform: uppercase;
position: fixed;
right: 0;
top: 0;
height: 100%;
}
.close {
position: absolute;
right: 0;
background: #fff;
opacity: 1;
color: #29292b;
font-size: 10px;
text-decoration-color: #757575;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div id="slidein">
<div class="card rounded-0 border-0">
<div class="card-header border-0 p-0">
<button type="button" class="close p-2">
<span aria-hidden="true">x close</span>
</button>
<img src="http://via.placeholder.com/350x200" class="card-img-top rounded-0" src="..." alt="Card image cap" height="200">
</div>
<!-- /.card-header -->
<div class="card-block py-4 px-3">
<h4 class="card-title mb-2">TEXT</h4>
<p class="card-text">TEXT
<span>TEXT</span>
<span>TEXT</span>
</p>
<h4 class="card-title mb-2">TEXT</h4>
<p class="card-text">TEXT</p>
<h4 class="card-title mb-2">TEXT</h4>
<p class="card-text">TEXT</p>
<div class="form-group">
<textarea class="form-control rounded-0 border-0 py-3" id="exampleTextarea" rows="6" placeholder="TEXT..."></textarea>
</div>
</div>
<!-- /.card-block -->
</div>
</div>
Contact

You can use CSS transition to achieve your goal. Initially, the slide in panel #slidein will sit outside of the right edge of your screen. A CSS class in will be toggled when you click a#toggle. Clicking on button.close will remove the class in from #slidein that will slide the panel out.
$(function() {
$("a#toggle").click(function() {
$("#slidein").toggleClass("in");
return false;
});
$("button.close").click(function() {
$("#slidein").removeClass("in");
return false;
});
});
#slidein {
position: fixed;
top: 0;
width: 100%; /*modify this value to fit your needs*/
right: -100%; /*modify this value to fit your needs*/
/*css transition*/
-webkit-transition: right 500ms ease-out;
-moz-transition: right 500ms ease-out;
-o-transition: right 500ms ease-out;
transition: right 500ms ease-out;
}
#slidein.in {
right: 0;
}
.card {
background-color: #bdbdbd;
text-transform: uppercase;
height: 100%;
}
.close {
position: absolute;
right: 0;
background: #fff;
opacity: 1;
color: #29292b;
font-size: 10px;
text-decoration-color: #757575;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div id="slidein">
<div class="card rounded-0 border-0">
<div class="card-header border-0 p-0">
<button type="button" class="close p-2">
<span aria-hidden="true">x close</span>
</button>
<img src="http://via.placeholder.com/350x200" class="card-img-top rounded-0" src="..." alt="Card image cap" height="200">
</div>
<!-- /.card-header -->
<div class="card-block py-4 px-3">
<h4 class="card-title mb-2">TEXT</h4>
<p class="card-text">TEXT
<span>TEXT</span>
<span>TEXT</span>
</p>
<h4 class="card-title mb-2">TEXT</h4>
<p class="card-text">TEXT</p>
<h4 class="card-title mb-2">TEXT</h4>
<p class="card-text">TEXT</p>
<div class="form-group">
<textarea class="form-control rounded-0 border-0 py-3" id="exampleTextarea" rows="6" placeholder="TEXT..."></textarea>
</div>
</div>
<!-- /.card-block -->
</div>
</div>
Contact

Categories