JQuery Carousel

Image carousel

by neohekate

HTML

<div id="envelope">
  <div id="holder">
    <img src=" " id="carousel">
  </div>
  <div id="bbs">
    <button id="back" onclick="goback()">
      Prev.
    </button>
    <button id="front" onclick="goforward()">
      Next
    </button>
  </div>
</div>

CSS

#envelope {
  width: 400px;  /* Change these to change carousel width */
  margin: 0 auto; /* Change these to change carousel alignment */
}
#holder {
  width: 400px; /* Change these to change carousel width */
  height: 250px; /* Change these to change carousel height */
  border: 1px solid #000;
  overflow: hidden;
  background-image: url("https://www.rover.com/blog/wp-content/uploads/2019/06/cat-2934720_1920.jpg"); /* 1ST IMAGE HERE */
  background-size: 100% 100%;
  margin-bottom: 10px;
}

#holder img {
  width: 400px;  /* Change these to change carousel width */
  height: 250px;  /* Change these to change carousel height */
  display: none;
}

#bbs {
  width: 100px;
  margin: 0 auto; /* Change these to change button alignment */
}

JavaScript

var picarray = ["https://media.timeout.com/images/105641115/image.jpg",
                "https://i.ytimg.com/vi/AIQLBiGUCQ4/maxresdefault.jpg",
                "https://static.toiimg.com/photo/msid-69058419/69058419.jpg?1137762",
                "https://d25tv1xepz39hi.cloudfront.net/2016-07-16/files/cat-sample_1313.jpg",
                ]; //ALL IMAGES *BUT* FIRST IMAGE HERE

var i = -1;
var filled = false;

$(document).ready(function(){
   $("#back").click(function(){
      if (i > 0) {
        $("#carousel").fadeToggle(0.0000001);
        $("#carousel").fadeToggle();
        i -=1;
        $("#carousel").attr('src', picarray[i]);
        $("#holder").css('background-image', "url('" + picarray[i + 1] + "')");
         } else if (i == 0) {
        $("#carousel").fadeToggle(0.0000001);
        $("#carousel").fadeToggle();
        i -= 1;
        $("#carousel").attr('src', 'https://www.rover.com/blog/wp-content/uploads/2019/06/cat-2934720_1920.jpg'); //1ST IMAGE HERE
        $("#holder").css('background-image', "url('" + picarray[i + 1] + "')")
        }
       });
       $("#front").click(function(){
         if (i == -1 && filled == false) {
            i +=1;
            $("#carousel").attr('src', picarray[i]);
            $("#carousel").fadeIn();
            filled = true;
        } else if (i <= picarray.length - 2 && i >= 0) {
        		$("#carousel").fadeToggle(0.0000001);
            $("#carousel").fadeToggle();
            i +=1;
            $("#carousel").attr('src', picarray[i]);
            $("#holder").css('background-image', "url('" + picarray[i - 1] + "')");
       } else if (i == -1 && filled == true) {
            $("#carousel").fadeToggle(0.0000001);
            $("#carousel").fadeToggle();
            i +=1;
            $("#carousel").attr('src', picarray[i]);
            $("#holder").css('background-image', "url('https://www.rover.com/blog/wp-content/uploads/2019/06/cat-2934720_1920.jpg')"); //1ST IMAGE HERE
            }
           });
       ...