Debut Theme 2021 Product Thumbnail Slider In Desktop

Debut Theme 2021 Product Thumbnail Slider In Desktop

Debut Theme Product Thumbnail Slider In Desktop. if you have some technical skills can be made yourself.

Let’s see how to make Thumbnail Slider

In theme.js, search for initDesktopBreakpoint. Replace it with this updated code:


_initDesktopBreakpoint: function() {
if (this.mqlMediumUp.matches) {
if (
  this.container.querySelectorAll(this.selectors.productThumbImages)
.length > 3
) {
 this._initThumbnailSlider();
}
if (this.settings.zoomEnabled) {
this.imageZoomWrapper.forEach(
function(element, index) {
this._enableZoom(element, index);
}.bind(this)
);
}
}
},

Next, go to the Sections and open the product-template.liquid file

search for medium-up–hide and Remove it.

medium-up--hide

Go to the theme.scss.liquid file in the Assets section and add the following CSS to the bottom of the file:


@media only screen{
.template-product .main-content{padding-top:22px;}
.product-single__media-group{position:relative;}
.thumbnails-wrapper{position:relative;top:10px;text-align:center;margin:0 2px 30px 2px;}
.thumbnails-slider__btn{position:absolute;top:50%;transform:translateY(-50%);padding-top:10px;padding-bottom:10px;}
.thumbnails-slider__btn .icon{height:14px;width:14px;}
.thumbnails-slider__prev{left:-15px;}
.thumbnails-slider__next{right:-15px;}
.product-single__thumbnail{margin:0 auto;}
}
.product-single__thumbnails{display:flex;flex-wrap:wrap;margin-top:15px;margin-left:-9px;margin-right:-9px;}
@media only screen{
.product-single__thumbnails{margin-top:0;justify-content:center;}
.slider-active .product-single__thumbnails{display:block;margin:0 auto;max-width:75%;overflow:hidden;}
}
@media only screen{
.product-single__thumbnails-slider-track{position:relative;left:0;top:0;display:block;}
.product-single__thumbnails-slider-track:before,.product-single__thumbnails-slider-track:after{content:"";display:table;}
.product-single__thumbnails-slider-track:after{clear:both;}
}
.product-single__thumbnails-item{flex:0 0 25%;padding-left:5px;}
@media only screen{
.product-single__thumbnails-item.slick-slide{padding-bottom:10px;padding-left:2.5px;padding-right:2.5px;vertical-align:middle;}
.thumbnails-slider--active .product-single__thumbnails-item.slick-slide{padding-top:5px;padding-bottom:5px;}
}
@media only screen{
.product-single__thumbnails-item-slide{display:block;float:left;height:100%;min-height:1px;padding:5px 2.5px;}
}

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top