Add Slider on the thumbnail images:
- Show only four thumbnail images
- How to add the functionality of moving the images with the next and previous arrows.
- Set the arrows to right position
- Add the slider in the thumbnail images.
Here is the raw code -
WooCommerce - Product - Image Section - Thumbnail (CSS)
/* set the position of thumbnail images*/
.woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images {
display:flex;
column-gap: 14px;
margin-bottom: 0;
}
div.product div.images.woocommerce-product-gallery .flex-viewport {
flex-basis: 82%;
height:50px;
}
.woocommerce-js div.product div.images .flex-control-thumbs {
flex-basis: 18%;
width:300px;
}
/* Move the images on the Left side*/
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
flex-direction: row-reverse;
}
/* set the min width of thumbnail images*/
ol.flex-control-nav.flex-control-thumbs li {
min-width:100%;
}
/* Limit the thumbnail images to four images*/
.woocommerce-js div.product div.images .flex-control-thumbs {
overflow:hidden ;
zoom: 1;
}
ol.flex-control-nav.flex-control-thumbs {
height:390px !important;
margin:0px;
padding:0px;
width:300px;
}
WooCommerce - Product - Image Section - Navigation Arrows (PHP)
//Filter WooCommerce Flexslider options - Add Navigation Arrows
add_filter( 'woocommerce_single_product_carousel_options', 'sf_update_woo_flexslider_options' );
/**
* Filer WooCommerce Flexslider options - Add Navigation Arrows
*/
function sf_update_woo_flexslider_options( $options ) {
$options['directionNav'] = true;
return $options;
}
WooCommerce - Product - Image Section - Navigation Arrows (CSS)
/* Set the direction of arrows*/
ul.flex-direction-nav {
position: absolute;
height:420px;
z-index: 99999;
width: 100%;
left: 0;
margin: 0;
padding: 0px;
list-style: none;
display:flex;
flex-direction:column;
justify-content: space-between;
}
/* set position of previous arrow*/
li.flex-nav-prev { margin-top:-25px !important;
left:-5px !important;}
/* set position of next arrow*/
li.flex-nav-next{ margin-top:300px; right:130px; !important;}
a.flex-next {visibility:hidden;}
a.flex-prev {visibility:hidden;}
/* next arrow appear */
a.flex-next::after {
visibility:visible;content: '\f107';
font-family: 'Font Awesome 5 Free';
margin-top: 0px;
font-size: 20px;
font-weight: bold;
}
/* previous arrow appear*/
a.flex-prev::before {
visibility:visible;
content: '\f106';
font-family: 'Font Awesome 5 Free';
margin-top: 0px;
margin-left: 30px;
font-size: 20px;
font-weight: bold;
}
ul.flex-direction-nav li a {
color: #ccc;
}
ul.flex-direction-nav li a:hover {
text-decoration: none;
}
ul.flex-direction-nav li a:hover {
text-decoration: none;
}
.flex-control-nav{
top:0px;
}
WooCommerce - Product - Image Section - Thumbnail Slider (JS)
/* scroll the images through images index*/
const updateCarousel = (selectedImgIndex, lastImgIndex) => {
let indexOfImgToScroll = selectedImgIndex - 3;
if (selectedImgIndex < 3 || lastImgIndex <= 3) indexOfImgToScroll = -1;
else if (selectedImgIndex === lastImgIndex) indexOfImgToScroll = indexOfImgToScroll-1;
document.querySelectorAll(".flex-control-thumbs li").forEach((li, i) => {
if (i <= indexOfImgToScroll) li.style.marginTop= '-150px';
else li.style.marginTop ='0';
li.style.transition = 'all 0.4s linear';
});
};
/* Mutation observer is used to keep the record of active images and change the image accordingly*/
document.addEventListener("DOMContentLoaded", (event) => {
setTimeout(() => {
let observer = new MutationObserver((mutations) => {
mutations.forEach((mutationRecord) => {
if (mutationRecord.target.className === "flex-active") {
const allElements = mutationRecord.target.parentNode.parentNode.children;
const targetedElement = mutationRecord.target.parentNode;
const indexOfTargetedElement = Array.from(allElements).indexOf(targetedElement);
const lastElementIndex = document.querySelectorAll(".flex-control-thumbs li").length - 1;
updateCarousel(indexOfTargetedElement, lastElementIndex);
}
});
});
document.querySelectorAll(".flex-control-thumbs li img").forEach((img, i) => {
observer.observe(img, {
attributes: true,
attributeFilter: ['style', 'class'],
});
});
}, 0);
});
Post a Comment