 |
| Expandable Animation Card Slider Carousel With OwlCarousel JS |
Incomplete and uninteresting if there are no animation slider on a website. Using the expandable animation card slider carousel with OwlCarousel JS, you can cover all the flaws that exist on the website.
This time I will teach you an easy way to make an Expandable Animated Carousel Slider using the Owl Carousel plugin. Owl Carousel has been tested in following browsers/devices:
- Chrome
- Firefox
- Opera
- IE7/8/10/11
- iPad Safari
- iPod4 Safari
- Nexus 7 Chrome
- Galaxy S4
- Nokia 8s Windows8
How to use it
1. The first point, please install it first, copy all the css link code and scripts. Put the code in <head>paste here</head>.
Link Stylesheet
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" />
Script jQuery And Plugin Owl.Carousel.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
2. Copy the code below and place it in the <body> tag.
<section class="game-section">
<h2 class="line-title">trending games</h2>
<div class="owl-carousel custom-carousel owl-theme">
<div class="item active" style="background-image: url(https://ucarecdn.com/75d7700d-c102-40ff-9ba1-f0641444c616/dota2.jpg);">
<div class="item-desc">
<h3>Dota 2</h3>
<p>Dota 2 is a multiplayer online battle arena by Valve. The game is a sequel to Defense of the
Ancients, which was a community-created mod for Blizzard Entertainment's Warcraft III.</p>
</div>
</div>
<div class="item" style="background-image: url(https://ucarecdn.com/2a5f69bc-befa-49f4-acc6-ab1dcae514c7/winter3.jpg);">
<div class="item-desc">
<h3>The Witcher 3</h3>
<p>The Witcher 3 is a multiplayer online battle arena by Valve. The game is a sequel to Defense
of the Ancients, which was a community-created mod for Blizzard Entertainment's Warcraft III.</p>
</div>
</div>
<div class="item" style="background-image: url(https://ucarecdn.com/ed548880-32e4-42af-9d4e-632623903256/farcry5.jpg);">
<div class="item-desc">
<h3>Far Cry 5</h3>
<p>Far Cry 5 is a 2018 first-person shooter game developed by Ubisoft.
which was a community-created mod for Blizzard Entertainment's Warcraft III.</p>
</div>
</div>
...
</div>
</section>
3. Then add the JavaScript below then run it on the browser you are using.
$(".custom-carousel").owlCarousel({
autoWidth: true,
loop: true
});
$(document).ready(function () {
$(".custom-carousel .item").click(function () {
$(".custom-carousel .item").not($(this)).removeClass("active");
$(this).toggleClass("active");
});
});
Live Demo
See the Pen Expandable Animated Card Slider by Yudiz Solutions Pvt. Ltd. (@yudizsolutions) on CodePen.
File Info
- File Name :
- expandable-animated-card-slider.zip
- Size :
- 19.17KB
- Site Download :
- Codepen.io
- Official Website:
- Go to website
- License:
- MIT