'How to add another item to carousel?
So I'm trying to add another item to this carousel that I found on codepen, but I'm having a hard time doing so.
The point of the carousel is to show a bunch of books that you can browse through. If anyone could help me by adding one or two book items and perhaps letting me know how you did it? I'd really appreciate that!
Any help is appreciated.
<div class="slider-wrapper">
<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">
<img src="https://www.nicolelundrigan.com/s/arva.png">
<a href="https://www.nicolelundrigan.com/unraveling-arva"></a>
</label>
<label class="item" for="t-2">
<img src="https://www.nicolelundrigan.com/s/glassboys.jpg">
<a href="https://www.nicolelundrigan.com/glass-boys"></a>
</label>
<label class="item" for="t-3">
<img src="https://images.squarespace-cdn.com/content/v1/60a8369fd20de56185381ba2/1621638067741-015L8NZNOQRZ2INSZFBJ/ke17ZwdGBToddI8pDm48kN7XjnOeyBG_pIHGk9Gs1lBZw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZUJFbgE-7XRK3dMEBRBhUpwUJhz1iDgCkcnkJtht8qU86z6JQqWZLopbxZKVqc2vInNKk6_CE_jsazf_GmrMjp4/SubstituteCoverFinal.jpg?format=300w" alt="picture">
<a href="https://www.nicolelundrigan.com/thesubstitute"></a>
</label>
<label class="item" for="t-4">
<img src="https://www.nicolelundrigan.com/s/widowtree.jpg">
<a href="https://www.nicolelundrigan.com/the-widow-tree"></a>
</label>
<label class="item" for="t-5">
<img src="https://www.nicolelundrigan.com/s/thaw.png">
<a href="https://www.nicolelundrigan.com/thaw"></a>
</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>
</div>
.slider-wrapper {
body {
margin: 0;
color: #fff;
font-family: sans-serif;
display: flex;
align-items: center;
min-height: 100vh;
}
.slider {
width: 100%;
}
.slider input {
display: none;
}
.testimonials {
display: flex;
align-items: center;
justify-content: center;
position: relative;
min-height: 450px;
perspective: 1000px;
// overflow: hidden;
}
.testimonials .item {
top: 0;
position: absolute;
box-sizing: border-box;
background-color: grey;
// padding: 30px;
width: 250px;
height: 400px;
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;
a {
height: 400px;
display: none;
position: absolute;
width: 250px;
top: 0px;
left: 0px;
opacity: 0.3;
}
}
.testimonials .item img {
width: 100px;
// border-radius: 50%;
// border: 13px solid #3B344D;
height: 100%;
width: 100%;
filter: brightness(0.8);
transition: filter 0.4s;
}
.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: salmon;
margin: 7px;
transition: transform 0.2s, color 0.2s;
}
/* First */
#t-1:checked ~ .dots label[for="t-1"] {
transform: scale(2);
}
#t-1:checked ~ .dots label[for="t-2"] {
transform: scale(1.5);
}
#t-1:checked ~ .testimonials label[for="t-1"] {
z-index: 4;
a {display: block; }
img {filter: none;}
box-shadow: 0px 0px 18px 4px rgba(0, 0, 0, 0.67);
}
#t-1:checked ~ .testimonials label[for="t-2"] {
transform: translateX(200px) translateZ(-90px) rotateY(-15deg);
z-index: 3;
}
#t-1:checked ~ .testimonials label[for="t-3"] {
transform: translateX(400px) translateZ(-180px) rotateY(-25deg);
z-index: 2;
}
#t-1:checked ~ .testimonials label[for="t-4"] {
transform: translateX(600px) translateZ(-270px) rotateY(-35deg);
z-index: 1;
}
#t-1:checked ~ .testimonials label[for="t-5"] {
transform: translateX(800px) 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);
}
#t-2:checked ~ .dots label[for="t-3"] {
transform: scale(1.5);
}
#t-2:checked ~ .testimonials label[for="t-1"] {
transform: translateX(-200px) translateZ(-90px) rotateY(15deg);
}
#t-2:checked ~ .testimonials label[for="t-2"] {
z-index: 3;
a {display: block; }
img {filter: none;}
box-shadow: 0px 0px 18px 4px rgba(0, 0, 0, 0.67);
}
#t-2:checked ~ .testimonials label[for="t-3"] {
transform: translateX(200px) translateZ(-90px) rotateY(-15deg);
z-index: 2;
}
#t-2:checked ~ .testimonials label[for="t-4"] {
transform: translateX(400px) translateZ(-180px) rotateY(-25deg);
z-index: 1;
}
#t-2:checked ~ .testimonials label[for="t-5"] {
transform: translateX(600px) 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);
}
#t-3:checked ~ .dots label[for="t-4"] {
transform: scale(1.5);
}
#t-3:checked ~ .testimonials label[for="t-1"] {
transform: translateX(-400px) translateZ(-180px) rotateY(25deg);
}
#t-3:checked ~ .testimonials label[for="t-2"] {
transform: translateX(-200px) translateZ(-90px) rotateY(15deg);
}
#t-3:checked ~ .testimonials label[for="t-3"] {
z-index: 3;
a {display: block; }
img {filter: none;}
box-shadow: 0px 0px 18px 4px rgba(0, 0, 0, 0.67);
}
#t-3:checked ~ .testimonials label[for="t-4"] {
transform: translateX(200px) translateZ(-90px) rotateY(-15deg);
z-index: 2;
}
#t-3:checked ~ .testimonials label[for="t-5"] {
transform: translateX(400px) 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(-600px) translateZ(-270px) rotateY(35deg);
}
#t-4:checked ~ .testimonials label[for="t-2"] {
transform: translateX(-400px) translateZ(-180px) rotateY(25deg);
}
#t-4:checked ~ .testimonials label[for="t-3"] {
transform: translateX(-200px) translateZ(-90px) rotateY(15deg);
z-index: 2;
}
#t-4:checked ~ .testimonials label[for="t-4"] {
z-index: 3;
a {display: block; }
img {filter: none;}
box-shadow: 0px 0px 18px 4px rgba(0, 0, 0, 0.67);
}
#t-4:checked ~ .testimonials label[for="t-5"] {
transform: translateX(200px) 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);
}
#t-5:checked ~ .testimonials label[for="t-1"] {
transform: translateX(-800px) translateZ(-360px) rotateY(45deg);
}
#t-5:checked ~ .testimonials label[for="t-2"] {
transform: translateX(-600px) translateZ(-270px) rotateY(35deg);
z-index: 1;
}
#t-5:checked ~ .testimonials label[for="t-3"] {
transform: translateX(-400px) translateZ(-180px) rotateY(25deg);
z-index: 2;
}
#t-5:checked ~ .testimonials label[for="t-4"] {
transform: translateX(-200px) translateZ(-90px) rotateY(15deg);
z-index: 3;
}
#t-5:checked ~ .testimonials label[for="t-5"] {
z-index: 4;
a {display: block; }
img {filter: none;}
box-shadow: 0px 0px 18px 4px rgba(0, 0, 0, 0.67);
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|