Making an image slider with jquery

Question

I am completely new to jquery (as of today I just took the code academy course on jquery). I am attempting to make an image slider. I feel like I have working idea but am missing something fundamental. I want it to just run infinitely so I have it set to run continuously as the page is open. Can anyone help me out? I have the opacity of all 5 images set to 0 in the css and am trying to change it with the jquery function I wrote.

I know I can do this with keyframes in css. I am fairly well versed in CSS. I am just tyring to get a grip on javascript and jquery at this point. Take a look:

 $(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> 

Answer 1

use setInterval to run your script infinitely.. And also you have defines $img incorrectly it should be $(img) . So, try something like:

$(document).ready(function(){
  var img = $('.slides');
  setInterval(function(){for(i = 0; i <= $(img).length; i++){
    $(img[i]).css('opacity', 1)}
  },1000);

});