I have mimic-ed a pure css slider with a 3d effect, where clicking does not advance the slider. When I alter it, the click does advance the slider. Any help making it so the click does not advance the slider?
Original Codepen https://codepen.io/panfilov/pen/GogJVy
example, their css
* {
margin: 0;
padding: 0;
}
body {
padding: 20px;
background: #eee;
user-select: none;
}
[type=radio] {
display: none;
}
#slider {
height: 35vw;
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
}
#slider label {
margin: auto;
width: 60%;
height: 100%;
border-radius: 4px;
position: absolute;
left: 0; right: 0;
cursor: pointer;
transition: transform 0.4s ease;
}
#s1:checked ~ #slide4, #s2:checked ~ #slide5,
#s3:checked ~ #slide1, #s4:checked ~ #slide2,
#s5:checked ~ #slide3 {
box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
transform: translate3d(-30%,0,-200px);
}
#s1:checked ~ #slide5, #s2:checked ~ #slide1,
#s3:checked ~ #slide2, #s4:checked ~ #slide3,
#s5:checked ~ #slide4 {
box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
transform: translate3d(-15%,0,-100px);
}
#s1:checked ~ #slide1, #s2:checked ~ #slide2,
#s3:checked ~ #slide3, #s4:checked ~ #slide4,
#s5:checked ~ #slide5 {
box-shadow: 0 13px 25px 0 rgba(0,0,0,.3), 0 11px 7px 0 rgba(0,0,0,.19);
transform: translate3d(0,0,0);
}
#s1:checked ~ #slide2, #s2:checked ~ #slide3,
#s3:checked ~ #slide4, #s4:checked ~ #slide5,
#s5:checked ~ #slide1 {
box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
transform: translate3d(15%,0,-100px);
}
#s1:checked ~ #slide3, #s2:checked ~ #slide4,
#s3:checked ~ #slide5, #s4:checked ~ #slide1,
#s5:checked ~ #slide2 {
box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
transform: translate3d(30%,0,-200px);
}
#slide1 { background: #00BCD4 }
#slide2 { background: #4CAF50 }
#slide3 { background: #CDDC39 }
#slide4 { background: #FFC107 }
#slide5 { background: #FF5722 }
<section id="slider">
<input type="radio" name="slider" id="s1">
<input type="radio" name="slider" id="s2">
<input type="radio" name="slider" id="s3" checked>
<input type="radio" name="slider" id="s4">
<input type="radio" name="slider" id="s5">
<label for="s1" id="slide1"></label>
<label for="s2" id="slide2"></label>
<label for="s3" id="slide3"></label>
<label for="s4" id="slide4"></label>
<label for="s5" id="slide5"></label>
</section>
My Codepen https://codepen.io/michael-lythcott/pen/RmOWbe
Mine:
* {
margin: 0;
padding: 0;
}
body {
padding: 20px;
background: #eee;
user-select: none;
}
[type=radio] {
/* display: none; */
}
#slider {
height: 35vw;
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
}
#slider label {
margin: auto;
width: 60%;
height: 400px;
border-radius: 4px;
position: absolute;
left: 0; right: 0;
cursor: pointer;
transition: transform 0.4s ease;
font-size: 20px;
padding: 2em;
overflow: scroll;
}
#s1:checked ~ #slide4, #s2:checked ~ #slide5,
#s3:checked ~ #slide1, #s4:checked ~ #slide2,
#s5:checked ~ #slide3 {
box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
transform: translate3d(0,0,10px);
}
#s1:checked ~ #slide5, #s2:checked ~ #slide1,
#s3:checked ~ #slide2, #s4:checked ~ #slide3,
#s5:checked ~ #slide4 {
box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
transform: translate3d(10px,10px,11px);
}
#s1:checked ~ #slide1, #s2:checked ~ #slide2,
#s3:checked ~ #slide3, #s4:checked ~ #slide4,
#s5:checked ~ #slide5 {
box-shadow: 0 13px 25px 0 rgba(0,0,0,.3), 0 11px 7px 0 rgba(0,0,0,.19);
transform: translate3d(20px,20px,12px);
}
#s1:checked ~ #slide2, #s2:checked ~ #slide3,
#s3:checked ~ #slide4, #s4:checked ~ #slide5,
#s5:checked ~ #slide1 {
box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
transform: translate3d(30px,30px,13px);
}
#s1:checked ~ #slide3, #s2:checked ~ #slide4,
#s3:checked ~ #slide5, #s4:checked ~ #slide1,
#s5:checked ~ #slide2 {
box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
transform: translate3d(40px,40px,14px);
}
#slide1 { background: #00BCD4 }
#slide2 { background: #4CAF50 }
#slide3 { background: #CDDC39 }
#slide4 { background: #FFC107 }
#slide5 { background: #FF5722 }<!DOCTYPE html>
<html>
<body>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 20px;
background: #eee;
user-select: none;
}
[type=radio] {
/* display: none; */
}
#slider {
height: 35vw;
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
}
#slider label {
margin: auto;
width: 60%;
height: 400px;
border-radius: 4px;
position: absolute;
left: 0; right: 0;
cursor: pointer;
transition: transform 0.4s ease;
font-size: 20px;
padding: 2em;
overflow: scroll;
}
#s1:checked ~ #slide4, #s2:checked ~ #slide5,
#s3:checked ~ #slide1, #s4:checked ~ #slide2,
#s5:checked ~ #slide3 {
box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
transform: translate3d(0,0,10px);
}
#s1:checked ~ #slide5, #s2:checked ~ #slide1,
#s3:checked ~ #slide2, #s4:checked ~ #slide3,
#s5:checked ~ #slide4 {
box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
transform: translate3d(10px,10px,11px);
}
#s1:checked ~ #slide1, #s2:checked ~ #slide2,
#s3:checked ~ #slide3, #s4:checked ~ #slide4,
#s5:checked ~ #slide5 {
box-shadow: 0 13px 25px 0 rgba(0,0,0,.3), 0 11px 7px 0 rgba(0,0,0,.19);
transform: translate3d(20px,20px,12px);
}
#s1:checked ~ #slide2, #s2:checked ~ #slide3,
#s3:checked ~ #slide4, #s4:checked ~ #slide5,
#s5:checked ~ #slide1 {
box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
transform: translate3d(30px,30px,13px);
}
#s1:checked ~ #slide3, #s2:checked ~ #slide4,
#s3:checked ~ #slide5, #s4:checked ~ #slide1,
#s5:checked ~ #slide2 {
box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
transform: translate3d(40px,40px,14px);
}
#slide1 { background: #00BCD4 }
#slide2 { background: #4CAF50 }
#slide3 { background: #CDDC39 }
#slide4 { background: #FFC107 }
#slide5 { background: #FF5722 }
</style>
<section id="slider">
<input type="radio" name="slider" id="s1">
<input type="radio" name="slider" id="s2">
<input type="radio" name="slider" id="s3" checked>
<input type="radio" name="slider" id="s4">
<input type="radio" name="slider" id="s5">
<label for="s1" id="slide1">
<article class="post-31 work type-work status-publish has-post-thumbnail hentry">
<header class="mb-3 pb-2">
<h1 class="entry-title white m-0 h4 gooper fontWeight400">
Ladro Roasting </h1>
<div class="d-block apercu small-text noMargin">
<p>Website Design | Branding</p>
</div>
</header>
<div class="entry-content small-text apercu">
</div>
</article>
</label>
<label for="s2" id="slide2">
<article class="post-31 work type-work status-publish has-post-thumbnail hentry">
<header class="mb-3 pb-2">
<h1 class="entry-title white m-0 h4 gooper fontWeight400">
Ladro Roasting </h1>
<div class="d-block apercu small-text noMargin">
<p>Website Design | Branding</p>
</div>
</header>
<div class="entry-content small-text apercu">
</div>
</article>
</label>
<label for="s3" id="slide3">
<article class="post-31 work type-work status-publish has-post-thumbnail hentry">
<header class="mb-3 pb-2">
<h1 class="entry-title white m-0 h4 gooper fontWeight400">
Ladro Roasting </h1>
<div class="d-block apercu small-text noMargin">
<p>Website Design | Branding</p>
</div>
</header>
<div class="entry-content small-text apercu">
</div>
</article>
</label>
<label for="s4" id="slide4">
<article class="post-31 work type-work status-publish has-post-thumbnail hentry">
<header class="mb-3 pb-2">
<h1 class="entry-title white m-0 h4 gooper fontWeight400">
Ladro Roasting </h1>
<div class="d-block apercu small-text noMargin">
<p>Website Design | Branding</p>
</div>
</header>
<div class="entry-content small-text apercu">
</div>
</article>
</label>
<label for="s5" id="slide5">
<article class="post-31 work type-work status-publish has-post-thumbnail hentry">
<header class="mb-3 pb-2">
<h1 class="entry-title white m-0 h4 gooper fontWeight400">
Ladro Roasting </h1>
<div class="d-block apercu small-text noMargin">
<p>Website Design | Branding</p>
</div>
</header>
<div class="entry-content small-text apercu">
</div>
</article>
</label>
</section>
</body>
</html>All I changed was the size and setting of the 3d effect to make the 3d effect appear like a stack of cards.
I would like my pen to stay the same, except clicking anywhere on a slide does NOT advance the slider.
I think the order in which checkboxes are mapped to slides is incorrect. As a result, the slide that's showing (top of the stack) doesn't necessary correspond to the appropriate checkbox. So when you click the top slide, the checkbox for a different slide is checked.
I've reordered them so that the <label> that's on top of the stack corresponds to the checkbox for that same slide. Now when you click the slide on top, that checkbox is already checked.
* {
margin: 0;
padding: 0;
}
body {
/*padding: 20px;*/
background: #eee;
user-select: none;
}
[type=radio] {
/* display: none; */
}
#slider {
height: 35vw;
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
}
#slider label {
margin: auto;
width: 60%;
/*height: 400px;*/
border-radius: 4px;
position: absolute;
left: 0;
right: 0;
cursor: pointer;
transition: transform 0.4s ease;
font-size: 20px;
/*padding: 2em;*/
padding: 1em 2em;
/*overflow: scroll;*/
}
#s1:checked~#slide5,
#s2:checked~#slide1,
#s3:checked~#slide2,
#s4:checked~#slide3,
#s5:checked~#slide4 {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .37);
transform: translate3d(0, 30px, 10px);
}
#s1:checked~#slide4,
#s2:checked~#slide5,
#s3:checked~#slide1,
#s4:checked~#slide2,
#s5:checked~#slide3 {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .3), 0 2px 2px 0 rgba(0, 0, 0, .2);
transform: translate3d(10px, 40px, 11px);
}
#s1:checked~#slide3,
#s2:checked~#slide4,
#s3:checked~#slide5,
#s4:checked~#slide1,
#s5:checked~#slide2 {
box-shadow: 0 13px 25px 0 rgba(0, 0, 0, .3), 0 11px 7px 0 rgba(0, 0, 0, .19);
transform: translate3d(20px, 50px, 12px);
}
#s1:checked~#slide2,
#s2:checked~#slide3,
#s3:checked~#slide4,
#s4:checked~#slide5,
#s5:checked~#slide1 {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .3), 0 2px 2px 0 rgba(0, 0, 0, .2);
transform: translate3d(30px, 60px, 13px);
}
#s1:checked~#slide1,
#s2:checked~#slide2,
#s3:checked~#slide3,
#s4:checked~#slide4,
#s5:checked~#slide5 {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .37);
transform: translate3d(40px, 70px, 14px);
}
#slide1 {
background: #00BCD4
}
#slide2 {
background: #4CAF50
}
#slide3 {
background: #CDDC39
}
#slide4 {
background: #FFC107
}
#slide5 {
background: #FF5722
}<section id="slider">
<input type="radio" name="slider" id="s1" checked>
<input type="radio" name="slider" id="s2">
<input type="radio" name="slider" id="s3">
<input type="radio" name="slider" id="s4">
<input type="radio" name="slider" id="s5">
<label for="s1" id="slide1">
<article class="post-31 work type-work status-publish has-post-thumbnail hentry">
<header class="mb-3 pb-2">
<h1 class="entry-title white m-0 h4 gooper fontWeight400">Ladro Roasting</h1>
<div class="d-block apercu small-text noMargin">
<p>Website Design | Branding</p>
</div>
</header>
<div class="entry-content small-text apercu"></div>
</article>
</label>
<label for="s2" id="slide2">
<article class="post-31 work type-work status-publish has-post-thumbnail hentry">
<header class="mb-3 pb-2">
<h1 class="entry-title white m-0 h4 gooper fontWeight400">Ladro Roasting</h1>
<div class="d-block apercu small-text noMargin">
<p>Website Design | Branding</p>
</div>
</header>
<div class="entry-content small-text apercu"></div>
</article>
</label>
<label for="s3" id="slide3">
<article class="post-31 work type-work status-publish has-post-thumbnail hentry">
<header class="mb-3 pb-2">
<h1 class="entry-title white m-0 h4 gooper fontWeight400">Ladro Roasting</h1>
<div class="d-block apercu small-text noMargin">
<p>Website Design | Branding</p>
</div>
</header>
<div class="entry-content small-text apercu"></div>
</article>
</label>
<label for="s4" id="slide4">
<article class="post-31 work type-work status-publish has-post-thumbnail hentry">
<header class="mb-3 pb-2">
<h1 class="entry-title white m-0 h4 gooper fontWeight400">Ladro Roasting</h1>
<div class="d-block apercu small-text noMargin">
<p>Website Design | Branding</p>
</div>
</header>
<div class="entry-content small-text apercu"></div>
</article>
</label>
<label for="s5" id="slide5">
<article class="post-31 work type-work status-publish has-post-thumbnail hentry">
<header class="mb-3 pb-2">
<h1 class="entry-title white m-0 h4 gooper fontWeight400">Ladro Roasting</h1>
<div class="d-block apercu small-text noMargin">
<p>Website Design | Branding</p>
</div>
</header>
<div class="entry-content small-text apercu"></div>
</article>
</label>
</section>