http://sachinchoolur.github.io/lightslider/
### HTML ###
<div id="image-thumbnail">
<div class="carousel-control left" id="left">
<i class="fa fa-angle-left fa-3"></i>
</div>
<div class="carousel-control right" id="right">
<i class="fa fa-angle-right fa-3"></i>
</div>
</div>
### Javascript ###
$.ajax({
type: "POST",
url: "https://= $domain?>/getImages",
data: {product_id : = $product_id ?>},
success: function (result) {
data = JSON.parse(result);
$("#image-thumbnail").append("
");
for (const [key, value] of Object.entries(data[= $product_id ?>].img)){
$("#image-gallery").append("<li><img src='https://" + value.url + "' width=400px></li>");
}
var slider = $("#image-gallery").lightSlider({
item: 1,
autoWidth: false,
slideMove: 1, // slidemove will be 1 if loop is true
slideMargin: 0,
addClass: '',
mode: "slide",
useCSS: true,
cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',//
easing: 'linear', //'for jquery animation',////
speed: 400, //ms'
auto: true,
pauseOnHover: true,
loop: true,
slideEndAnimation: true,
pause: 2000,
keyPress: false,
controls: false,
prevHtml: '',
nextHtml: '',
rtl:false,
adaptiveHeight:false,
vertical:false,
verticalHeight:500,
vThumbWidth:100,
thumbItem:9,
pager: true,
gallery: false,
galleryMargin:10,
thumbMargin: 5,
currentPagerPosition: 'middle',
enableTouch:false,
enableDrag:false,
freeMove:true,
swipeThreshold: 40,
responsive : [],
onBeforeStart: function (el) {},
onSliderLoad: function (el) {
el.find('li').zoom({magnify: 3});
},
onBeforeSlide: function (el) {},
onAfterSlide: function (el) {},
onBeforeNextSlide: function (el) {},
onBeforePrevSlide: function (el) {}
});
$('#left').on('click', function () {
slider.goToPrevSlide();
});
$('#right').on('click', function () {
slider.goToNextSlide();
});
console.log(data);
$("#product_name").append(data[= $product_id ?>].name);
$("#product_info").append(data[= $product_id ?>].description);
$("#pricing").append(data[= $product_id ?>].price + " tax excl");
}
});