I'm working on a CSS carousel that I will insert into an HTML email. It's basically a form with radio buttons. Every time a label is clicked for a radio button, it should scroll to the next slide by changing the left margin to a lesser value. There are tabs at the bottom that should act as the labels.
The problem is, to get the tabs to sit on top of the slides, I had to use absolute instead of relative positioning on
the .car-thumbnails class. Now, when I click the first or the last tab repeatedly, the carousel will cycle through
all of the tabs.
I inspected the code, and it's like clicking the first or last tab checks and unchecks all of the other radio button inputs. Why would position:absolute affect it this way?
I know that's a lot of information, but I'm completely at a loss.
HTML:
<div class="carousel slide responsive" style="overflow:hidden;display:none;max-height:0px;width:580px;" width="580">
<input id="car-cbox-support" type="checkbox" checked="" style="display:none!important">
<input name="car-radio" type="radio" id="car1-radio-1" class="car-radio car-radio1" style="display:none!important">
<input name="car-radio" type="radio" id="car1-radio-2" class="car-radio car-radio2" style="display:none!important">
<input name="car-radio" type="radio" id="car1-radio-3" class="car-radio car-radio3" style="display:none!important">
<input name="car-radio" type="radio" id="car1-radio-4" class="car-radio car-radio4" style="display:none!important">
<input name="car-radio" type="radio" id="car1-radio-5" class="car-radio car-radio5" style="display:none!important">
<div class="car-cont" style="position:relative;background-color:#ffffff;">
<div class="car-frames">
<!-- Slide 1 Main Image -->
<a href="#"><img src="/green.png" alt="" border="0"></a>
<!-- Slide 2 Main Image -->
<a href="#"><img src="/purple.png" alt="" border="0"></a>
<!-- Slide 3 Main Image -->
<a href="#"><img src="/blue.png" alt="" border="0"></a>
<!-- Slide 4 Main Image -->
<a href="#"><img src="/red.png" alt="" border="0"></a>
<!-- Slide 5 Main Image -->
<a href="#"><img src="/yellow.png" alt="" border="0"></a>
</div>
<div class="car-controls">
<!--When slide 1 (car-nav-1) is showing, clicking the left arrow should transition to slide 5 (car1-radio-5) -->
<label for="car1-radio-5" class="car-ltn car-nav-1"></label>
<!--When slide 1 (car-nav-1) is showing, clicking the right arrow should transition to slide 2 (car1-radio-2) -->
<label for="car1-radio-2" class="car-rtn car-nav-1"></label>
<!--When slide 2 (car-nav-2) is showing, clicking the left arrow should transition to slide 1 (car1-radio-1) -->
<label for="car1-radio-1" class="car-ltn car-nav-2"></label>
<!--When slide 2 (car-nav-2) is showing, clicking the right arrow should transition to slide 3 (car1-radio-3) -->
<label for="car1-radio-3" class="car-rtn car-nav-2"></label>
<!--When slide 3 (car-nav-3) is showing, clicking the left arrow should transition to slide 2 (car1-radio-2) -->
<label for="car1-radio-2" class="car-ltn car-nav-3"></label>
<!--When slide 3 (car-nav-3) is showing, clicking the right arrow should transition to slide 4 (car1-radio-4) -->
<label for="car1-radio-4" class="car-rtn car-nav-3"></label>
<!--When slide 4 (car-nav-4) is showing, clicking the left arrow should transition to slide 3 (car1-radio-3) -->
<label for="car1-radio-3" class="car-ltn car-nav-4"></label>
<!--When slide 4 (car-nav-4) is showing, clicking the right arrow should transition to slide 5 (car1-radio-5) -->
<label for="car1-radio-5" class="car-rtn car-nav-4"></label>
<!--When slide 5 (car-nav-5) is showing, clicking the left arrow should transition to slide 4 (car1-radio-4) -->
<label for="car1-radio-4" class="car-ltn car-nav-5"></label>
<!--When slide 5 (car-nav-5) is showing, clicking the right arrow should transition to slide 1 (car1-radio-1) -->
<label for="car1-radio-1" class="car-rtn car-nav-5"></label>
</div>
</div>
<div class="car-thumbnails" style="display:none;">
<div class="car-container">
<!-- Thumbnail 1 -->
<label for="car1-radio-1" class="car-thumb car-thumb-1">
<p valign="middle"
style="font-family:'Lato', Arial, Helvetica, sans-serif;font-size:22px;vertical-align:middle;width:100%;height:auto;line-height:40px;color:#ffffff;margin:0px;">
green
</p>
</label>
<!-- Thumbnail 2 -->
<label for="car1-radio-2" class="car-thumb car-thumb-2">
<p valign="middle"
style="font-family:'Lato', Arial, Helvetica, sans-serif;font-size:22px;vertical-align:middle;width:100%;height:auto;line-height:40px;color:#ffffff;margin:0px;">
purple
</p>
</label>
<!-- Thumbnail 3 -->
<label for="car1-radio-3" class="car-thumb car-thumb-3">
<p valign="middle"
style="font-family:'Lato', Arial, Helvetica, sans-serif;font-size:22px;vertical-align:middle;width:100%;height:auto;line-height:40px;color:#ffffff;margin:0px;">
blue
</p>
</label>
<label for="car1-radio-4" class="car-thumb car-thumb-4">
<p valign="middle"
style="font-family:'Lato', Arial, Helvetica, sans-serif;font-size:22px;vertical-align:middle;width:100%;height:auto;line-height:40px;color:#ffffff;margin:0px;">
red
</p>
</label>
<label for="car1-radio-5" class="car-thumb car-thumb-5">
<p valign="middle"
style="font-family:'Lato', Arial, Helvetica, sans-serif;font-size:22px;vertical-align:middle;width:100%;height:auto;line-height:40px;color:#ffffff;margin:0px;">
yellow
</p>
</label>
</div>
</div>
</div>
CSS:
@media screen and (-webkit-min-device-pixel-ratio: 0) {
/* bugfix for Android 4.4 to support e ~ y */
body {
-webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
from {
padding: 0;
}
to {
padding: 0;
}
}
/* Hide Fallback content first */
.fallback {
display: none;
}
.carousel {
display: block !important;
max-height: none !important;
position: relative;
}
div[class~="aolmail_carousel"] {
display: none !important;
}
div[class~="aolmail_fallback"] {
display: block !important;
max-height: none !important;
position: relative;
}
/*
Selective blocking for clients.
- Samsung (#MessageViewBody) - no absolute positioning
- Comcast/Zimbra (body.MsgBody) - inconsistent CSS support
*/
#MessageViewBody .fallback,
body.MsgBody .fallback {
display: block;
}
#MessageViewBody .carousel,
body.MsgBody .carousel {
display: none !important;
}
input {
display: none;
}
.carousel a {
width: 100%;
display: block;
overflow: hidden;
}
.carousel .car-frames img {
display: block !important;
width: 100% !important;
height: auto !important;
}
.carousel.responsive {
width: 100% !important;
}
.carousel.slide a {
position: absolute;
top: 0px;
left: 0px;
opacity: 1;
width: 100%;
-webkit-animation: slide-anim 15s linear infinite;
}
.carousel.slide a:nth-child(1) {
position: relative;
-webkit-animation-delay: -16s;
}
.carousel.slide a:nth-child(2) {
-webkit-animation-delay: -13s;
}
.carousel.slide a:nth-child(3) {
-webkit-animation-delay: -10s;
}
.carousel.slide a:nth-child(4) {
-webkit-animation-delay: -7s;
}
.carousel.slide a:nth-child(5) {
-webkit-animation-delay: -4s;
}
/* iOS doesn't like negative delay with translates (transform:translateX(100%);) */
/* So we use margin although it is less "smooth" */
@-webkit-keyframes slide-anim {
/* start slide in */
0% {
margin-left: 100%;
}
/* end slide in */
5% {
margin-left: 0%;
}
/* start slide out */
20% {
margin-left: 0%;
}
/* end slide out */
25% {
margin-left: -100%;
}
/* start slide out */
40% {
margin-left: -100%;
}
/* end slide out */
45% {
margin-left: -200%;
}
60% {
margin-left: -200%;
}
/* end slide out */
65% {
margin-left: -300%;
}
80% {
margin-left: -300%;
}
/* end slide out */
85% {
margin-left: -400%;
}
100% {
margin-left: -400%;
}
}
.carousel.slide .car-radio:checked~.car-cont .car-frames {
position: relative;
left: 0px;
top: 0px;
width: 500% !important;
transition: left 1s;
}
.carousel.slide .car-radio2:checked~.car-cont .car-frames {
left: -100%;
}
.carousel.slide .car-radio3:checked~.car-cont .car-frames {
left: -200%;
}
.carousel.slide .car-radio4:checked~.car-cont .car-frames {
left: -300%;
}
.carousel.slide .car-radio5:checked~.car-cont .car-frames {
left: -400%;
}
.carousel.slide .car-radio:checked~.car-cont a {
width: 20%;
}
.carousel.slide .car-radio:checked~.car-cont a:nth-child(2) {
position: absolute;
left: 20%;
top: 0px;
}
.carousel.slide .car-radio:checked~.car-cont a:nth-child(3) {
position: absolute;
left: 40%;
top: 0px;
}
.carousel.slide .car-radio:checked~.car-cont a:nth-child(4) {
position: absolute;
left: 60%;
top: 0px;
}
.carousel.slide .car-radio:checked~.car-cont a:nth-child(5) {
position: absolute;
left: 80%;
top: 0px;
}
/* Navigation arrows */
.carousel .car-ltn,
.carousel .car-rtn {
z-index: 100;
display: none;
width: 10%;
height: 100%;
position: absolute;
background-color: transparent;
top: 0px;
cursor: pointer;
}
.car-ltn {
left: 0px;
}
.car-rtn {
right: 0px;
}
.carousel .car-ltn::after {
content: url(http://media.4at5.net/email_domains/olg/0204/leftArrow.png);
width: 0;
height: 0;
position: absolute;
top: 40%;
margin-top: -8px;
-webkit-filter: drop-shadow(1px 1.5px 1px rgba(0, 0, 0, .4));
}
.carousel .car-rtn::after {
content: url(http://media.4at5.net/email_domains/olg/0204/rightArrow.png);
width: 0;
height: 0;
position: absolute;
top: 40%;
left: 10%;
margin-top: -8px;
-webkit-filter: drop-shadow(1px 1.5px 1px rgba(0, 0, 0, .4));
}
.car-ltn::after {
border-right: 0px solid #ffffff;
left: 25%;
}
.car-rtn::after {
border-left: 0px solid #ffffff;
right: 25%;
}
.carousel #car-cbox-support:checked~.car-cont .car-nav-1 {
display: block;
}
.car-radio2:checked~.car-cont .car-controls .car-nav-2,
.car-radio3:checked~.car-cont .car-controls .car-nav-3,
.car-radio4:checked~.car-cont .car-controls .car-nav-4,
.car-radio5:checked~.car-cont .car-controls .car-nav-5 {
display: block;
}
.carousel .car-radio:checked~.car-cont,
.carousel .car-radio:checked~.car-cont *,
.carousel .car-radio:checked~.car-thumbnails * {
-webkit-animation: none;
}
/* Thumbnails */
.car-thumbnails {
position: absolute !important;
display: block !important;
bottom: 0px;
width: 100%;
}
.carousel #car-cbox-support:checked~.car-thumbnails .car-container {
display: block !important;
text-align: center;
position: relative;
/*background-color: #473729;*/
}
.carousel .car-thumb {
width: 19.2%;
opacity: 1;
z-index: 100;
cursor: pointer;
display: inline-block;
margin: 3px 0px;
background-color: rgba(0, 0, 0, 0.1);
}
@-webkit-keyframes focus3-anim {
0% {
background-color: rgba(0, 0, 0, 1);
}
20% {
background-color: rgba(72, 72, 72, 0.5);
}
40% {
background-color: rgba(72, 72, 72, 0.5);
}
60% {
background-color: rgba(72, 72, 72, 0.5);
}
80% {
background-color: rgba(72, 72, 72, 0.5);
}
100% {
background-color: rgba(0, 0, 0, 1);
}
}
/* to eliminate use of delay */
@-webkit-keyframes focus3-anim-2 {
0% {
background-color: rgba(72, 72, 72, 0.5);
}
20% {
background-color: rgba(0, 0, 0, 1);
}
40% {
background-color: rgba(72, 72, 72, 0.5);
}
60% {
background-color: rgba(72, 72, 72, 0.5);
}
80% {
background-color: rgba(72, 72, 72, 0.5);
}
100% {
background-color: rgba(72, 72, 72, 0.5);
}
}
@-webkit-keyframes focus3-anim-3 {
0% {
background-color: rgba(72, 72, 72, 0.5);
}
20% {
background-color: rgba(72, 72, 72, 0.5);
}
40% {
background-color: rgba(0, 0, 0, 1);
}
60% {
background-color: rgba(72, 72, 72, 0.5);
}
80% {
background-color: rgba(72, 72, 72, 0.5);
}
100% {
background-color: rgba(72, 72, 72, 0.5);
}
}
@-webkit-keyframes focus3-anim-4 {
0% {
background-color: rgba(72, 72, 72, 0.5);
}
20% {
background-color: rgba(72, 72, 72, 0.5);
}
40% {
background-color: rgba(72, 72, 72, 0.5);
}
60% {
background-color: rgba(0, 0, 0, 1);
}
80% {
background-color: rgba(72, 72, 72, 0.5);
}
100% {
background-color: rgba(72, 72, 72, 0.5);
}
}
@-webkit-keyframes focus3-anim-5 {
0% {
background-color: rgba(72, 72, 72, 0.5);
}
20% {
background-color: rgba(72, 72, 72, 0.5);
}
40% {
background-color: rgba(72, 72, 72, 0.5);
}
60% {
background-color: rgba(72, 72, 72, 0.5);
}
80% {
background-color: rgba(0, 0, 0, 1);
}
100% {
background-color: rgba(72, 72, 72, 0.5);
}
}
.car-thumb:nth-child(1) {
-webkit-animation: focus3-anim 15s ease-in infinite;
}
.car-thumb:nth-child(2) {
/*-webkit-animation: focus3-anim 15s linear 5s infinite;*/
-webkit-animation: focus3-anim-2 15s ease-in infinite;
}
.car-thumb:nth-child(3) {
/*-webkit-animation: focus3-anim 15s linear 10s infinite;*/
-webkit-animation: focus3-anim-3 15s ease-in infinite;
}
.car-thumb:nth-child(4) {
/*-webkit-animation: focus3-anim 15s linear 10s infinite;*/
-webkit-animation: focus3-anim-4 15s ease-in infinite;
}
.car-thumb:nth-child(5) {
/*-webkit-animation: focus3-anim 15s linear 10s infinite;*/
-webkit-animation: focus3-anim-5 15s ease-in infinite;
}
.car-radio:checked~.car-thumbnails .car-thumb:nth-child(1),
{
background-color: rgba(72, 72, 72, 0.5) !important;
}
.car-radio1:checked~.car-thumbnails .car-thumb:nth-child(1) {
background-color: rgba(0, 0, 0, 1);
}
.car-radio2:checked~.car-thumbnails .car-thumb:nth-child(2),
.car-radio3:checked~.car-thumbnails .car-thumb:nth-child(3),
.car-radio4:checked~.car-thumbnails .car-thumb:nth-child(4),
.car-radio5:checked~.car-thumbnails .car-thumb:nth-child(5) {
background-color: rgba(0, 0, 0, 1);
}
}
@media only screen and (max-width: 580px) {
.carousel .car-thumb {
width: 19.2%;
opacity: 1;
z-index: 100;
cursor: pointer;
display: inline-block;
margin: 0px 0px;
background-color: rgba(72, 72, 72, 0.5);
}
}
It's because when you click your leftmost and rightmost tabs, you're actually clicking the left and right arrows above the tabs (the arrows are set to 100% height).
You can fix this by setting your tabs container's z-index to be greater than that of the arrows:
/* Thumbnails */
.car-thumbnails {
position:absolute !important;
display:block !important;
bottom:0px;
width:100%;
z-index: 101;
}
Fiddle: http://jsfiddle.net/69gvwzf4/1/