Lightslider js (Nice & Convinient Plugin for Slider)

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:///getImages",
    data: {product_id : },
    success: function (result) {
        data = JSON.parse(result);
        $("#image-thumbnail").append("");
        for (const [key, value] of Object.entries(data[].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[].name);
    $("#product_info").append(data[].description);
    $("#pricing").append(data[].price  + " tax excl");
    }
});

You may also like...