Today, I completed the jQuery course on Code Academy and am now trying to create an image slider using it. While I have a general idea of how it should work, I feel like I'm missing a key element. My goal is to have the slider continuously running when the page is open. Can someone assist me with this? Currently, all 5 images have their opacity set to 0 in the CSS and I'm attempting to change it using my jQuery script.
Although I know this can be achieved using keyframes in CSS, I'm still getting acquainted with JavaScript and jQuery. Here's a snippet of my code:
$(document).ready(function(){
var img = $('.slides');
for(i = 0; i <= $img.length; i++){
$img[i].style('opacity', 1);
};
});/*gallery row*/
.img-slider-container{
margin: 10% 10%;
}
/*gallery list*/
.image-list{
}
.image-list li{
list-style: none;
display: inline-block;
}
.image-list li img{
display: block;
width: 15em;
opacity: 0;
}
/* gallery container */
.img-slider{
width: auto;
}<section class="img-slider-container row">
<div class="col-12 img-slider">
<ul class="image-list">
<li><img src="design/images/portfolio-images/one.jpg" class="slides" alt=""/></li>
<li><img src="design/images/portfolio-images/two.jpg" class="slides" alt=""/></li>
<li><img src="design/images/portfolio-images/three.jpg" class="slides" id="starting-image" alt=""/></li>
<li><img src="design/images/portfolio-images/four.jpg" class="slides" alt=""/></li>
<li><img src="design/images/portfolio-images/five.jpg" class="slides" alt=""/></li>
</ul>
</div>
</section>&