This code creates a vertical carousel slider with animated text. It utilizes Swiper.js for smooth sliding. The slider has navigation buttons and pagination for easy browsing. The text animations and color changes add visual appeal.
You can use this code to create engaging presentations or dynamically showcase content. Its vertical carousel slider is handy for displaying team information or product features. One benefit is its ability to captivate attention with smooth animations.
How to Create Vertical Carousel Slider With Animated Text
1. First of all, load the Swiper CSS by adding the following CDN link into the head tag of your HTML document.
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css'>
2. Create the HTML structure for the animated carousel. Include necessary classes and IDs to connect with the CSS and JavaScript.
<!-- Swiper -->
<div class="colored-container">
<div class="swiper-container verticle-animation">
<div class="halfbox team-info">
<li class="team-info-item active">
<h1 class="heading">Hi, my name is Aqil </h1>
<article class="content">
<p>
I'm AU/UX designer developer
please don't forget to like <br>
your likes Mean A lot to me
</p>
<p>
Fork on Github <a href="https://github.com/md-aqil">Md Aqil</a>
</p>
<p>
Find My Portfolio: <a href="https://mdaqil.tk">Md Aqil</a>
</p>
</article>
</li>
<li class="team-info-item active">
<h1 class="heading">Hi, my name is Aqil </h1>
<article class="content">
<p>
I'm AU/UX designer developer
please don't forget to like <br>
your likes Mean A lot to me
</p>
<p>
Fork on Github <a href="https://github.com/md-aqil">Md Aqil</a>
</p>
<p>
Find My Portfolio: <a href="https://mdaqil.tk">Md Aqil</a>
</p>
</article>
</li>
<li class="team-info-item active">
<h1 class="heading">Hi, my name is Aqil </h1>
<article class="content">
<p>
I'm AU/UX designer developer
please don't forget to like <br>
your likes Mean A lot to me
</p>
<p>
Fork on Github <a href="https://github.com/md-aqil">Md Aqil</a>
</p>
<p>
Find My Portfolio: <a href="https://mdaqil.tk">Md Aqil</a>
</p>
</article>
</li>
</div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slidebox">
<div class="flex-left">
<div class="bordered-img">
<div class="tag-box" data-swiper-parallax="-300">
fay
</div>
<img src="https://md-aqil.github.io/images/beautiful-beauty-face-2657838.jpg" alt="">
</div>
</div>
<div class="content-box">
<div class="title" data-swiper-parallax="-300">
<span>mrs</span>italy
</div>
<div class="subtitle" data-swiper-parallax="-200">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, id.
</div>
<button class="btn btn-main">
Shop Now
</button>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="slidebox">
<div class="flex-left">
<div class="bordered-img">
<div class="tag-box" data-swiper-parallax="-300">
fay
</div>
<img src="https://md-aqil.github.io/images/bikini-body-female-881583.jpg" alt="">
</div>
</div>
<div class="content-box">
<div class="title" data-swiper-parallax="-300">
<span>mrs</span>italy
</div>
<div class="subtitle" data-swiper-parallax="-200">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, id.
</div>
<button class="btn btn-main">
Shop Now
</button>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="slidebox">
<div class="flex-left">
<div class="bordered-img">
<div class="tag-box" data-swiper-parallax="-300">
fay
</div>
<img src="https://md-aqil.github.io/images/afro-afro-hair-attractive-2603391.jpg" alt="">
</div>
</div>
<div class="content-box">
<div class="title" data-swiper-parallax="-300">
<span>mrs</span>italy
</div>
<div class="subtitle" data-swiper-parallax="-200">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, id.
</div>
<button class="btn btn-main">
Shop Now
</button>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="slidebox">
<div class="flex-left">
<div class="bordered-img">
<div class="tag-box" data-swiper-parallax="-300">
fay
</div>
<img src="https://md-aqil.github.io/images/beautiful-bikini-daylight-745767.jpg" alt="">
</div>
</div>
<div class="content-box">
<div class="title" data-swiper-parallax="-300">
<span>mrs</span>italy
</div>
<div class="subtitle" data-swiper-parallax="-200">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, id.
</div>
<button class="btn btn-main">
Shop Now
</button>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="slidebox">
<div class="flex-left">
<div class="bordered-img">
<div class="tag-box" data-swiper-parallax="-300">
fay
</div>
<img src="https://md-aqil.github.io/images/adolescent-beautiful-beauty-247878.jpg" alt="">
</div>
</div>
<div class="content-box">
<div class="title" data-swiper-parallax="-300">
<span>mrs</span>italy
</div>
<div class="subtitle" data-swiper-parallax="-200">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, id.
</div>
<button class="btn btn-main">
Shop Now
</button>
</div>
</div>
</div>
</div>
<div class="slider-nav-wrapper">
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
3. Copy the following CSS code into your stylesheet. Adjust colors, sizes, and other styles as needed to match your design preferences.
:root {
--dark-green: #9cc675;
--dark-yellow: #e89a3d;
--extra-light-brown:#fdf0d7;
--light-brown: #ecd5ab;
--dark-brown:#915b40;
--light-yellow:#f8e3a8;
--light-red:#f3ac99;
--light-teal:#a6c8cc;
--light-gray:#ddd5d6;
--default-color: #a6c8cc;
--secondry-color: #e89a3d;
}
html, body {
position: relative;
height: 100%;
font-family: sans-serif;
}
body{
background: #eee !important;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
position: relative;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
font-size: 18px;
color:#fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 40px 60px;
}
.parallax-bg {
position: absolute;
left: 0;
top: 0;
width: 130%;
height: 100%;
-webkit-background-size: cover;
background-size: cover;
background-position: center;
}
.swiper-slide .subtitle {
padding-left: 60px;
}
.colored-container {
width: 100%;
height: 100%;
position: relative;
background: #fff;
}
.halfbox {
content: '';
position: absolute;
top: 0;
left: 0;
background: var(--default-color);
width: 50%;
height: 100%;
padding: 50px 50px;
box-sizing: border-box;
}
.slidebox {
position: relative;
width: 450px;
}
.bordered-img {
width: 350px;
position: relative;
}
.bordered-img img{
width: 100%;
height: 100%;
padding: 2px;
}
.bordered-img:before, .bordered-img:after {
content: '';
border: 8px solid #fff;
width: 100%;
height: 96%;
position: absolute;
display: block;
}
.bordered-img:after {
border-color: var(--secondry-color);
top: 0;
/* left: 2px; */
width: 29%;
right: -10px;
border-left-width: 0;
}
.title {
font-size: 50px;
text-transform: uppercase;
position: relative;
letter-spacing: 3px;
font-weight: bold;
margin-left: 18px;
color: var(--secondry-color);
}
.title >span {
color: var(--default-color);
margin-right: 15px;
}
.tag-box {
--size: 110px;
background: var(--default-color);
/*color: var(--dark-brown);*/
border: 5px solid #fff;
width: var(--size);
height: var(--size);
position: absolute;
left: -95px;
top: 70px;
font-size: 30px;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
box-shadow: 0 0 22px #00000029;
}
.swiper-slide .subtitle {
font-size: 18px;
color: #888;
font-weight: 300;
padding: top;
margin: 15px 0;
margin-bottom: 50px;
}
.content-box {
position: absolute;
left: 62%;
width: 300px;
top: 8%;
text-align: right;
}
.btn.btn-main {
background: var(--secondry-color);
color: #fff;
font-size: 16px;
font-weight: 400;
outline: none;
border:none;
position: relative;
padding: 15px 40px;
}
.btn.btn-main:before {
content: '';
width: 5px;
background: var(--dark-brown);
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.slider-nav-wrapper {
width: 10%;
position: absolute;
top: 85%;
margin: auto;
left: 0;
right: 0;
}
.swiper-button-next, .swiper-button-prev {
position: absolute;
top: 50%;
z-index: 10;
cursor: pointer;
background-position: center;
background-repeat: no-repeat;
background: var(--secondry-color);
padding: 0px;
background-repeat: no-repeat;
width: 45px;
height: 45px;
border-radius: 50%;
background-position: center;
padding: 3px;
box-shadow: bord;
box-sizing: border-box;
background-size: 17px !important;
}
.verticle-animation .swiper-slide {
display: flex;
justify-content: flex-end;
}
.slidebox {
margin-right: 100px;
margin-top: 50px;
}
.swiper-pagination {
position: absolute;
left: 0;
right: inherit !important;
}
.swiper-pagination-bullet {
width: 20px;
height: 4px;
display: inline-block;
border-radius: 100%;
background: #000;
border-radius: 0;
opacity: 1;
margin: 14px 0 !important;
transition: all .3s;
}
.swiper-pagination-bullet-active {
opacity: 1;
background: #000000;
width: 30px;
}
.team-info .team-info-item {
font-size: 22px;
padding: 15px 30px;
display: none;
position: absolute;
display: none;
}
.team-info .team-info-item.active {
display: block;
}
@-webkit-keyframes team-info-item {
from {
opacity: 0;
-webkit-transform: translate3d(0, 50px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
}
}
.team-info-item.active .heading, .team-info-item.active .content{
-webkit-animation-name: team-info-item;
animation-name: team-info-item;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-delay: 0s;
}
.team-info-item.active .content p {
font-weight: 300;
}
.team-info-item.active .content {
-webkit-animation-delay: .2s;
}
4. Now, load the jQuery and Swiper JS by adding the following CDN links just before closing the body element:
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js'></script>
5. Finally, add the following JavaScript function to initialize the Swiper carousel. Edit the content within each .swiper-slide div to add your text, images, or any other elements you want to display in the slider.
var colors = [
'--dark-green',
'--light-brown',
'--light-red',
'--light-teal',
'--light-gray',
];
var swiperverticle = new Swiper('.swiper-container.verticle-animation', {
speed: 600,
parallax: true,
direction: 'vertical',
mousewheel: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
swiperverticle.on('slideChange', function () {
var index = this.activeIndex;
// $('.halfbox').css({background: 'var('+colors[index % colors.length]+')'});
$('.team-info .team-info-item').removeClass('active').eq(this.activeIndex).addClass('active')
});
That’s all! hopefully, you have successfully created a Vertical Carousel Slider on your website. If you have any questions or suggestions, feel free to comment below.
Similar Code Snippets:
Make Responsive Content Slider with jQuery Scroll Carousel
Infinite Image Carousel in Vanilla JS
3D Image Slideshow Using HTML and CSS
Synced Owl Carousel with Thumbnails
jQuery Flexslider a Responsive Thumbnail Slider
Fullscreen Background Image Slideshow CSS - jQuery Subtle
3D Coverflow Effect Slider with jQuery Flipster Carousel
Lightweight Image Slider in Vanilla JS
JavaScript Quotes Slideshow with Images
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.