Image Carousel with Thumbnails

Loads only one image at a time. Can also add more images to the widget even after its been initialized.

by Rishi Gautam

HTML

<div class='mainContainer'>
  <div class='carouselContainer'>
    <div class='prevButton button'><</div>
      <div class='button nextButton'>></div>
      <div class='imageView imageViewCurrent'></div>
      <div class='imageView imageViewNext'></div>
      <div class='imageView imageViewPrev'></div>
    </div>
    <div class='thumbStripContainer'>
      <div class='ts_leftButton'></div>
      <div class='ts_rightButton'></div>
      <div id='thumbStrip' class='thumbStrip'></div>
    </div>
</div>

CSS

.mainContainer {
  width: 400px;
  height: 490px;
  background-color: blue;
}
.carouselContainer {
  width: 400px;
  height: 400px;
  border-color: red;
  border-width: 2px;
  overflow: hidden;
  position: relative;
}
.imageView {
  width: 400px;
  height: 400px;
  position: absolute;
  background-color: #ddd;
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.imageViewCurrent {
}
.imageViewNext {
  margin-left: 400px;
}
.imageViewPrev {
  margin-left: -400px;
}
.button {
  position: inline;
  float: left;
  cursor: pointer;
  z-index: 10;
  position: absolute;
  color: #fff;
  font-size: 20px;
}
.prevButton {
  margin: 185px 0px 0px 5px;
}
.nextButton {
  margin: 185px 0px 0px 380px;
}
.thumbStripContainer {
  background-color: #aaa;
  width: 400px;
  height: 90px;
  position: relative;
  overflow: hidden;
}
.thumbStrip {
  width: 800px;
  overflow: hidden;
}
.thumb {
  float: left;
  background-size: cover;
  margin: 7px 5px 0px 5px;
  width: 75px;
  height: 75px;
}
.ts_leftButton {
  width: 30px;
  height: 30px;
  position: absolute;
  margin-top: 30px;
  margin-left: 5px;
  cursor: pointer;
  background-image: url('https://is02.ezphotoshare.com/2017/09/29/sSKv9B.png');
}
.ts_rightButton {
  width: 50px;
  height: 50px;
  background-image: url('https://is02.ezphotoshare.com/2017/09/29/sSKv9B.png');
  background-repeat: no-repeat;
  position: absolute;
  margin-left: 365px;
  margin-top: 30px;
  cursor: pointer;
  background-position-x: -30px;
}

JavaScript

var images = ['https://i.pinimg.com/736x/38/b1/e8/38b1e87bc846b58cc21000bf73d0383f--beautiful-bugs-lady-bugs.jpg',
  'http://d2r5da613aq50s.cloudfront.net/wp-content/uploads/288900.image0.jpg',
  'https://i.pinimg.com/736x/68/00/0b/68000b86a3ee15a22de5647ae20c2538--macro-photography-snails.jpg',
  'https://i.pinimg.com/originals/3a/57/af/3a57af2f373f6a67efe99f07277838b1.jpg',
  'https://i.pinimg.com/originals/76/61/1b/76611b190e76947ccc5852fa9ec3afe6.jpg',
  'https://i.pinimg.com/736x/e9/7d/75/e97d7539fea5282903d0af542ea8b572--photography-flowers-macro-photography.jpg',
  'http://wallpaperscraft.com/image/macro_ripe_sweet_food_figs_75223_300x300.jpg'
]

$('.imageViewCurrent').css('background-image', 'url(' + images[0] + ')');
generateThumbStrip();

var counter = 0;
var ready = true;
$('.nextButton').on('click', function(e) {
  if (ready) {
    ready = false;
    counter++;
    
    if(counter == images.length)
   		counter = 0;
    
    $('.imageViewNext').css('background-image', 'url(' + images[counter] + ')');
    $('.imageViewNext').animate({
      'margin-left': '0px'
    }, 300, function() {
      $('.imageViewCurrent').css('background-image', 'url(' + images[counter] + ')');
      $('.imageViewNext').css('margin-left', '400px');
      ready = true;
    });
  }
});

$('.prevButton').on('click', function(e) {
  if (ready) {
    ready = false;
    counter--;
    
    if(counter == -1)
   		counter = images.length -1;
    
    $('.imageViewPrev').css('background-image', 'url(' + images[counter] + ')');
    $('.imageViewPrev').animate({
      'margin-left' : '0px'
    }, 300, function() {
      $('.imageViewCurrent').css('background-image', 'url(' + images[counter] + ')');
      $('.imageViewPrev').css('margin-left', '-400px');
      ready = true;
    });
  }
});

$('.ts_rightButton').on('click', function() {
	var marginLeftValue = parseInt($('#thumbStrip').css('margin-left').replace('px', ''));
  console.log('marginLeftValue ', marginLeftValue);
 ...