I have created a simple full-page slider using a list and keeping the second list item within the viewport. I am now trying to add an "active" class to the current slide, which is always the second one. I attempted to target it using nth-child(2) but haven't been successful so far due to clutter in my approach.
Is there an easier solution that I might be overlooking?
You can view the CodePen HERE
HTML
<div id="slider">
<ul>
<li>
<h1>Slide 1</h1>
<a href="" class="slider__next">Go to slide 2</a>
</li>
<li>
<h1>Slide 2</h1>
<a href="" class="slider__next">Go to slide 3</a>
</li>
<li>
<h1>Slide 3</h1>
<a href="" class="slider__next">Go to slide 4</a>
</li>
<li>
<h1>Slide 4</h1>
<a href="" class="slider__next">Go to slide 5</a>
</li>
<li>
<h1>Slide 5</h1>
<a href="" class="slider__next">Go to slide 1</a>
</li>
</ul>
</div>
CSS
#slider {
position: relative;
overflow: hidden;
margin: 0 auto 0 auto;
height: 100%;
width: 100%;
ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
height: 100%;
width: 100%;
... (CSS code continues)
}
}
}
jQuery
(jQuery code remains the same)