The Best Free product gallery slider that you can use for your eCommerce website. This product gallery works with lightbox popup & it’s fully responsive.

You can swipe to find Next & Previous Images in the main image area or swipe select from thumbnails just below the main image which also has auto sliding. If you click on the image, It pops up as a nice Fancybox gallery with navigations for other images.

Not only that. This product image gallery slider has image zoom feature too.

This is a lightweight product Image Gallery Carousel and it uses Slick Carousel, Fancybox & Jquery.

Main Features of Product Gallery Carousel

  • Responsive
  • Swipeable
  • Popup with Fancybox
  • Image zoom
  • Auto sliding (Autoplay) thumbnails
  • Lightweight
  • Separate Image Sizes for Thumbnail, Main Image & Big Image
  • Easily Customizable

Libraries used

  • slick.css
  • jquery.fancybox.min.css
  • jquery
  • popper.min.js
  • slick.min.js
  • jquery.fancybox.min.js

Download this Product Slider with FancyBox and customize as you want it to look nicer. Happy coding!

HTML

<section id="detail">
<div class="container">
<div class="row">
<div class="main_img">

<div class="product-images demo-gallery">
	<h1 style="font-family: Helvetica, Arial, 'sans-serif'; color: #333; text-align: center">Product Gallery Slider with FancyBox for Ecommerce Website</h1>

<div class="main-img-slider">
<a data-fancybox="gallery" href="img/photo-1501854140801-50d01698950b.jpg"><img src="img/840x480/photo-1501854140801-50d01698950b.jpg" class="img-fluid"></a>
<a data-fancybox="gallery" href="img/photo-1474524955719-b9f87c50ce47.jpg"><img src="img/840x480/photo-1474524955719-b9f87c50ce47.jpg" class="img-fluid"></a>
<a data-fancybox="gallery" href="img/photo-1465146344425-f00d5f5c8f07.jpg"><img src="img/840x480/photo-1465146344425-f00d5f5c8f07.jpg" class="img-fluid"></a>
<a data-fancybox="gallery" href="img/photo-1453785675141-67637e2d4b5c.jpg"><img src="img/840x480/photo-1453785675141-67637e2d4b5c.jpg" class="img-fluid"></a>
<a data-fancybox="gallery" href="img/photo-1437422061949-f6efbde0a471.jpg"><img src="img/840x480/photo-1437422061949-f6efbde0a471.jpg" class="img-fluid"></a>
<a data-fancybox="gallery" href="img/photo-1418065460487-3e41a6c84dc5.jpg"><img src="img/840x480/photo-1418065460487-3e41a6c84dc5.jpg" class="img-fluid"></a>
</div>

<ul class="thumb-nav">
<li><img src="img/72x50/photo-1501854140801-50d01698950b.jpg"></li>
<li><img src="img/72x50/photo-1474524955719-b9f87c50ce47.jpg"></li>
<li><img src="img/72x50/photo-1465146344425-f00d5f5c8f07.jpg"></li>
<li><img src="img/72x50/photo-1453785675141-67637e2d4b5c.jpg"></li>
<li><img src="img/72x50/photo-1437422061949-f6efbde0a471.jpg"></li>
<li><img src="img/72x50/photo-1418065460487-3e41a6c84dc5.jpg"></li>
</ul>
</div>
</div>
</div>
</div>
</section>

CSS

<link rel='stylesheet' href="css/slick.css">
<link rel='stylesheet' href="css/jquery.fancybox.min.css">
<style>
.slick-slider .slick-prev, .slick-slider .slick-next {
  z-index: 100;
  font-size: 2.5em;
  height: 40px;
  width: 40px;
  margin-top: -20px;
  color: #B7B7B7;
  position: absolute;
  top: 50%;
  text-align: center;
  color: #000;
  opacity: .3;
  transition: opacity .25s;
  cursor: pointer;
	background: #FFFFFF;
}
.slick-slider .slick-prev:hover, .slick-slider .slick-next:hover {
  opacity: .65;
}
.slick-slider .slick-prev {
  left: 0;
}
.slick-slider .slick-next {
  right: 0;
}

#detail .product-images {
  width: 100%;
  margin: 0 auto;
  border:1px solid #eee;
}
#detail .product-images li, #detail .product-images figure, #detail .product-images a, #detail .product-images img {
  display: block;
  outline: none;
  border: none;
}
#detail .product-images .main-img-slider figure {
  margin: 0 auto;
  padding: 0 2em;
}
#detail .product-images .main-img-slider figure a {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}
#detail .product-images .main-img-slider figure a img {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
#detail .product-images .thumb-nav {
  margin: 0 auto;
  padding:20px 10px;
  max-width: 600px;
}
#detail .product-images .thumb-nav.slick-slider .slick-prev, #detail .product-images .thumb-nav.slick-slider .slick-next {
  font-size: 1.2em;
  height: 20px;
  width: 26px;
  margin-top: -10px;
}
#detail .product-images .thumb-nav.slick-slider .slick-prev {
  margin-left: -30px;
}
#detail .product-images .thumb-nav.slick-slider .slick-next {
  margin-right: -30px;
}
#detail .product-images .thumb-nav li {
  display: block;
  margin: 0 auto;
  cursor: pointer;
}
#detail .product-images .thumb-nav li img {
  display: block;
  width: 100%;
  max-width: 75px;
  margin: 0 auto;
  border: 2px solid transparent;
  -webkit-transition: border-color .25s;
  -ms-transition: border-color .25s;
  -moz-transition: border-color .25s;
  transition: border-color .25s;
}
#detail .product-images .thumb-nav li:hover, #detail .product-images .thumb-nav li:focus {
  border-color: #999;
}
#detail .product-images .thumb-nav li.slick-current img {
  border-color: #d12f81;
}
	
.main_img { width: 500px; margin: 0 auto}
</style>

JS

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>	
<script src="js/popper.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
$('#detail .main-img-slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  infinite: true,
  arrows: true,
  fade: true,
  autoplay: true,
  autoplaySpeed: 4000,
  speed: 300,
  lazyLoad: 'ondemand',
  asNavFor: '.thumb-nav',
  prevArrow: '<div class="slick-prev"><i class="i-prev"></i><span class="sr-only sr-only-focusable"><</span></div>',
  nextArrow: '<div class="slick-next"><i class="i-next"></i><span class="sr-only sr-only-focusable">></span></div>' });

// Thumbnail/alternates slider for product page
$('.thumb-nav').slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  infinite: true,
  centerPadding: '0px',
  asNavFor: '.main-img-slider',
  dots: false,
  centerMode: false,
  draggable: true,
  speed: 200,
  focusOnSelect: true,
  prevArrow: '<div class="slick-prev"><i class="i-prev"></i><span class="sr-only sr-only-focusable"><</span></div>',
  nextArrow: '<div class="slick-next"><i class="i-next"></i><span class="sr-only sr-only-focusable">></span></div>' });



//keeps thumbnails active when changing main image, via mouse/touch drag/swipe
$('.main-img-slider').on('afterChange', function (event, slick, currentSlide, nextSlide) {
  //remove all active class
  $('.thumb-nav .slick-slide').removeClass('slick-current');
  //set active class for current slide
  $('.thumb-nav .slick-slide:not(.slick-cloned)').eq(currentSlide).addClass('slick-current');
});
//# sourceURL=pen.js

You can also check this JQuery Ecommerce product gallery slider with Smoothproducts.

If you found any error creating files with these code, you can download it from below.

If you found this post is useful, don’t forget to share and support this on your favorite social media platform.

Author

Hi! I’m Dimuthu Freelance Web Designer, Developer, Creative Graphic Designer, Digital Marketer & Successful Blogger. Hire me! if you need any support.

2 Comments

  1. Hi, see that on smartphones it doesn’t work well.
    The pictures don’t be responsive … why? even your demo have equal problem

    • Dim Per Reply

      You just have to add this in the header. it should be working
      < meta name="viewport" content="width=device-width, initial-scale=1.0" >

Write A Comment

Pin It