I am facing an issue with my image slider. When I open index.html in a browser offline, the image slider works perfectly. However, when I try to open it on a server (where it takes a long time to load due to images being over 5mb), the slider stops working. Clicking on the white dots in the right corner does not trigger any action. Any advice or help would be greatly appreciated.
Below is the code snippet:
<!-- BEGIN - SlideShow -->
<div class="ImageSlider">
<div class="ImageSlider-scroller">
<ul class="ImageSlider-items">
<li class="ImageSlider-item" style="background-image: url(http://vitas.sk/OnlineTv/images/1.jpg);"></li>
<li class="ImageSlider-item" style="background-image: url(http://vitas.sk/OnlineTv/images/2.jpg);"></li>
<li class="ImageSlider-item" style="background-image: url(http://vitas.sk/OnlineTv/images/3.jpg);"></li>
</ul>
<nav class="ImageSlider-indicators">
<a href="javascript: void 0;" class="ImageSlider-indicator js-ImageSlider-dot"></a>
<a href="javascript: void 0;" class="ImageSlider-indicator js-ImageSlider-dot"></a>
<a href="javascript: void 0;" class="ImageSlider-indicator js-ImageSlider-dot"></a>
</nav>
</div>
</div>
<!-- END - SlideShow -->
/* Image Slider CSS */
.ImageSlider {
display: flex;
align-items: stretch;
height: 50%;
}
...
(remaining CSS code)
And here's the JavaScript part:
...
(Javascript code)
...
new ImageSlider();