What are the reasons for the slideshow not functioning on a server but working properly offline

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

Answer №1

Before initializing the slider, there seems to be a JavaScript error in your code.

An uncaught ReferenceError: Modernizr is not defined

To resolve this issue, you need to address the dependency problem. Once fixed, your slider should function properly.

(Consider switching from http to https in the Modernizr url)

Answer №2

I am facing issues with my browser blocking the Modernizr script as well as several other elements from loading properly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensuring that all routes in Express 4 redirect from HTTP to HTTPS

Is there a way to redirect all http:// requests to https:// for every route in my express 4 application? I've tried this method, but it seems to cause a redirect loop error I'm currently utilizing the Express 4 Router in the following manner: ...

Utilizing Kendo UI Jsonp in conjunction with a WordPress json plugin: A comprehensive

Issue at Hand: My goal is to modify a kendo UI data-binding example to work with my own jsonp request. Description of the Problem: Starting from a data-binding example here, I have created this jsfiddle that demonstrates the desired functionality. To a ...

Can I use more than one AudioContext at a time?

In my project, I am developing a React App using MeteorJS that utilizes the Web Audio API. This app consists of multiple pages, each of which utilizes web audio functionality. The issue I am facing is that I have hit the limit of 6 audio contexts allowed i ...

Submit the form on a different page without using the target attribute set to "_blank"

I'm facing a situation where I have two buttons that serve different purposes when submitting the same form. One button submits the form and runs a database query, while the other provides users with a preview of the query results. What I want is for ...

Hosting a WCF service in a virtual directory on a shared hosting environment

In the midst of my work on a next js project, I encountered the need to invoke a wcf service. To rectify an error caused by the secure server hosting the site, necessitating the service also be hosted securely, I resorted to creating a virtual directory ...

How can you implement a repeating carousel with JavaScript?

I recently came across some carousels on and was intrigued by how they smoothly repeat the slides. Instead of jumping back to the first slide when reaching the end, it seamlessly transitions from the final slide back to the first one. I am eager to learn ...

how to make a "select all" checkbox with Angular 2

`I'm currently working on a feature that allows a checkbox to select all checkboxes within a specific div when checked. The div exclusively contains checkboxes. //TS FILE constructor() { } checkAll: ElementRef | undefined; selectAll(isChecked: ...

Passing array data from JavaScript to PHP using POST method in Joomla 3.x

Looking for a way to send an array from JavaScript to a Joomla 3.x PHP file? var data = ['foo', 'bar']; $.post('index.php?option=component&view=componentview&Itemid=123&tmpl=component&layout=xlsx', {'xls ...

Ajax/ASP.Net-powered PDF Viewer/Editor

Currently, I am working on a project that aims to enable document reading directly within the browser, eliminating the need for any additional software installations. This feature is intended to be a crucial part of a management application tailored for bu ...

steering clear of iframes, yet incorporating certain iframe-like functionalities in Rails

One of my sites is my primary site, while the other serves as a help site with documentation. The main site is built using Rails, whereas the secondary one is just a basic WordPress blog. Right now, I have it embedded into the main site using an iframe. ...

Exploring the connections between React components and JSON schema forms

When the user selects an option from the dropdown in step 1 and submits, they will be redirected to either step2schema or step3schema based on their selection. Here is the link to the jsfiddle for reference: const Form = JSONSchemaForm.default; const st ...

What is the best way to create dynamic table column widths?

Is there a way to adjust the width of table columns based on the data they contain, even when the overall table width is set to 100%? I've noticed that the column widths behave differently in this scenario. ...

The issue at hand is that one of the JavaScript buttons is functioning properly, while the other is not playing the video as intended. What steps can

I've been working on a script for my school project website that should make buttons play videos, but I'm running into an issue where it only works for the first button (btn). Programming isn't my strong suit, and I put this together based o ...

Cryptic mention of visuals post Webpack React compilation

I've been working on my application with webpack and so far things have been improving. It seems like none of my modules are corrupt. I must admit, I was quite surprised when this tool managed to shrink my 150mb React app down to 2mb, even though I do ...

Why is it impossible for me to show the title "individual name:"?

<p id="display1"></p> <p id="display2"></p> var player1= { alias: 'Max Power', skills: ['shooting', 'running'] }; $("#display1").append( "<br/>" + "player alias :" + player1.alia ...

Extract SCSS import filepaths using NPM and Gulp

Currently, in my gulp setup, I have several CSS files being produced - a general 'core' one, and then template-specific stylesheets. Instead of re-compiling all stylesheets with each change, the setup only compiles the necessary ones. However, t ...

The state in Reactjs is not displaying as expected

Check out my ReactJS todo app that I created. However, I am facing an issue with deleting todos. Currently, it always deletes the last todo item instead of the one I click on. For example, when trying to remove 'Buy socks', it actually deletes ...

javascript - What is the method to determine if an array contains a negative number?

As a novice JavaScript programmer, I found myself in need of checking whether an array of integers contained any negative values, but didn't want to resort to looping through each element and returning multiple times. After considering various options ...

Prevent the cursor from exiting the div element when the tab key is pressed

Currently, I have implemented a search input box allowing users to either enter a value or select from a list of suggestions. The issue arises when the user selects an option using the tab key, as it causes the cursor to move outside the input box despite ...

View a pink map on Openlayers 2 using an iPhone

I am currently working on a project where I am trying to track my location using my smartphone and display it on a map. To achieve this, I am utilizing openlayers 2. However, I am encountering an issue. When I implement the code below in a Chrome Browser ...