I have been working on a way to build a carousel purely with html and css. No Javascript. So far I have been liking what I found in the web and seen some tutorials.
Here is my issue though.
I build a mixin loop with Less to build a bunch of css but for some reason it seems to be missing a closing brace ")"
on line 4 (of the pasted code below).
What I tried:
- Remove the block of Less code completely -> error dissapeared.
- Removed all the code inside the
.carousel-reviews
-> error persists - removed the the
.carousel-reviews
around the child selector -> error persists - Changed the variable name from
@i
to@index
-> error persists - Removed all the code from inside the
&__activator:nth-of-type( @i )
selector -> error persists
Hope someone can see what I am doing wrong here.
.loop( @i ) when ( @i > 0 ) {
.carousel-reviews {
&__activator:nth-of-type( @i ) {
&:checked ~ .carousel_track {
transform: translateX(calc(@i - 1) * 100%);
}
&:checked ~ .carousel__slide:nth-of-type(@i) {
transition: opacity @slideTransition, transform @slideTransition;
top: 0;
left: 0;
right: 0;
opacity: 1;
transform: scale(1);
}
&:checked ~ .carousel__controls:nth-of-type(@i) {
display: block;
opacity: 1;
}
&:checked ~ .carousel__indicators .carousel__indicator:nth-of-type(@i) {
opacity: 1;
}
}
}
.loop ( ( @i - 1 ) );
}
If I was not complete enough please let me know and I can add the info to the question.
EDIT 1
It seems that the compilers are stopping when they get to the first @i
on line 4.
For some reason when I remove that first variable the error moves to line 8.
This suggests that for some reason the variable @i
is not allowed inside the :nth-of-type()
.
Anyone know what is going on here?
I will keep searching and updating when I find new answers or questions
EDIT 2
Found the sollution. Check answer