Having trouble with incorporating multiple sliders on your website using W3.CSS?

I'm in the process of designing a portfolio website and have decided to incorporate modals to showcase my projects. I've opted to use the W3.CSS framework for this purpose.

The issue I'm currently facing is that only the first slideshow seems to be functioning correctly. For the subsequent ones, all I can see are the navigation arrows. I suspect that the problem lies in needing to reset my Javascript function for each modal individually. However, despite my attempts at various solutions based on my limited understanding of Javascript, nothing seems to be working as expected.

Any assistance would be greatly appreciated!

Here's a snippet of my HTML:

    
    <!-- Code snippet here -->

This is the CSS used:

.mySlides 
{
display: none;
}
.w3-left, .w3-right, .w3-badge
{
cursor: pointer;
}
.w3-badge
{
height: 13px;
width: 13px;
padding: 0;
background-color: transparent;
}

And here's the included Javascript:

    
    // JavaScript code here
javascripthtmlcss

Answer №1

Today, I encountered the same issue and managed to find a solution.

The key is to assign unique names to your classes and functions so that Javascript can distinguish between different slideshows.

For instance, in my code, I used "3rdfloor" for the first slideshow and then "4thfloor" for the next one. You can see an example in the snippet below:

Check it out: 

    <div id="3rd Floor" class="w3-container city" style="display:none">
    <div class="container 75%">
      <div class="w3-content w3-display-container"> <a class="w3-btn-floating w3-display-left" onclick="plusDivs3rdfloor(-1)">&#10094;</a> <a class="w3-btn-floating w3-display-right" onclick="plusDivs3rdfloor(+1)">&#10095;</a>
        <div class="w3-display-container 3rdfloor"> <img src="images/32B/32BFloorplan.jpg" style="width:100%">
          <div class="w3-display-bottommiddle w3-large w3-container w3-padding-16"> Floor Plan </div>
        </div>
        <div class="w3-display-container 3rdfloor"> <img src="images/32B/kitchen1.JPG" style="width:100%">
          <div class="w3-display-bottommiddle w3-large w3-container w3-padding-16"> Kitchen </div>
        </div>
      </div>
      <script>
    var slideIndex3rdfloor = 1;
    showDivs3rdfloor(slideIndex3rdfloor);

    function plusDivs3rdfloor(n) {
      showDivs3rdfloor(slideIndex3rdfloor += n);
    }

    function showDivs3rdfloor(n) {
      var i;
      var x = document.getElementsByClassName("3rdfloor");
      if (n > x.length) {slideIndex3rdfloor = 1}    
      if (n < 1) {slideIndex3rdfloor = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";  
      }
      x[slideIndex3rdfloor-1].style.display = "block";  
    }
    </script>
    </div>
  </div>
  <div id="4th Floor" class="w3-container city" style="display:none">
    <div class="container 75%">
      <div class="w3-content w3-display-container"> <a class="w3-btn-floating w3-display-left" onclick="plusDivs4thfloor(-1)">&#10094;</a> <a class="w3-btn-floating w3-display-right" onclick="plusDivs4thfloor(+1)">&#10095;</a>
        <div class="w3-display-container 4thfloor"> <img src="images/32C/32CFloorplan.jpg" style="width:100%">
          <div class="w3-display-bottommiddle w3-large w3-container w3-padding-16"> Floor Plan </div>
        </div>
        <div class="w3-display-container 4thfloor"> <img src="images/32C/Kitchen1.jpg" style="width:100%">
          <div class="w3-display-bottommiddle w3-large w3-container w3-`padding-16"> Kitchen </div>
        </div>
      </div>
      <script>
    var slideIndex4thfloor = 1;
    showDivs4thfloor(slideIndex4thfloor);

    function plusDivs4thfloor(n) {
      showDivs4thfloor(slideIndex4thfloor += n);
    }

    function showDivs4thfloor(n) {
      var i;
      var x = document.getElementsByClassName("4thfloor");
      if (n > x.length) {slideIndex4thfloor = 1}    
      if (n < 1) {slideIndex4thfloor = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";  
      }
      x[slideIndex4thfloor-1].style.display = "block";  
    }
    </script>
    </div>
  </div>

To adapt this for your website, simply replace "3rdfloor" or "4thfloor" with your desired names.

I hope this information proves useful!

Sincerely, GC

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

Verify whether the division contains any elements and does not include specific elements

I previously opened a similar thread, but with the condition that the div does not contain a second element within it. So my previous question was as follows: I have some code that looks like this: <p class="elementWrap"> <label>Phone</l ...

javascriptjqueryhtmlcss

Merging two arrays that have identical structures

I am working on a new feature that involves extracting blacklist terms from a JSON file using a service. @Injectable() export class BlacklistService { private readonly BLACKLIST_FOLDER = './assets/data/web-blacklist'; private readonly blackl ...

javascriptangular

Changing the background color of .pane and .view elements in an Ionic web application using JavaScript

Looking to modify the background-color of two css selectors, .pane and .view, that are located within the ionic.css file. Despite multiple attempts to do so using JavaScript directly in the index.html file, the changes are not reflected. The code snippet ...

javascripthtmlcssangularionic-framework

I would like to showcase the image with specific dimensions in CakePHP

Currently working on a CakePHP application where I need to upload an image. However, for some sections of my app, I need to display the image at a specific height and width without losing image quality. Any suggestions on how to achieve this? ...

htmlcakephp

Tips for mocking constructors in AngularJS, specifically the Date() constructor

Trying to verify a function which receives millisSinceEpoch and gives back the time if it is today's date, otherwise it gives the date. getLocaleAbbreviatedDatetimeString: function(millisSinceEpoch) { var date = new Date(millisSinceEpoch); if (d ...

javascriptangularjs

What exactly is the significance of localizing an Aria label?

Looking to add an aria label that needs to be localized. What exactly does this mean? Here is the code I have: <a href="link"><i class="button" aria-label="back button"> How do I modify this code in order to make ...

htmllocalizationaccessibilitywai-aria

Please upload the image by clicking the "Upload Files!" button instead of relying on the input change

I am looking to enhance my image uploading process by allowing users to upload multiple images after clicking the Upload Files! button, rather than relying on the input change event. Below is the jQuery code I am using (which I found here): index.html &l ...

javascriptjqueryfile-uploadupload

Utilize the ng2-select component to incorporate multiple instances within a single webpage

Can someone help me figure out how to use two ng2-select components in my modal? I've checked out the documentation, but it doesn't provide any information on using more than one select. I'm not sure how to capture the selected values of ea ...

javascriptangulartypescriptcomponents

Transform the appearance of the datepicker with jquery-ui

Is it possible to customize the appearance of the calendar using css files from jquery-ui? <input type="text" id="dob"/> Check out this script: $(document).ready(function(){ $("#dob").datepicker(); }); See an example here. How can I style it ...

cssjquery-uidatepickercdn

Every time I make a change to the code, Laravel's css/app.css file mysteriously vanishes from the mix-manifest.json

Whenever I make a change in my code, the line css/app.css in mix-manifest.json disappears. The only solution is to execute npm run watch or npm run dev, but the problem reoccurs each time I modify the code. Here is how my mix-manifest.json looks when eve ...

csslaravelnpmmodulemanifest

There is a SyntaxError due to an unexpected token "o" in the JSON data. It is not a valid JSON format

This code is designed to check an XML file to see if the email or login inputted by a user is already in use, and then provide a JSON response. The AJAX code for this functionality is as follows: $.ajax({ type: 'post', dat ...

javascriptphpjsonajax

AngularJS: Importing a parent directive within a child directive

Take a look at this Plunk example to understand better. I'm attempting to create a test scenario for accessing complex directives, but I encounter an error when trying to call a method from the parent directive: Parent Directive app.directive(&apos ...

javascriptangularjs

Icon in navigation dropping down and moving to next line

Trying to use Bootstrap 4 and dropdown-toggle:after to display siblings as a wordpress menu. The issue is that I can't seem to keep the carrot on the same line as the text on smaller screens. https://i.sstatic.net/rJBM5.png Check out the code snippe ...

csswordpressbootstrap-4

Omit specific object properties within a foreach loop in jQuery AJAX

Check Out This Fiddle Example I am currently working with a PHP file that returns JSON data for main content along with an additional property for pagination. I am looking for a way to exclude the pagination property when iterating over the data in a fore ...

javascriptjqueryajax

What is the reason behind not requiring to invoke the next function in a Sails.js controller method, even when it includes an asynchronous database query?

Sample controller function: fetchArticles: function(req, res) { Articles.find({}).exec(function(err, articles) { res.json(articles) // It appears this part is asynchronous // Is next() required here? }) } In my experience, I typicall ...

javascriptnode.jsexpresscontrollersails.js

Is it possible to streamline the chaining of promises generated from MongoDB queries?

This feature allows for the display of all collections in a MongoDB database, along with the count of documents in each collection using bluebird promises. function displayMongoCollections(db) { var promises = [] db.listCollections().toArray().the ...

javascriptnode.jsmongodbpromise

The response from the XHR object is coming back as "Object Object

Recently, I've been faced with the challenge of working with an API that provides articles. Within the array returned by the API, there are attributes like author, title, and description. However, despite my efforts, each time I attempt to retrieve th ...

javascriptarraysjson

How can I utilize Node JS REST API to serve HTML documents?

After successfully creating a REST API in Node JS, I've encountered an obstacle. app.use('/api', router); This particular code ensures that every URL is prefixed with 'api'. However, what should I do if I want to serve an HTML fi ...

javascriptnode.jsrestexpress

Icon for local system displayed on browser tab

I am currently trying to set a Browser Tab icon for the local system, but it is not working. However, when using an HTTP static icon, it works perfectly. Can someone please help me understand what the issue might be? PAGE 1 : Icon Not Showing <link re ...

javascriptjqueryhtmlajaxbrowser

Calculate the sum of the column values and disable the option to insert new rows in the UI grid

I am currently working on a ui-grid that has a column C which displays percentage values. There is a button labeled "add rows" that allows users to add new rows to the grid. However, the catch is that users can only add new rows until the total percentage ...

javascriptangularjsangular-ui-gridui-grid