1 min readAug 9, 2017
Hey MDM!
Thanks for the kind words ๐
I was able to create any number of slides with any of the effects ๐
One thing to make sure of is that although all of the HTML
is created, are all the CSS
rules generated that are necessary?
The stylus
variable $noOfSlides
must be updated to match the number of slides you wish to create or each of the rules for each slide must be written within your CSS;
.carousel__activator:nth-of-type(1):checked ~ .carousel__track {
transform: translateX(0%);
}
.carousel__activator:nth-of-type(1):checked ~ .carousel__slide:nth-of-type(1) {
animation: carousel-show-slide 0.5s;
top: 0;
left: 0;
right: 0;
}
.carousel__activator:nth-of-type(1):checked ~ .carousel__controls:nth-of-type(1) {
display: block;
}
.carousel__activator:nth-of-type(1):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(1) {
opacity: 1;
}
I hope that can help you out!