I am trying to add a LightSlider image carousel with thumbnails to my Big Cartel website (to display product images) but I can't get it to work (even with example images)
I have tested it on Codepen & JSFiddle - works fine there, but on my bigcartel.com store, The photos show up stacked. No thumbnail gallery.
My Code (working): Codepen
width:500px;
}
.ls-slider ul {
list-style: none outside none;
padding-left: 0;
margin-bottom:0;
}
.ls-slider li {
display: block;
float: left;
margin-right: 6px;
cursor:pointer;
}
.ls-slider li img {
display: block;
height: auto;
max-width: 100%;
}```
If it's working everywhere except the website, maybe it's a problem with your server. Maybe the code is messed up or the links are failing.
The reason why it didn't work, was because you are setting the lightslider controls to false: try replacing the controls to "true" rather than "false "
$('#lightSlider').lightSlider({
gallery: true,
item: 1,
loop:true,
slideMargin: 0,
thumbItem: 4,
controls: true,
});