Vertical Carousel Slider with Animated Text
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.
2. Create the HTML structure for the animated carousel. Include necessary classes and IDs to connect with the CSS and JavaScript.
Hi, my name is Aqil
I'm AU/UX designer developer please don't forget to like your likes Mean A lot to me
Fork on Github Md Aqil
Find My Portfolio: Md Aqil
Hi, my name is Aqil
I'm AU/UX designer developer please don't forget to like your likes Mean A lot to me
Fork on Github Md Aqil
Find My Portfolio: Md Aqil
Hi, my name is Aqil
I'm AU/UX designer developer please don't forget to like your likes Mean A lot to me
Fork on Github Md Aqil
Find My Portfolio: Md Aqil
faymrsitalyLorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, id.Shop NowfaymrsitalyLorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, id.Shop NowfaymrsitalyLorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, id.Shop NowfaymrsitalyLorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, id.Shop NowfaymrsitalyLorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, id.Shop Now3. 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 .content4. Now, load the jQuery and Swiper JS by adding the following CDN links just before closing the body element:
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(); $('.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:JavaScript Slideshow with Glass Shadow Effect
Image Comparison Slider with jQuery and CSS
Automatic Animated Image Slider in JavaScript
3D Image Slideshow Using HTML and CSS
jQuery Simplest Image Slider with Controls
Simple jQuery Image Slider with Next Previous Buttons
Responsive Coverflow Carousel in JavaScript
Make Responsive Content Slider with jQuery Scroll Carousel
Simple Review Slider in JavaScript
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.
Categories Carousel Leave a Comment Cancel replyThis site uses Akismet to reduce spam. Learn how your comment data is processed.
Categories- Accordion 22
- Bootstrap 81
- Bootstrap Accordion 1
- Bootstrap Buttons 4
- Bootstrap Cards 2
- Bootstrap Carousel 2
- Bootstrap Dropdowns 2
- Bootstrap Forms 6
- Bootstrap Jumbotron 1
- Bootstrap Modals 2
- Bootstrap Navbars 6
- Bootstrap Panels 1
- Bootstrap Progress Bars 1
- Bootstrap Text & Input 3
You May Like
Latest Code Snippets
October 12, 2024 April 1, 2024 March 31, 2024 March 31, 2024 March 31, 2024 March 31, 2024 March 31, 2024 March 31, 2024 March 31, 2024 March 31, 2024Popular
- 65+ Login Page in HTML with CSS Code Sample Simple to Difficult - 946,179 views
- 25+ Best JavaScript Shopping Cart Examples with Demo - 210,774 views
- Bootstrap Multiselect Dropdown with Checkboxes - 150,609 views
- Bootstrap 5 Buttons with Icon and Text Tutorial & Demo - 112,006 views
- 19+ Bootstrap Select Dropdown with Search Box Tutorial & Examples - 100,694 views
- Bootstrap 5 Sidebar Menu with Submenu Collapse/Hover Tutorial Demo - 87,624 views
- 99+ Social Media Buttons HTML Code Sample & Tutorial - 86,080 views
- 19+ Bootstrap 5 Mega Menu Responsive/Drop Down Examples - 85,998 views
- Bootstrap 4 Modal Popup Login Form Tutorial & Demo - 81,855 views
- Bootstrap Vertical Menu with Submenu on Click - 79,904 views
Advertisement
About CodeHimFree Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners. find out more.
CodeHim Top Categories- Bootstrap Snippets
- JavaScript Snippets
- HTML CSS Snippets
- Menu & Nav Snippets
Follow us on social media to be updated with latest web design code & scripts.
All Rights Reserved © 2026 - CodeHim IncPlease Rel0ad/PressF5 this page if you can't click the download/preview link