Having trouble with multiple slideshows not functioning correctly. Any ideas on how to fix this

My current challenge involves setting up multiple slideshows on a single page with navigation dots to switch between each slideshow. The issue arises when I try to incorporate more than one slideshow, as the navigation dots either stop working or begin controlling slides from other slideshows.

I've searched through various threads for solutions and attempted different approaches without success. If anyone can identify what's going wrong in my code and provide a solution, it would be much appreciated. Note: Apologies for any grammatical errors in my explanation.

This is the code snippet I'm utilizing, originally sourced from W3Schools: Slideshow Link 1 and Slideshow Link 2

...
javascripthtmlcss

Answer №1

There seems to be an issue with this code, likely stemming from conflicting variables in your JavaScript. My suggestion would be to create a separate JavaScript file and link it in your index.html like so:

<scritp src=" *your JavaScript file path* "> </script>

By separating your code in this way, it will be easier to identify and troubleshoot any problems that may arise. You can then follow the same structure as demonstrated in the following links from w3cSchool: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_quotes_slideshow and https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_multiple)

I have indicated areas within the code that you should address according to your specific needs:

The first two sections demonstrate default settings, while the third section is my addition. To expand on this pattern, you'll need to add more sections to the code yourself.

  <p>Slideshow 1:</p>
    // Code for Slideshow 1 here
    
    <p>Slideshow 2:</p>
    // Code for Slideshow 2 here

    <p>Slideshow 3:</p>
    // Additional slideshows can be added here

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

Loading input datalist in Firefox postponed

My goal is to implement an input field for a username that allows users to select from a wide range of names/usernames. I want them to be able to enter a partial string from the name or username. Instead of loading the entire list initially, I aim to load ...

javascripthtmljqueryformsautosuggest

Conceal the Slider until Fully Loaded with Slick Slider by Ken Wheeler

I am currently using a slider function called Slick by Ken Wheeler. It is currently being loaded in the footer with just two variables. $('.slickSlider').slick({ dots: true, fade: true }); Currently, ...

jquerycssjquery-pluginssliderslick.js

Is there a way for me to store the retrieved information from an API into a global variable using Node.js?

function request2API(option){ const XMLHttpRequest = require('xhr2');//Cargar módulo para solicitudes xhr2 const request = new XMLHttpRequest(); request.open('GET', urlStart + ChList[option].videosList + keyPrefix + key); request. ...

javascriptnode.js

Firebase ref.on('value') will repeatedly trigger, even if no changes have occurred

My current setup involves using an event listener to monitor changes in my real-time database. const [chats, setChats] = useState({}); const ref = db.ref(`users/${sender}/chat/`); ref.on('value', (snapshot) => { const data = snapshot ...

javascriptreactjsfirebasefirebase-realtime-database

Retrieve the public URL from the index.html file following the build process

In my project, I utilized ReactJS by creating an app with the command npx create-react-app my-app. To build the project, I used yarn build. Within the package.json file, the scripts section appears as follows: "scripts": { "start": "react-scripts sta ...

javascriptreactjsnpmdeploymentbuild

Utilizing React Typescript for Passing Props and Implementing them in Child Components

I'm currently working with React and TypeScript and attempting to pass data as props to a child component for use. However, I've encountered an error that I can't quite understand why it's happening or how to resolve it. Additionally, I ...

javascriptreactjstypescript

Troubleshooting Vue.js: Overutilization of EventBus causing repeated function calls

I'm in the process of implementing an 'undo delete' feature. To achieve this, I am utilizing an Event Bus to broadcast an event to two separate components as shown below: Undo.vue: EventBus.$emit(`confirm-delete-${this.category}`, this.item ...

javascriptvue.jsvuexvue-events

Vertically align the body of Bootstrap 4 cards with variable header line rows

I have a minimalistic design where I showcase products using cards. However, I am facing an issue where some product titles wrap onto 2 lines while others only wrap onto 1 line. My goal is to vertically align the body text (and price buttons as well). &l ...

htmlcssbootstrap-4alignment

CSS for Page Header with Scroll-Over Content

Having trouble creating a "collapsing header" design where the page content scrolls over the banner image. I've tried adjusting z-index and positioning properties in CSS, but can't achieve the desired effect. Any help or guidance would be greatly ...

csssquarespace

Creating unique CSS class and ID names dynamically in PHP

I have two divs with randomly generated IDs and I would like to use those IDs in my CSS instead of using inline styles. Is there a way to achieve this without creating a separate PHP file with a CSS header? For example, I want the padding for the ID $id_ ...

phpcssrandom

How come the previous sibling element appears on top when the initial sibling is set to a position of absolute?

I have encountered an issue with two sibling sections. I applied position:absolute to the first section, but the second section is overlapping it. Even after trying to use position:relative on the second section, the problem persists. https://i.stack.imgur ...

htmlcss

Adjusting the content within a text area using an AngularJS service

I am currently editing text in a textarea within the admin view and I would like to display it through an angular service on the user view. However, I want the text to be displayed in multiple rows, maintaining the same format that I entered in the textare ...

javascriptangularjs

Tips for showcasing the error message from the back-end instead of the status code

After setting up a Backend server and deploying it to Heroku, I have been using the server URL to send and receive data. However, I've encountered an issue where instead of displaying the actual error message, the status code is being returned. Here ...

javascriptnode.jsreactjsexpressredux

Obtaining values from a table using jQuery

The code snippet below is used to create a table: <table class="table table-bordered table-striped" id="assignedvs"> <thead> <tr> <th>VlId</th> <th>Name</th> ...

phpjqueryhtml

Execute a javascript function using dynamic calling

I have defined several functions inside an array structure as shown below. checkInputType : function(sel){ alert($(sel).prop('type')); }, checkSelect : function(el){ ....... }, ..... These functions can be called like options.checkInput($(thi ...

javascriptjqueryarrays

In TypeScript version 2.4.1, the fontWeight property encounters an error where a value of type 'number' cannot be assigned to the types of '"inherit", 400'

When attempting to set the fontWeight property in TypeScript, I encounter the following error: Types of property 'test' are incompatible. Type '{ fontWeight: number; }' is not assignable to type 'Partial<CSSProperties>&a ...

javascriptcsstypescriptmaterial-designmaterial-ui

CSS to resolve HTML alignment problems

I am new to HTML and CSS, trying to practice formulating a few things but my efforts are proving futile. Below is the code and images for your reference. I would appreciate your opinion. .container { display: block; width: 200px; height: 120px; } ...

htmlcss

Always make sure to call for files using their respective names in

Here is how my project structure looks like: . ├── node_modules ├── package.json ├── www │ ├── css │ ├── js │ ├── file.js │ ├── folder │ ├── file2.js │ ├─ ...

javascriptnpmwebpack

Troubleshooting issue with C# Ajax success response not triggering alert

I am facing an issue where the alert box for success does not show even though the code successfully inserts contact details using ajax and C#. Strangely, when I debug through the JavaScript debugger in Chrome, the alert pops up as expected. Here is the co ...

javascriptc#jqueryajax

Swift: NSAttributeString generates unexpected HTML output

I attempted to use NSAttributeString to parse HTML, but encountered a problem when trying to display a table within a list item. <ol> <li>first <table> <tbody> <tr> ...

htmliosswiftmobile