Multiple presentations on a single webpage

I'm encountering some difficulty trying to incorporate multiple slideshows onto a single page. Currently, I am able to successfully add two operational slideshows, but as soon as I attempt to introduce a third one, everything becomes unstable.

Would greatly appreciate it if someone could provide guidance on how to effectively include multiple slideshows within the same page?

For reference, here is the link to the CodePen with the code: https://codepen.io/anon/pen/YmWNqMc

Below you can find the HTML code:

<h2 style="text-align:center">Multiple Slideshows</h2>

<p>Slideshow 1:</p>
<div class="slideshow-container">
  <div class="mySlides1">
    <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1, 0)"></a>
  <a class="next" onclick="plusSlides(1, 0)"></a>
</div>

<p>Slideshow 2:</p>
<div class="slideshow-container">
  <div class="mySlides2">
    <img src="https://www.w3schools.com/...

In case you need the CSS and JavaScript portions of the code, please refer to the provided CodePen link for full details.

javascripthtmlcssslideshow

Answer №1

Your code has been updated to allow for the smooth operation of 3 slideshows.
To make it work, you simply need to modify your js code as follows:

  • Add a class name to the third slideshow,
  • Invoke the function showSlides(1, id);.

var slideIndex = [1,1,1];
var slideId = ["slide", "slide2", "slide3"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1}    
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex[no]-1].style.display = "block";  
}
* {box-sizing: border-box}
.mySlides{display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 800px;
  position: relative;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 4%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  height:100%;
  width:49.5%;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a grey background color */
.prev:hover, .next:hover {
  color: black;
}
<h2 style="text-align:center">Multiple Slideshows</h2>

<p>Slideshow 1:</p>
<div class="slideshow-container">
  <div class="mySlides slide">
    <img src="https://picsum.photos/150/150" style="width:100%">
  </div>

  <div class="mySlides slide">
    <img src="https://picsum.photos/150/151" style="width:100%">
  </div>

  <div class="mySlides slide">
    <img src="https://picsum.photos/151/150" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1, 0)">prev</a>
  <a class="next" onclick="plusSlides(1, 0)">next</a>
</div>

<p>Slideshow 2:</p>
<div class="slideshow-container">
  <div class="mySlides slide2">
    <img src="https://picsum.photos/152/150" style="width:100%">
  </div>

  <div class="mySlides slide2">
    <img src="https://picsum.photos/150/152" style="width:100%">
  </div>

  <div class="mySlides slide2">
    <img src="https://picsum.photos/150/154" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1, 1)">prev</a>
  <a class="next" onclick="plusSlides(1, 1)">next</a>
</div>

<p>Slideshow 3:</p>
<div class="slideshow-container">
  <div class="mySlides slide3">
    <img src="https://picsum.photos/152/151" style="width:100%">
  </div>

  <div class="mySlides slide3">
    <img src="https://picsum.photos/151/152" style="width:100%">
  </div>

  <div class="mySlides slide3">
    <img src="https://picsum.photos/151/154" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1, 2)">prev</a>
  <a class="next" onclick="plusSlides(1, 2)">next</a>
</div>

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

Display additional images with "Show More" view

I'm looking to create a view similar to the one shown in this image: https://i.stack.imgur.com/AZf61.png Within my FlatList, all the data is being populated including these thumbnails. These thumbnails are stored in an array of objects where I retri ...

javascriptiosreactjsreact-native

The function inside the click() event will run once the click method for the element has been set

<!doctype html> <html> <head> <script src="jquery.js"></script> </head> <body> <script> function displayMessage1(){ $("#button").click(displayMessage2()); window.alert("dis ...

javascriptjquery

Press the button to copy the content to the clipboard with JavaScript

I am struggling with copying email text in HTML within an href tag. I want the email value to be copied when a user clicks on the icon next to it, but for some reason it is not working as expected. Instead of just copying the email address, my code seems ...

javascriptc#htmljquery.net

In order for Firefox to properly recognize and apply the @font_face, it must be located in the root

I'm working on a website that has a custom font, and I've implemented the @font-face code as shown below: @font-face { font-family: 'webfontregular'; src: url('fonts/cracked-webfont.eot'); src: url('fonts/cra ...

htmlfirefoxcssfont-face

What is the best way to showcase every user on my webpage using HTML?

After running this code snippet in my python terminal, I was able to see the desired output: views.py from django.contrib.auth.models import User userList = User.objects.all() print(userList) The above code produces the following result in the terminal: ...

htmldjangodjango-viewsdjango-templates

Incorporating promises with ajax to enhance functionality in change events

Consider the scenario where you trigger an ajax request upon a change event in the following manner: MyClass.prototype.bindChangeEvent = function(){ $(document).on('change', '#elementid', function(){ var $element = $(this); $ ...

javascriptjqueryajaxpromise

Creating a stylish border for a div element

Having trouble with styling a border around a div box. I'm struggling to find a way to prevent the borders from looking like this: Let me show you an example of what I'm dealing with: .num.num_1 { border-left-color: #0D2431; } .num { wid ...

htmlcss

Tips for eliminating excess white space in mobile view using css/bootstrap

I have successfully replicated the screenshot below using CSS/Bootstrap to ensure it looks consistent on both mobile and desktop view. https://i.sstatic.net/NS4yE.png For the upper portion of the screen-shot, I have created a fiddle which includes a sear ...

htmlcssresponsive-designbootstrap-4whitespace

Performing a $.POST request on a Squarespace webpage

I created a custom form on my website for booking appointments, and it posts to a third-party server. When I submit the form using the <form> tag, I receive the email notification. However, I want to submit the form using $.POST so that I can customi ...

javascriptjqueryajaxsquarespace

Tips on placing two tags within one cell in a HTML Bootstrap table

I am a beginner in html and bootstrap, and I am trying to create a table. However, I noticed that the input fields are not aligning properly within the cells. Even when I tried adjusting the width to 100%, the % sign ended up on a separate row. Can anyone ...

htmlcssformsbootstrap-4

Discover the technique for displaying the bootstrap card body information upon clicking a specific tab

In my angular project, I've incorporated bootstrap cards that display heading and horizontally arranged data (using horizontal cards). component.html <div class="bs-example"> <div class="card" id="dd" style= ...

cssangulartwitter-bootstrapbootstrap-4

The decoding of my JSON data in PHP is not working as expected

My AJAX is sending JSON data to my PHP script, but I'm encountering an issue with decoding it. This is the jQuery code: $.ajax({ url : 'admin/modifyPermissions', type : 'post', data : { 'JSON' : JSON ...

phpjavascriptjqueryjson

The functionality of the custom file upload button is experiencing issues on Microsoft Edge

I've been working on creating a unique custom image upload button that functions perfectly in Chrome, Firefox, and Opera based on my testing. However, I'm facing an issue where it doesn't work properly in Microsoft Edge. Feel free to check ...

javascriptjqueryhtmlcssmicrosoft-edge

Is it a beneficial strategy to remove object keys and assign new keys when iterating through thousands of objects in a loop?

Consider the following array as an example: For instance var a =[{name :"Adi", age:23},{name:"aman" ,age : 23},{name : rob,age:52}]; Is it better to delete the keys 'name' or assign them as undefined? Which approach is more efficient? Does us ...

javascripttypescript

How can I properly showcase this JSON format in Angular 13?

In my JSON data, I have the following structure: response img. The classes I am working with are: export class Operation { operations?: (OperationDetail);//change by OperationDetail[] } export interface OperationDetail { id?: s ...

htmljsonangulartypescript

What is the best approach for adding text to an image using TCPDF?

I am trying to create dynvouchers PDF using TCPDF. However, I am facing an issue where the PDF generated does not include the username and password. Here is my code: $html = ''; $html .= '<table><tr>'; for ($a = 1; $a <= ...

phphtmlpdftcpdf

Can one jQuery script be used for multiple ajax 'like' buttons?

Hey there! I'm working on an Ajax 'like' button that utilizes jQuery. This button will be utilized multiple times on a single page. I'm looking for a way to streamline the process and avoid including the jQuery script multiple times. Is ...

phpjavascriptjqueryajaxjquery-ui

Troubleshooting IE's Compatibility Issue with Inline SVG as Background Image

My goal is to set the background-image CSS property to encoded data URI content, as demonstrated in this fiddle. Everything runs smoothly in all browsers I've tested, except for IE 9/10. For some reason, IE 9/10 doesn't display the contents. Ho ...

csssvgraphaelbackground-image

AJAX and JavaScript outshine Java and Oracle in terms of search performance

My team works with a large enterprise application built in Java that interacts with an Oracle SQL database. We utilize JavaScript on the front end and are constantly seeking ways to enhance the performance of our application as its usage grows. Currently, ...

javajavascriptajaxoracleperformance

The jQuery change() event cannot be activated using bind(), live(), keyup+keydown+keypress, or any other method

I have been researching different solutions on Stack Overflow regarding this issue. I am trying to create a character countdown feature (e.g. '98 Characters Left') for a textbox. The only event that seems to work is keydown(), as it fails to upda ...

javascriptjqueryajax