In this article, we are going to design an animated card slider with next/previous button using jQuery.
The following source code provides us with a card slider UI design with next and previous button. The basic idea is to allow users to swipe through multiple number of cards that may include image, title and excerpt text.
Full Source Code :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script>
<style type="text/css">
.disabled{
color:#aaa;
}
body{
background: #f4f4f4;
}
.sans{
font-family: sans-serif;
}
.box-wrapper{
display: none;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.box{
background: #fff;
position: absolute;
width:600px;
height:600px;
border: 1px solid rgba(0,0,0,0.1);
}
.nav-wrapper .fa{
cursor: pointer;
font-weight: 600;
font-size: 22px;
margin-left: 20px;
}
.nav-wrapper{
float: right;
padding: 16px 20px;
text-align: right;
display: inline-block;
}
.head-wrapper{
font-weight: bold;
letter-spacing: 1.3;
font-size: 20px;
display: inline-block;
float: left;
}
.image-wrapper{
padding-bottom: 0px!important;
}
.image-wrapper img{
width: 100%;
}
.content{
padding-top: 0px!important;
}
.content h4{
margin-bottom:0px;
font-size: 26px;
}
.content a{
text-decoration: none;
}
.content p{
font-size: 19px;
line-height: 22px;
color:#777;
margin-top:6px;
}
.pad{
padding: 16px 20px;
}
.remove-box{
transition-duration: 1s;
transform: rotatey(-90deg);
}
.show-box{
transition-duration: 1s;
transform: rotatey(0deg);
}
</style>
<?php
$data = array(
array(
'title'=>'Zoom Meeting : Is it really safe and deserves to be used?',
'image'=>'https://reeteshghimire.com.np/wp-content/uploads/2020/06/zoom-video-calling.jpg',
'description'=>'Coronavirus (Covid-19) pandemic has changed our lives drastically as every one of us is in our home quarantine',
'link'=>'https://reeteshghimire.com.np/2020/06/27/zoom-meeting-is-it-really-safe-and-deserves-to-be-used/'
),
array(
'title'=>'Everything you need to know about Sagoon',
'image'=>'https://reeteshghimire.com.np/wp-content/uploads/2020/06/everything-you-need-to-know-about-sagoon.jpg',
'description'=>'Sagoon is an early stage social commerce platform where people across the world get connected, share their things and also earn money from it',
'link'=>'https://reeteshghimire.com.np/2020/06/25/everything-you-need-to-know-about-sagoon/'
),
array(
'title'=>'What Does The Future Hold For Crypto-Currency ?',
'image'=>'https://reeteshghimire.com.np/wp-content/uploads/2020/06/future-of-cryptocurrency.jpg',
'description'=>'If you are curious to know about Crypto-currency and what the future holds for it, then keep reading the article until the end and know about it thoroughly',
'link'=>'https://reeteshghimire.com.np/2020/06/23/what-does-the-future-hold-for-crypto-currency/'
),
array(
'title'=>'QR Code Reader using PHP Library',
'image'=>'https://reeteshghimire.com.np/wp-content/uploads/2021/01/qr-code-reader-decoder-using-php-600x400.jpg',
'description'=>'The recommended method of installing this library is via Composer. We need to run the following command from the project root',
'link'=>'https://reeteshghimire.com.np/2021/01/25/qr-code-reader-using-php-library/'
)
);
?>
<div class="box-wrapper">
<?php $i=count($data)+1; foreach($data as $d){ $i--;?>
<div class="box box-<?php echo $i;?>">
<div class="head-wrapper sans pad">
<?php echo $i;?>/<?php echo count($data);?>
</div>
<div class="nav-wrapper pad">
<i class="disabled btn-prev fa fa-angle-left" onclick="previous();"></i>
<i class="btn-next fa fa-angle-right" onclick="next();"></i>
</div>
<div class="image-wrapper pad">
<a target="_blank" href="<?php echo $d['link'];?>">
<img src="<?php echo $d['image'];?>">
</a>
</div>
<div class="content sans pad">
<a target="_blank" href="<?php echo $d['link'];?>">
<h4><?php echo $d['title'];?></h4>
</a>
<p><?php echo $d['description'];?></p>
</div>
</div>
<?php } ?>
</div>
<script>
var active_box = 1;
var box_count = '<?php echo count($data);?>';
setTimeout(function(){
$(".box-wrapper").fadeIn();
$(".box-wrapper").css('display','flex');
},2000);
function next(){
if(active_box>=box_count){
return false;
}
if(active_box>=box_count-1){
$(".btn-next").addClass('disabled');
}else{
$(".btn-next").removeClass('disabled');
$(".btn-prev").removeClass('disabled');
}
next_active_box = active_box+1;
active_box_id = '.box-'+active_box;
next_active_box_id = '.box-'+next_active_box;
$(active_box_id).addClass('remove-box');
$(next_active_box_id).addClass('show-box');
$(active_box_id).removeClass('show-box');
$(next_active_box_id).show();
active_box = next_active_box;
}
function previous(){
if(active_box<=1){
return false;
}
if(active_box<=2){
$(".btn-prev").addClass('disabled');
}else{
$(".btn-prev").removeClass('disabled');
$(".btn-next").removeClass('disabled');
}
next_active_box = active_box-1;
active_box_id = '.box-'+active_box;
next_active_box_id = '.box-'+next_active_box;
$(next_active_box_id).removeClass('remove-box');
$(next_active_box_id).addClass('show-box');
$(next_active_box_id).show();
active_box = next_active_box;
}
</script>
Follow this video for complete guidance :
