Responsive Coverflow Carousel, stylish, responsive carousel rack and cover flow style that implements CSS and lable + radio tricks.
coverflow effect slider with owl carousel, responsive smooth card carousel with jquery and css3, coverflow carousel html, coverflow slider, 3d coverflow effect slider, pure css card carousel
How to make use of it:
1. Add photos and descriptions to the card carousel.
<div class="slider"> <input type="radio" name="testimonial" id="t-1"> <input type="radio" name="testimonial" id="t-2"> <input type="radio" name="testimonial" id="t-3" checked> <input type="radio" name="testimonial" id="t-4"> <input type="radio" name="testimonial" id="t-5"> <div class="testimonials"> <label class="item" for="t-1"> // Add Image Here <p>Description 1</p> </label> <label class="item" for="t-2"> // Add Image Here <p>Description 2</p> </label> <label class="item" for="t-3"> // Add Image Here <p>Description 3</p> </label> <label class="item" for="t-4"> // Add Image Here <p>Description 4</p> </label> <label class="item" for="t-5"> // Add Image Here <p>Description 5</p> </label> </div> <div class="dots"> <label for="t-1"></label> <label for="t-2"></label> <label for="t-3"></label> <label for="t-4"></label> <label for="t-5"></label> </div> </div>
2. The needed CSS guidelines for the card carousel.
.slider { width: 100%; } .slider input { display: none; } .testimonials { display: flex; align-items: center; justify-content: center; position: relative; min-height: 350px; perspective: 1000px; overflow: hidden; } .testimonials .item { top: 0; position: absolute; box-sizing: border-box; background-color: #0A0220; padding: 30px; width: 450px; text-align: center; transition: transform 0.4s; -webkit-transform-style: preserve-3d; box-shadow: 0 0 10px rgba(0,0,0,0.3); user-select: none; cursor: pointer; } .testimonials .item img { width: 100px; border-radius: 50%; border: 13px solid #3B344D; } .testimonials .item p { color: #ddd; } .testimonials .item h2 { font-size: 14px; } .dots { display: flex; justify-content: center; align-items: center; } .dots label { display: block; height: 5px; width: 5px; border-radius: 50%; cursor: pointer; background-color: #413B52; margin: 7px; transition: transform 0.2s, color 0.2s; } /* First */ #t-1:checked ~ .dots label[for="t-1"] { transform: scale(2); background-color: #fff; } #t-1:checked ~ .dots label[for="t-2"] { transform: scale(1.5); } #t-1:checked ~ .testimonials label[for="t-1"] { z-index: 4; } #t-1:checked ~ .testimonials label[for="t-2"] { transform: translateX(300px) translateZ(-90px) rotateY(-15deg); z-index: 3; } #t-1:checked ~ .testimonials label[for="t-3"] { transform: translateX(600px) translateZ(-180px) rotateY(-25deg); z-index: 2; } #t-1:checked ~ .testimonials label[for="t-4"] { transform: translateX(900px) translateZ(-270px) rotateY(-35deg); z-index: 1; } #t-1:checked ~ .testimonials label[for="t-5"] { transform: translateX(1200px) translateZ(-360px) rotateY(-45deg); } /* Second */ #t-2:checked ~ .dots label[for="t-1"] { transform: scale(1.5); } #t-2:checked ~ .dots label[for="t-2"] { transform: scale(2); background-color: #fff; } #t-2:checked ~ .dots label[for="t-3"] { transform: scale(1.5); } #t-2:checked ~ .testimonials label[for="t-1"] { transform: translateX(-300px) translateZ(-90px) rotateY(15deg); } #t-2:checked ~ .testimonials label[for="t-2"] { z-index: 3; } #t-2:checked ~ .testimonials label[for="t-3"] { transform: translateX(300px) translateZ(-90px) rotateY(-15deg); z-index: 2; } #t-2:checked ~ .testimonials label[for="t-4"] { transform: translateX(600px) translateZ(-180px) rotateY(-25deg); z-index: 1; } #t-2:checked ~ .testimonials label[for="t-5"] { transform: translateX(900px) translateZ(-270px) rotateY(-35deg); } /* Third */ #t-3:checked ~ .dots label[for="t-2"] { transform: scale(1.5); } #t-3:checked ~ .dots label[for="t-3"] { transform: scale(2); background-color: #fff; } #t-3:checked ~ .dots label[for="t-4"] { transform: scale(1.5); } #t-3:checked ~ .testimonials label[for="t-1"] { transform: translateX(-600px) translateZ(-180px) rotateY(25deg); } #t-3:checked ~ .testimonials label[for="t-2"] { transform: translateX(-300px) translateZ(-90px) rotateY(15deg); } #t-3:checked ~ .testimonials label[for="t-3"] { z-index: 3; } #t-3:checked ~ .testimonials label[for="t-4"] { transform: translateX(300px) translateZ(-90px) rotateY(-15deg); z-index: 2; } #t-3:checked ~ .testimonials label[for="t-5"] { transform: translateX(600px) translateZ(-180px) rotateY(-25deg); } /* Fourth */ #t-4:checked ~ .dots label[for="t-3"] { transform: scale(1.5); } #t-4:checked ~ .dots label[for="t-4"] { transform: scale(2); background-color: #fff; } #t-4:checked ~ .dots label[for="t-5"] { transform: scale(1.5); } #t-4:checked ~ .testimonials label[for="t-1"] { transform: translateX(-900px) translateZ(-270px) rotateY(35deg); } #t-4:checked ~ .testimonials label[for="t-2"] { transform: translateX(-600px) translateZ(-180px) rotateY(25deg); } #t-4:checked ~ .testimonials label[for="t-3"] { transform: translateX(-300px) translateZ(-90px) rotateY(15deg); z-index: 2; } #t-4:checked ~ .testimonials label[for="t-4"] { z-index: 3; } #t-4:checked ~ .testimonials label[for="t-5"] { transform: translateX(300px) translateZ(-90px) rotateY(-15deg); } /* Fifth */ #t-5:checked ~ .dots label[for="t-4"] { transform: scale(1.5); } #t-5:checked ~ .dots label[for="t-5"] { transform: scale(2); background-color: #fff; } #t-5:checked ~ .testimonials label[for="t-1"] { transform: translateX(-1200px) translateZ(-360px) rotateY(45deg); } #t-5:checked ~ .testimonials label[for="t-2"] { transform: translateX(-900px) translateZ(-270px) rotateY(35deg); z-index: 1; } #t-5:checked ~ .testimonials label[for="t-3"] { transform: translateX(-600px) translateZ(-180px) rotateY(25deg); z-index: 2; } #t-5:checked ~ .testimonials label[for="t-4"] { transform: translateX(-300px) translateZ(-90px) rotateY(15deg); z-index: 3; } #t-5:checked ~ .testimonials label[for="t-5"] { z-index: 4; }
Cover Flow Style Card Carousel, Pure CSS Carousel Plugin/Github, flip carousel jquery, flip through elements in a 3d space carousel js
See Demo And Download
Official Website(medrupaloscil): Click Here
This superior jQuery/javascript plugin is developed by medrupaloscil. For extra Advanced Usages, please go to the official website.
Be First to Comment