Making an Image carousel using setInterval

Related searches

I am making an image carousel using setInterval and if statements and the images display fine however when the carousel starts again an icon that is usually displayed when the page can't find your image is displayed.

<img src="images/img1.jpg" id="images">

<script>
var start = 1;
var timer = setInterval(carousel, 1000);

  function carousel(){
    var image_data;
    if (start==1) {
      image_data="images/img1.jpg";
    }else if (start==2) {
      image_data="images/img2.jpg";
    }else if (start==3) {
      image_data="images/img3.jpg";
    }else if (start==4) {
      image_data="images/img4.jpg";
    }else if (start==5) {
      image_data="images/img5.jpg";
    }else {
      start = 0;
    }
    document.getElementById('images').src=""+ image_data;
    start++;
  }
</script>

You reset start to zero when it's equal to 6. This can be basically seen as a mod with 6. Your code can be simplified to the following

<script>
var start = 1;
var timer = setInterval(carousel, 1000);

  function carousel(){
    var image_data; 
    start =  start % 6;
    image_data = "images/img" +start+ ".jpg";
    document.getElementById('images').src=""+ image_data;
    start++;
  }
</script>

use setInterval() to make a simple image slider, I am making a simple image slider that runs through a directory containing images. The images is called "img_1", "img_2" and "img_3", so the� I have a really basic image carousel that I just wrote. Basically I'm trying to keep it as small and light weight as possible, but I get the feeling that I've gotten way off the beaten path of how

When you set start to 0, you set the source of the image to undefined for that iteration of the carousel, since you haven't assigned a value to the image source.

Instead, consider using modulus to select the picture to display.

// initially, start = 0
if (start % numImages === 0) {
  // display image 1
}
else if (start % numImages === 1) {
   // display image 2
}

OR: you can call your method and return when setting start to 0:

start = 1;
carousel();
return;

But, for a more maintainable solution, you may want to do this:

const images = [ 'images/image1.jpg', ... ];
const currImage = images[ start % images.length ];
document.getElementById('images').src = currImage;
start++;

// This part is optional, it's unlikely a user would be on the page long enough
// for start to overflow
if (start === images.length) {
  start = 0;
}

That would be your whole carousel function.

This way, you can easily add more images later without modifying your function too much. All you'd have to do is list the files you're displaying in the array, and you'd be all set.

Javascript image slider setInterval(), This tutorial will walk you through building an image slider using the jQuery library. We are using the setInterval() native JavaScript method to automate the � Image courtesy the author. I was working on my personal portfolio and I wanted to make a slideshow for the photography page. My first inclination was to use a library, such as Bootstrap Carousel

That's because when start gets to 5 & you use the 5th image, then you increment to 6 at the end of the function. Then the next time through, you don't find a needed value in your cascade of if statements, so you end up setting the img url to the word "null". Since all your images have the same format except the number, you could get rid of the if cascade and just set the src to 'images/img' + start + '.jpg'. Then all you have to do is right before you set it, make sure it hasn't gone over your largest image index like so:

if (start>5) {start=1;}

then after you set the source of the img, increment your counter.

If your images aren't really going to be just indexed like that, then you can store the URLs in an array, & use the counter as an index into that array and just check the index stays < array.length while you increment.

How to Build your own a Sliding Image Carousel Gallery, This fifth video in a series on creating a slide with vanilla JavaScript will look at setInterval Duration: 16:33 Posted: Nov 10, 2019 The slideshow — also known as the image carousel, the slider, or the rotating banner — is a commonly requested tutorial among people who are learning JavaScript. In this tutorial, we’ll

05 Slide Show JS setInterval, <div id="slideshow">. 2. <div class="mySlides">. 3. <img src="http://www. gettyimages.pt/gi-resources/images/Homepage/Hero/PT/ PT_hero_42_153645159.jpg">. The setInterval() method will continue calling the function until clearInterval() is called, or the window is closed. The ID value returned by setInterval() is used as the parameter for the clearInterval() method. Tip: 1000 ms = 1 second. Tip: To execute a function only once, after a specified number of milliseconds, use the setTimeout() method.

simple image slider using setInterval - JSFiddle, How about this: every 3 seconds, you hide the previous image and show the next image. This is simple. Some changes I made: I prefer� The data-ride="carousel" attribute tells Bootstrap to begin animating the carousel immediately when the page loads. The "Indicators" part: The indicators are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user is currently viewing).

Using both setInterval and setTimeout for simple image carousel , const images = document.querySelectorAll("img"); let i = 0; setInterval(function(){ images[i].style.display = 'block'; i++; }, 2000); Make sure that the i++ statement is at the bottom. That way we can make sure that when the setInterval() method runs for the first time, the first indexed image from the images array will be visible.

Comments
  • When start gets to six, it is reset to zero but image_data remains undefined.