{"id":166,"date":"2017-07-18T02:00:27","date_gmt":"2017-07-18T02:00:27","guid":{"rendered":"http:\/\/info.juliusgoh.life\/?p=166"},"modified":"2020-06-02T10:04:07","modified_gmt":"2020-06-02T10:04:07","slug":"lightslider-js-nice-convinient-plugin-for-slider","status":"publish","type":"post","link":"https:\/\/info.juliusgoh.life\/?p=166","title":{"rendered":"Lightslider  js (Nice &#038; Convinient Plugin for Slider)"},"content":{"rendered":"<p>http:\/\/sachinchoolur.github.io\/lightslider\/<\/p>\n<pre>\r\n### HTML ###\r\n&lt;div id=\"image-thumbnail\"&gt;\r\n    &lt;div class=\"carousel-control left\" id=\"left\"&gt;\r\n        &lt;i class=\"fa fa-angle-left fa-3\"&gt;&lt;\/i&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"carousel-control right\" id=\"right\"&gt;\r\n        &lt;i class=\"fa fa-angle-right fa-3\"&gt;&lt;\/i&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<pre>\r\n### Javascript ###\r\n$.ajax({\r\n    type: \"POST\",\r\n    url: \"https:\/\/<?= $domain?>\/getImages\",\r\n    data: {product_id : <?= $product_id ?>},\r\n    success: function (result) {\r\n        data = JSON.parse(result);\r\n        $(\"#image-thumbnail\").append(\"<ul id='image-gallery'><\/ul>\");\r\n        for (const [key, value] of Object.entries(data[<?= $product_id ?>].img)){\r\n            $(\"#image-gallery\").append(\"&lt;li&gt;&lt;img src='https:\/\/\" + value.url + \"' width=400px&gt;&lt;\/li&gt;\");\r\n        }\r\n\r\n    var slider = $(\"#image-gallery\").lightSlider({\r\n    item: 1,\r\n    autoWidth: false,\r\n    slideMove: 1, \/\/ slidemove will be 1 if loop is true\r\n    slideMargin: 0,\r\n\r\n    addClass: '',\r\n    mode: \"slide\",\r\n    useCSS: true,\r\n    cssEasing: 'ease', \/\/'cubic-bezier(0.25, 0, 0.25, 1)',\/\/\r\n    easing: 'linear', \/\/'for jquery animation',\/\/\/\/\r\n\r\n    speed: 400, \/\/ms'\r\n    auto: true,\r\n    pauseOnHover: true,\r\n    loop: true,\r\n    slideEndAnimation: true,\r\n    pause: 2000,\r\n\r\n    keyPress: false,\r\n    controls: false,\r\n    prevHtml: '',\r\n    nextHtml: '',\r\n\r\n    rtl:false,\r\n    adaptiveHeight:false,\r\n\r\n    vertical:false,\r\n    verticalHeight:500,\r\n    vThumbWidth:100,\r\n\r\n    thumbItem:9,\r\n    pager: true,\r\n    gallery: false,\r\n    galleryMargin:10,\r\n    thumbMargin: 5,\r\n    currentPagerPosition: 'middle',\r\n\r\n    enableTouch:false,\r\n    enableDrag:false,\r\n    freeMove:true,\r\n    swipeThreshold: 40,\r\n\r\n    responsive : [],\r\n\r\n    onBeforeStart: function (el) {},\r\n    onSliderLoad: function (el) {\r\n        el.find('li').zoom({magnify: 3});\r\n    },\r\n    onBeforeSlide: function (el) {},\r\n    onAfterSlide: function (el) {},\r\n    onBeforeNextSlide: function (el) {},\r\n    onBeforePrevSlide: function (el) {}\r\n    });\r\n\r\n    $('#left').on('click', function () {\r\n        slider.goToPrevSlide();\r\n    });\r\n\r\n    $('#right').on('click', function () {\r\n        slider.goToNextSlide();\r\n    });\r\n\r\n    console.log(data);\r\n    $(\"#product_name\").append(data[<?= $product_id ?>].name);\r\n    $(\"#product_info\").append(data[<?= $product_id ?>].description);\r\n    $(\"#pricing\").append(data[<?= $product_id ?>].price  + \" tax excl\");\r\n    }\r\n});\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>http:\/\/sachinchoolur.github.io\/lightslider\/ ### HTML ### &lt;div id=&#8221;image-thumbnail&#8221;&gt; &lt;div class=&#8221;carousel-control left&#8221; id=&#8221;left&#8221;&gt; &lt;i class=&#8221;fa fa-angle-left fa-3&#8243;&gt;&lt;\/i&gt; &lt;\/div&gt; &lt;div class=&#8221;carousel-control right&#8221; id=&#8221;right&#8221;&gt; &lt;i class=&#8221;fa fa-angle-right fa-3&#8243;&gt;&lt;\/i&gt; &lt;\/div&gt; &lt;\/div&gt; ### Javascript ### $.ajax({ type: &#8220;POST&#8221;, url: &#8220;https:\/\/\/getImages&#8221;, data: {product_id : }, success: function (result) { data = JSON.parse(result); $(&#8220;#image-thumbnail&#8221;).append(&#8220;&#8221;); for (const [key, value] of Object.entries(data[].img)){ $(&#8220;#image-gallery&#8221;).append(&#8220;&lt;li&gt;&lt;img src=&#8217;https:\/\/&#8221; + value.url [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":212,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,13,5,14],"tags":[],"_links":{"self":[{"href":"https:\/\/info.juliusgoh.life\/index.php?rest_route=\/wp\/v2\/posts\/166"}],"collection":[{"href":"https:\/\/info.juliusgoh.life\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/info.juliusgoh.life\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/info.juliusgoh.life\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/info.juliusgoh.life\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=166"}],"version-history":[{"count":4,"href":"https:\/\/info.juliusgoh.life\/index.php?rest_route=\/wp\/v2\/posts\/166\/revisions"}],"predecessor-version":[{"id":618,"href":"https:\/\/info.juliusgoh.life\/index.php?rest_route=\/wp\/v2\/posts\/166\/revisions\/618"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/info.juliusgoh.life\/index.php?rest_route=\/wp\/v2\/media\/212"}],"wp:attachment":[{"href":"https:\/\/info.juliusgoh.life\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/info.juliusgoh.life\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/info.juliusgoh.life\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}