So I'm creating a simple image carousel for a mock webpage I'm building. I'm currently following this tutorial on YouTube. Minute: 7:10 shows the function I'm asking about.
In this tutorial he creates this jquery function to activate the carousel.
$(document).ready(function(){
$(".nextLink").on("click", function(){
var currentActiveImage = $(".image-shown");
var nextActiveImage = currentActiveImage.next();
currentActiveImage.removeClass(".image-shown").addClass(".image-hidden");
nextActiveImage.addClass(".image-shown").removeClass("image-hidden");
});
});
Here's the HTML
<div class="carousel-outer">
<figure class="carousel-inner">
<img class="image-shown" src="images/team/alex_morrales.jpg" alt="">
<img class="image-hidden" src="images/team/david_kim.jpg" alt="">
<img class="image-hidden" src="images/team/jenny_tabers.jpg" alt="">
<img class="image-hidden" src="images/team/joey_barrett.jpg" alt="">
<img class="image-hidden" src="images/team/melinda_lee.jpg" alt="">
<img class="image-hidden" src="images/team/rachel_dotson.jpg" alt="">
</figure>
<div class="img-buttons-box">
<div class="img-buttons">
<a class="previousLink" href="#">Previous</a>
<a class="nextLink" href="#">Next</a>
</div>
</div>
</div>
Here's the CSS
.image-shown {
display: inline-block;
}
.image-hidden {
display: none;
}
I'm under the impression that the above function in itself is enough to have the carousel work well and cycle through the photos seamlessly.
Always displaying the next one in the lineup and hiding the rest.
However, this is obviously not the case as this is what it looks like before and after I hit the "next" button for the first time (it doesn't do anything on subsequent presses).
Before
After
Help understanding why the function, as is, isn't seemingly enough to make the carousel work is greatly appreciated, thank you.
Aucun commentaire:
Enregistrer un commentaire