Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript

Slider Banner With Javascript

Post a Comment
Can someone explain to me how to make an image slider with JavaScript only (not jQuery)? I have found many questions addressing this issue, but have had difficulty understanding th

Solution 1:

I've redone your logic to show the images, note that I am not pro with css, the result is almost what you wanted, the image exit to the left but the new image come from the left too, you might want to tweak the css to make it work like you want.

Here is the jsfiddle

Here is the html:

<divclass="eight columns all slider"><imgsrc="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg"class="hide"><imgsrc="http://images.medicaldaily.com/sites/medicaldaily.com/files/2013/08/04/0/62/6259.jpg"class="hide"><imgsrc="http://animalia-life.com/data_images/wallpaper/bunny/bunny-01.jpg"class="hide"></div>

Now there is one img per image, note the added class slider to the div

Now for the js, I take all img inside slider, calculate the last image to show and the first, then add/remove show/hide class to the correct elements.

//This is the latest img, it will serve to know wich img to hidevar old = listPict.length - 1;
//This will represent the current img to showvar current = 0;

//The timeout will recall this function every 3 secfunctionloop() {
    //We set the class of the current img to show
    listPict[current].setAttribute('class', 'show');
    //We hide the last img
    listPict[old].setAttribute('class', 'hide');

    //Update the variables !
    old = current;
    current++;

    //If the current is bigger then the list of images, return to 0if (current === listPict.length)
        current = 0;

    //Recall every 3 sec//Note that we don't put () because we don't want to execute it right awaysetTimeout(loop, 3000);
}

loop();

Now we need to add the css to make the transition work !

<!-- I added position: absolute; --><!-- This allow me to use left -->
.slider img{
    margin:15px;
    height: 95%;
    width:95%;
    border-radius:5px;    
    position: absolute;
}

<!-- This show the current image with a transition --><!-- It replace the left attribute to 0 and the opacity to 1 -->
.slider img.show{
    opacity:1;
    left: 0px;
    -webkit-transition:all 1.0s ease-in-out;
    -moz-transition:all 1.0s ease-in-out;
    -o-transition:all 1.0s ease-in-out;
    transition:all 1.0s ease-in-out;

}

<!-- This hide the current image with a transition --><!-- It move the image to the left and the opacity to 0 -->
.slider img.hide{
    left: -1000px;
    opacity: 0;
    -webkit-transition:all 1.0s ease-in-out;
    -moz-transition:all 1.0s ease-in-out;
    -o-transition:all 1.0s ease-in-out;
    transition:all 1.0s ease-in-out;
}

Solution 2:

i think if you get confuesd with logic and want a very easy way to work with image slider you should use bootstrap .well i'm gonna give you an example buddy. Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap is completely free to download and use!

Carousel Plugin

The Carousel plugin is a component for cycling through elements, like a carousel (slideshow).

How To Create a Carousel

The following example shows how to create a basic carousel:

<!DOCTYPE html><htmllang="en"><head><title>Bootstrap Example</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><style>.carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style></head><body><divclass="container"><br><divid="myCarousel"class="carousel slide"data-ride="carousel"><!-- Indicators --><olclass="carousel-indicators"><lidata-target="#myCarousel"data-slide-to="0"class="active"></li><lidata-target="#myCarousel"data-slide-to="1"></li><lidata-target="#myCarousel"data-slide-to="2"></li><lidata-target="#myCarousel"data-slide-to="3"></li></ol><!-- Wrapper for slides --><divclass="carousel-inner"role="listbox"><divclass="item active"><imgsrc="img_chania.jpg"alt="Chania"width="460"height="345"></div><divclass="item"><imgsrc="img_chania2.jpg"alt="Chania"width="460"height="345"></div><divclass="item"><imgsrc="img_flower.jpg"alt="Flower"width="460"height="345"></div><divclass="item"><imgsrc="img_flower2.jpg"alt="Flower"width="460"height="345"></div></div><!-- Left and right controls --><aclass="left carousel-control"href="#myCarousel"role="button"data-slide="prev"><spanclass="glyphicon glyphicon-chevron-left"aria-hidden="true"></span><spanclass="sr-only">Previous</span></a><aclass="right carousel-control"href="#myCarousel"role="button"data-slide="next"><spanclass="glyphicon glyphicon-chevron-right"aria-hidden="true"></span><spanclass="sr-only">Next</span></a></div></div></body></html>

hope that help you

Solution 3:

I've done that in an easy way, but if there is many banners, them it get's more bigger.

let currentBanner;
currentBanner ? currentBanner = currentBanner : currentBanner = 1;

functionchangeBanner() {
  const banner1 = document.getElementById('banner1');
  const banner2 = document.getElementById('banner2');
  const banner3 = document.getElementById('banner3')
  if (currentBanner == 1) {
    banner1.style.display = 'none'
    banner2.style.display = 'block'
    currentBanner++
  } elseif (currentBanner == 2) {
    banner2.style.display = 'none'
    banner3.style.display = 'block'
    currentBanner++
  } elseif (currentBanner == 3) {
    banner3.style.display = 'none'
    banner1.style.display = 'block'
    currentBanner = 1;
  }
}
<divclass="flex item"style="margin: 4vw 6vw 0vw 6vw; position: relative;"><inputid="banner2"class="banners"active="true"style="display: none"type="image"src=path></input><inputid="banner3"class="banners"active="true"style="display: none"type="image"src=path></input><inputid="banner1"class="banners"active="false"type="image"src=path></input></div>

Post a Comment for "Slider Banner With Javascript"