"Product thumbnail vertical slider jquery"
Bootstrap 4.1.1 Snippet by Naveen Mandwariya

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"> <link rel='stylesheet' href='https://sachinchoolur.github.io/lightslider/dist/css/lightslider.css'> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css'> <script src='https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js'></script> <section class="product-thumbnail-slider-nav"> <div class="container"> <div class="row"> <div class="col-md-8 offset-md-2"> <div class="slider-box"> <h2>Product Slider vertical by Naveen </h2> <ul id="lightSliderVertical"> <li data-thumb="https://i.ibb.co/qFBbSqr/programming.jpg"> <a href="https://i.ibb.co/qFBbSqr/programming.jpg" data-fancybox="gallery"> <img src="https://i.ibb.co/qFBbSqr/programming.jpg" /> </a> </li> <li data-thumb="https://i.ibb.co/vLqnmt8/hardware.jpg"> <a href="https://i.ibb.co/vLqnmt8/hardware.jpg" data-fancybox="gallery"> <img src="https://i.ibb.co/vLqnmt8/hardware.jpg" /> </a> </li> <li data-thumb="https://i.ibb.co/PCScmsT/gadget.jpg"> <a href="https://i.ibb.co/PCScmsT/gadget.jpg" data-fancybox="gallery"> <img src="https://i.ibb.co/PCScmsT/gadget.jpg" /> </a> </li> <li data-thumb="https://i.ibb.co/r2rQ4BT/design.jpg"> <a href="https://i.ibb.co/r2rQ4BT/design.jpg" data-fancybox="gallery"> <img src="https://i.ibb.co/r2rQ4BT/design.jpg" /> </a> </li> <li data-thumb="https://i.ibb.co/ZgZ18Q8/cons.jpg"> <a href="https://i.ibb.co/ZgZ18Q8/cons.jpg" data-fancybox="gallery"> <img src="https://i.ibb.co/ZgZ18Q8/cons.jpg" /> </a> </li> <li data-thumb="https://i.ibb.co/j3JDKYZ/coding.jpg"> <a href="https://i.ibb.co/j3JDKYZ/coding.jpg" data-fancybox="gallery"> <img src="https://i.ibb.co/j3JDKYZ/coding.jpg" /> </a> </li> <li data-thumb="https://i.ibb.co/GFw1P25/black-background.jpg"> <a href="https://i.ibb.co/GFw1P25/black-background.jpg" data-fancybox="gallery"> <img src="https://i.ibb.co/GFw1P25/black-background.jpg" /> </a> </li> <li data-thumb="https://i.ibb.co/GFw1P25/black-background.jpg"> <a href="https://i.ibb.co/GFw1P25/black-background.jpg" data-fancybox="gallery"> <img src="https://i.ibb.co/GFw1P25/black-background.jpg" /> </a> </li> <li data-thumb="https://i.ibb.co/jJRpYks/auto.jpg"> <a href="https://i.ibb.co/jJRpYks/auto.jpg" data-fancybox="gallery"> <img src="https://i.ibb.co/jJRpYks/auto.jpg" /> </a> </li> <li data-thumb="https://i.ibb.co/3SNYhHH/1st.jpg"> <a href="https://i.ibb.co/3SNYhHH/1st.jpg" data-fancybox="gallery"> <img src="https://i.ibb.co/3SNYhHH/1st.jpg" /> </a> </li> </ul> </div> </div> </div> </div> </section>
.product-thumbnail-slider-nav{ padding:40px 0; } .slider-box h2{ text-align: center; margin-bottom:30px; } #lightSlider { list-style: none outside none; padding-left: 0; margin-bottom:0; } li { display: block; float: left; cursor:pointer; } .lSSlideWrapper.usingCss ul li img { width: 100%; height: 100%; } .lSSlideOuter .lSPager.lSGallery li { opacity: 0.5; } .lSSlideOuter .lSPager.lSGallery li.active { opacity: 1; } lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li{ border-radius: 0; } lSSlideOuter .lSPager.lSGallery li.active:hover, .lSSlideOuter .lSPager.lSGallery li:hover { border-radius: 0; } .lSSlideOuter .lSPager.lSGallery img { display: block; height: 64px; max-width: 100%; } .codes{ bottom: 5%; left: 5%; position: fixed; } .codes div { border: 2px solid black; font-size: 20px; padding: 10px; background-color: red; } .codes div a{ text-decoration: none; color: white; font-weight: 800; }
$ = jQuery; $( document ).ready(function() { $h_slider_options = { gallery: true, item: 1, loop:true, slideMargin: 0, thumbItem: 6, galleryMargin: 10, thumbMargin: 10, }; $v_slider_options = { gallery: true, item: 1, loop:true, slideMargin: 0, thumbItem: 6, galleryMargin: 10, thumbMargin: 10, vertical: true }; h_slider = $('#lightSlider').lightSlider($h_slider_options); v_slider = $('#lightSliderVertical').lightSlider($v_slider_options); $selector = '#lightSlider li:not(".clone") a'; $selector += ',#lightSliderVertical li:not(".clone") a'; $().fancybox({ selector : $selector, backFocus : false, buttons : [ 'slideShow', 'share', 'zoom', 'fullScreen', 'thumbs', 'download', 'close' ] }); }); $( window ).resize(function() { slider.destroy(); h_slider = $('#ocassions-slider').lightSlider(h_slider_options); });

Related: See More


Questions / Comments: