<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);
});
