Simple Card Carousel

Developer
Andy Tran
Size
3,874 Kb
Views
176,088
  1. Simple Card Carousel Previews
  2. Simple Card Carousel HTML Codes
  3. Simple Card Carousel CSS Codes
  4. Simple Card Carousel JS Codes

How do I make an simple card carousel?

A simple card carousel snippet. :). What is a simple card carousel? How do you make a simple card carousel? This script and codes were developed by Andy Tran on 12 June 2022, Sunday.

Simple Card Carousel Previews
IQ Test

Simple Card Carousel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Card Carousel</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> .title Card Carousel p its very basic.. super simple
.container - var totalCards = 4 // Total Cards while (totalCards + 1) >= 1 .card(data-card='#{totalCards--}'): span Click Me <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple Card Carousel - Script Codes CSS Codes

.container { position: relative; width: 350px; height: 440px;
}
.card { position: absolute; top: 0; left: 0; background: #FFFFFF; width: 350px; height: 440px; border-radius: 4px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); -webkit-transform-origin: center; transform-origin: center; -webkit-transition: 0.4s cubic-bezier(0.28, 0.55, 0.385, 1.65); transition: 0.4s cubic-bezier(0.28, 0.55, 0.385, 1.65); cursor: pointer;
}
.card:nth-child(1) { z-index: 10; top: 0px; -webkit-transform-origin: top; transform-origin: top; -webkit-transform: scale(1); transform: scale(1); opacity: 1;
}
.card:nth-child(2) { z-index: 9; top: -15px; -webkit-transform-origin: top; transform-origin: top; -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.9;
}
.card:nth-child(3) { z-index: 8; top: -30px; -webkit-transform-origin: top; transform-origin: top; -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 0.8;
}
.card:nth-child(4) { z-index: 7; top: -45px; -webkit-transform-origin: top; transform-origin: top; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0.7;
}
.card:nth-child(5) { z-index: 6; top: -60px; -webkit-transform-origin: top; transform-origin: top; -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0.6;
}
.card:nth-child(6) { z-index: 5; top: -75px; -webkit-transform-origin: top; transform-origin: top; -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0.5;
}
.card:nth-child(7) { z-index: 4; top: -90px; -webkit-transform-origin: top; transform-origin: top; -webkit-transform: scale(0.4); transform: scale(0.4); opacity: 0.4;
}
.card:nth-child(8) { z-index: 3; top: -105px; -webkit-transform-origin: top; transform-origin: top; -webkit-transform: scale(0.3); transform: scale(0.3); opacity: 0.3;
}
.card:nth-child(9) { z-index: 2; top: -120px; -webkit-transform-origin: top; transform-origin: top; -webkit-transform: scale(0.2); transform: scale(0.2); opacity: 0.2;
}
.card:nth-child(10) { z-index: 1; top: -135px; -webkit-transform-origin: top; transform-origin: top; -webkit-transform: scale(0.1); transform: scale(0.1); opacity: 0.1;
}
.card:nth-child(11) { z-index: 0; top: -150px; -webkit-transform-origin: top; transform-origin: top; -webkit-transform: scale(0); transform: scale(0); opacity: 0;
}
.card:first-child:hover { box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); -webkit-transform: scale(1.05); transform: scale(1.05);
}
.card:last-child { opacity: 0;
}
body { background: -webkit-linear-gradient(#06A3EA, #2095F2); background: linear-gradient(#06A3EA, #2095F2); font-family: 'Open Sans';
}
.title { padding: 60px 0 0; font-size: 36px; font-weight: 300; color: #FFF; text-align: center;
}
.title p { padding: 10px 0 0; font-size: 12px; opacity: 0.8;
}
.container { margin: 100px auto;
}
.card { color: rgba(0, 0, 0, 0.2); font-size: 12px; text-align: center;
}
span { display: inline-block; background: rgba(0, 0, 0, 0.05); border-radius: 4px; margin: 60px 0 0; padding: 8px 10px;
}

Simple Card Carousel - Script Codes JS Codes

(function() { var rotate, timeline; rotate = function() { return $('.card:first-child').fadeOut(400, 'swing', function() { return $('.card:first-child').appendTo('.container').hide(); }).fadeIn(400, 'swing'); }; timeline = setInterval(rotate, 1200); $('body').hover(function() { return clearInterval(timeline); }); $('.card').click(function() { return rotate(); });
}).call(this);
Simple Card Carousel - Script Codes
Simple Card Carousel - Script Codes
Home Page Home
Developer Andy Tran
Username andytran
Uploaded June 12, 2022
Rating 4.5
Size 3,874 Kb
Views 176,088
Do you need developer help for Simple Card Carousel?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andy Tran (andytran) Script Codes
Name
Interactive Location Modal
Flat To-Do-List
Flat Pricing Table
Day 21 - Interactive Dribbble Invite Modal
Sparked Dashboard
Flat Navigation
Macbook Pro Demo
Day 23 - Interactive Wallet
Flat Login Form
Pure CSS - Menu App
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!