Displaying two slideshows on the same page

I’m using this slideshow as an example, which works perfectly fine. There are shared classes between each slideshow which means that when one finishes only then can the next one begin, I need them to be able to work independently of each other, will classes need to be changed.

Here’s just one slideshow

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
</script>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}

/* Slideshow container */
.slideshow-container {
  position: relative;
  background: #f1f1f1f1;
}

/* Slides */
.mySlides {
  display: none;
  padding: 80px;
  text-align: center;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

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

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
  color: white;
}

/* The dot/bullet/indicator container */
.dot-container {
    text-align: center;
    padding: 20px;
    background: #ddd;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
.active, .dot:hover {
  background-color: #717171;
}

/* Add an italic font style to all quotes */
q {font-style: italic;}

/* Add a blue color to the author */
.author {color: cornflowerblue;}
<div class="slideshow-container">

<div class="mySlides">
  <q>I love you the more in that I believe you had liked me for my own sake and for nothing else</q>
  <p class="author">- John Keats</p>
</div>

<div class="mySlides">
  <q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
  <p class="author">- Ernest Hemingway</p>
</div>

<div class="mySlides">
  <q>I have not failed. I've just found 10,000 ways that won't work.</q>
  <p class="author">- Thomas A. Edison</p>
</div>

<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>

</div>

<div class="dot-container">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>

The problem comes when I add a second, they don’t work independently of each other

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
</script>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}

/* Slideshow container */
.slideshow-container {
  position: relative;
  background: #f1f1f1f1;
}

/* Slides */
.mySlides {
  display: none;
  padding: 80px;
  text-align: center;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

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

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
  color: white;
}

/* The dot/bullet/indicator container */
.dot-container {
    text-align: center;
    padding: 20px;
    background: #ddd;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
.active, .dot:hover {
  background-color: #717171;
}

/* Add an italic font style to all quotes */
q {font-style: italic;}

/* Add a blue color to the author */
.author {color: cornflowerblue;}
<h1>Slideshow 1</h1>

<div class="slideshow-container">

<div class="mySlides">
  <q>I love you the more in that I believe you had liked me for my own sake and for nothing else</q>
  <p class="author">- John Keats</p>
</div>

<div class="mySlides">
  <q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
  <p class="author">- Ernest Hemingway</p>
</div>

<div class="mySlides">
  <q>I have not failed. I've just found 10,000 ways that won't work.</q>
  <p class="author">- Thomas A. Edison</p>
</div>

<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>

</div>

<div class="dot-container">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>

<h1>Slideshow 2</h1>
<div class="slideshow-container">

<div class="mySlides">
  <q>I love you the more in that I believe you had liked me for my own sake and for nothing else</q>
  <p class="author">- John Keats</p>
</div>

<div class="mySlides">
  <q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
  <p class="author">- Ernest Hemingway</p>
</div>

<div class="mySlides">
  <q>I have not failed. I've just found 10,000 ways that won't work.</q>
  <p class="author">- Thomas A. Edison</p>
</div>

<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>

</div>

<div class="dot-container">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>

I’d rather the script be able to do this than have to change every class name and duplicate every CSS class, how would this be addressed in Vanilla JS only. It loops through the first and then the second is looped through, how can these be treated independently?

Thanks in advance 🙂

83 thoughts on “Displaying two slideshows on the same page”

  1. Having read this I thought it was very informative. I appreciate you spending
    some time and effort to put this informative article together.

    I once again find myself personally spending a significant amount of time both reading and posting comments.
    But so what, it was still worthwhile!41480

    Reply
  2. Pingback: buy generic cialis
  3. Someone essentially help to make critically posts I would state.
    This is the first time I frequented your website page and so
    far? I amazed with the analysis you made to create this actual put up extraordinary.
    Excellent activity!

    Reply
  4. My developer is trying to persuade me to move to .net from PHP.
    I have always disliked the idea because of the costs.
    But he’s tryiong none the less. I’ve been using Movable-type on several websites for about a year and am nervous about switching to another platform.
    I have heard excellent things about blogengine.net. Is
    there a way I can transfer all my wordpress posts into it?
    Any kind of help would be greatly appreciated!

    Reply
  5. It’s the best time to make some plans for the future and
    it’s time to be happy. I have read this post and if
    I could I want to suggest you some interesting things or advice.
    Maybe you could write next articles referring to this article.
    I desire to read even more things about it!

    Reply
  6. I will immediately clutch your rss feed as I can not find your
    email subscription link or newsletter service.
    Do you have any? Kindly permit me know in order that I may subscribe.
    Thanks.

    Reply
  7. I have been browsing on-line more than three hours as of late, but I never
    found any interesting article like yours. It’s pretty value enough for me.
    In my view, if all site owners and bloggers
    made excellent content material as you probably did, the net might be much
    more useful than ever before.

    Reply
  8. Hi, I do think this is an excellent site. I stumbledupon it 😉
    I will come back yet again since I bookmarked it. Money and freedom is the best way to change, may
    you be rich and continue to guide others.

    Reply
  9. Howdy! This post could not be written any better! Reading through this post reminds me of my old room mate!
    He always kept chatting about this. I will forward this article to
    him. Pretty sure he will have a good read. Thanks for sharing!

    Reply
  10. I’ve been browsing on-line greater than 3 hours lately, but I never found any fascinating article like yours.
    It is lovely worth enough for me. In my view,
    if all website owners and bloggers made just right content material as you
    probably did, the internet will probably be a lot more useful than ever before.

    Reply
  11. I just could not go away your web site before suggesting that I actually loved the usual information an individual provide to your visitors?
    Is going to be again continuously to inspect new posts

    Reply
  12. It’s perfect time to make some plans for the future and it
    is time to be happy. I’ve read this post and if I could I desire to suggest you some interesting things
    or tips. Perhaps you can write next articles referring to
    this article. I want to read more things about it!

    Reply
  13. It is appropriate time to make some plans for the longer term and it
    is time to be happy. I’ve learn this put
    up and if I may just I desire to recommend you few attention-grabbing issues or suggestions.
    Maybe you can write subsequent articles regarding this article.

    I wish to learn even more things about it!

    Reply
  14. We stumbled over here from a different web address and thought I might check
    things out. I like what I see so i am just following you.
    Look forward to checking out your web page yet again.

    Reply
  15. You really make it seem so easy with your presentation but I find this matter to be actually something which
    I think I would never understand. It seems too complicated and very broad for me.
    I’m looking forward for your next post, I will try to get the hang of it!

    Reply
  16. I’ve been browsing online more than 4 hours today, yet I never found any interesting article like yours.
    It’s pretty worth enough for me.In my view, if all web owners and bloggers made good content as you did, the internet will be a lot more useful than ever before.|
    I couldn’t refrain from commenting. Well written!|
    I will right away take old of your rss feedd as I can’t in finding your email subscription link or newsletter service.
    Do you’ve any? Please permit me realize in order that I may juzt subscribe.
    Thanks.|
    It is the best time too make some plans
    for the future and iit is time to bee happy. I’ve read this post and if I could I want to suggest you few interesting things or suggestions.
    Perhwps you could write next articles referring to this article.
    I wan to read more things about it!|
    It is the best time to make a few planhs for the longer
    term and it’s time to be happy. I have read this publish and iff I could I
    desire to suggest you some interesting issues or suggestions.
    Maybe you could write subsequent articles relating to this article.
    I desire to learn more issues abouyt it!|
    I have been browsing on-line greater than thrree
    hours nowadays, yet I never discovered any attention-grabbing article like yours.

    It is beautiful wrth enough for me. Personally, if
    all site owners and bloggers made just right content as
    you did, the net might be much mor useful than ever before.|
    Ahaa, itss fastidious conversation regarding this article at
    thus place at this weblog, I have read all that, so at this time mme also commenting at this place.|
    I aam sure this post has touched all the internet visitors, its really really good post on building up new blog.|
    Wow, this post is good, my younger sister is analyzing these
    kinds of things, therefoore I am going to inform her.|
    bookmarked!!, I really like your website!|
    Wayy cool! Some very valid points! I appreciate you writing this write-up and also the rest of the site is extremely good.|
    Hi, I do think this is an excdllent website. I stumbledupon it 😉 I am goiing to come back
    yet again since i have book-marked it. Money andd
    freedom is the greatest way to change, may yoou be rich and continue to help other
    people.|
    Woah! I’m really enjoying the template/theme of this blog.

    It’s simple, yet effective. A lot of times it’s hard to get that “perfect balance” between usability and visual appeal.
    I must say you havee dohe a awesome jobb with this. In addition,the blog loads super fast for me
    on Safari. Superb Blog!|
    These are genuinely impressive ideas in regarding blogging.

    You have touched some pleasant factors here. Any way keep upp wrinting.|
    I really like what you guys are usually up too. Such clever work and coverage!
    Keep up the good works guys I’ve included you guys
    to my blogroll.|
    Hi there! Someone iin my Myspace group shared this site with us so I came to check it out.
    I’m definitely enjoying the information. I’mbook-marking aand will
    be tweeting this to mmy followers! Excellent bllog and grewat design and style.|
    I love what you guys tend to be up too. Suuch clever
    work and exposure! Keep up the great works guys I’ve
    included you guys too my blogroll.|
    Hello would you mind stating whjich blog
    platform you’re using? I’m planning to start my own blog soon but I’m
    having a hard time making a decision between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I aask is because your desgn seems differeent then most blogs and I’m looking for something completely unique.
    P.S Apologies for getting off-topic but I had to ask!|
    Hi would you mind letting me know which webhost you’re using?
    I’ve loaded your blog in 3 completely different web browsers
    and I must say thios blog loads a lot faster then most.
    Can you suggest a good web hosting provider at a reasonable price?
    Many thanks, I appreciate it!|
    I really like it when folks get together and share views.
    Great blog, keep it up!|
    Thank you for the auspicious writeup. It in fact was
    a amusemednt account it. Look advanced to ffar
    added agreeable from you! However, how could we communicate?|
    Hi thre just wanted to give you a quick heads up.
    The words in your content seem to be running off the screen in Ie.

    I’m not sure if this is a formatting issue or something to do wityh browser compatibiity but I thought I’d
    post to let you know. Thhe stfyle and design look great though!
    Hope yyou get the problem solved soon. Cheers|
    This is a topic that’s closde to my heart…
    Cheers! Where are your contact details though?|
    It’s very effortless to find out any matter on net as compared to textbooks, as I founbd this article aat this website.|
    Doees your website have a contact page? I’m having trouble locating it but,
    I’d like to shoot you an email. I’ve got some suggestions for your
    blog you might be interested in hearing. Either way, great site and I look forward to seeing
    it develop over time.|
    Hi! I’ve been following your blog for some ime now and finally got the courage to go
    ahead and give you a shoput out ffrom Lubbock Texas!

    Just wanted too tell youu keep up the excellent job!|
    Greetings from Ohio! I’m bored too tears att
    work so I decided to check out your blog on my iphone during lunch break.
    I love the information you provide here and can’t wait to take a look when I get home.
    I’m surprised at how fast your blog loaded on mmy cell phone ..
    I’m not even using WIFI, just 3G .. Anyways, greeat site!|
    Its like you read my thoughts! You appear to grasp a lot about this, such
    as you wrrote the book in it orr something. I think that you simply can do wkth some % to fodce the message house a bit, but other than that, that is great blog.

    An excellent read. I will certainly be back.|
    I visited several blogs except thee audio quality
    for audio somgs present att tis web site is really superb.|
    Howdy, i read your blog from time to time and i own a similar
    one and i waas just curious if you gett a lot of spam feedback?
    If so howw do you reduice it, any plugin orr anything you
    can recommend? I get so much lately it’s driving me insane so
    any assistance is very much appreciated.|
    Greetings! Veryy useful advice within this post! It’s the little changes thawt produce the largest changes.
    Many thanks for sharing!|
    I seriously love your blog.. Pleasant colors & theme. Did you make this amazing site yourself?
    Please reply back as I’m loking to create my
    own personal website and want to learn where you got this from or what the theme is called.
    Kudos!|
    Howdy! This blog post couldn’t be written much better!
    Reading through this article rreminds me of my previous roommate!

    He constantly kept preaching about this. I most certainly will send this
    post to him. Fairly certain he’ll have a very good read.
    Thank you for sharing!|
    Incredible! Thiis blog looks exactly like my old one!
    It’s on a entirely different topic bbut it has pretty much the
    same layout annd design. Great choice of colors!|
    There is definately a lot to know about this issue.
    I like alll thhe points yyou have made.|
    You’ve made some decent points there. I looked on the net
    for additional information about the issue and found most individuals will go along with yohr views oon this site.|
    Hi, I read your blog on a regular basis. Your writing
    style is witty, keep up the good work!|
    I simply could not go away your site prior to suggesting that
    I extremely enjoyed the usual information a person suypply to your visitors?
    Is gonna be again continuously to check up oon new posts|
    I want to too thank you for this great read!!
    I certainly enjoyed every bit of it. I’ve got you bookmarked to check out new stuff you post…|
    What’s up, just wanted to mention, I enjoyed this blog post.
    It was helpful. Keep on posting!|
    Hi there, I enjoy reading through your article.
    I like to write a little comment to support you.|
    I always spent myy half an hour to read this blog’s posts ebery dayy along with a cup
    of coffee.|
    I always emailed this web site post page to all
    my friends, as if like to read it after that my links will too.|
    My oder is trying to persuade me to move to .net from PHP.
    I have always disliked the idea because of tthe expenses.

    But he’s tryiong none the less. I’ve been using WordPress on a
    number of websites for about a year and am concerned about
    switching to another platform. I have heard very good things about blogengine.net.
    Is there a wway I can import all my wordpress posts into it?
    Any help would be grreatly appreciated!|
    Hi there! I could have sworn I’ve visited this site before but after going through many
    of the posts I realized it’s new to me. Nonetheless, I’m definitely
    pleased I discovered it and I’ll be bookmarking it and
    checking back frequently!|
    Great article! That is tthe kind of info that are meant to be
    shared around the web. Shame on the seek engines for
    now not positioning this put up higher! Come on over and visit my website .
    Thanks =)|
    Heya i’m for the first time here. I found this board and
    I find It really useful & it helped me ouut a lot. I hope to give something back and aidd others like
    you helped me.|
    Hi there, Ido believe your blog may be having browser compatibility issues.
    When I take a look at your website in Safari, it looks fne but when opening
    iin IE, it haas some overlapping issues. I simply wanted to provide you with a quick heads up!
    Aside from that, excellent website!|
    Somebody necessarily lend a han to make creitically posts I’d state.
    That iis the first time I frequented your website
    page and so far? I surprised with the research you made to crteate this actuwl submit amazing.
    Excellent process!|
    Heya i aam for the first time here. I found this board and I
    inn finding It really helpful & it helped mee out much. I hope to provide one thing
    back and aid others such as youu aiuded me.|
    Hi! I just wold like to offer you a big thumbs up
    for the excellent information you have got here on this post.
    I amm coming back to your web site for more soon.|
    I every time used to study piece of writing in news papers
    but nnow as I am a user of wweb thus from now I am using net for posts, thawnks to web.|
    Your method of describing all in this piece of writing
    is iin fact nice, alll be capable of without difficulty understandd it, Thanks a lot.|
    Hello there, I discovered your blog via Google while searching for a related topic, your website came up,
    it seems great. I have bookmarked it in mmy google bookmarks.

    Hello there, just became alert to your weblog through Google,
    and found that it is truly informative. I’m gonna wath out for brussels.
    I’ll appreciate should you continue this in future. Numerous folks will be benefited from your writing.

    Cheers!|
    I am curious to find out what blog platform you have been using?
    I’m experiencing some minor security problems with my latest blog and I’d like to find something more risk-free.
    Do you have any recommendations?|
    I’m really impressed with your writing skills as
    well as with the layout on your blog. Is this a paid
    theme or did you modify it yourself? Either way keep
    up the nice quality writing, it’s rare to see a great blog like this one today.|
    I am extremely inspired with youur writing skills and also with the layout
    to your weblog. Is this a paid subject matter or did you modify it
    your self? Ayway keep up tthe nice high quality writing, it is
    rare to peer a great blog like this one these days..|
    Hi, Neat post. There’s a problem along with your site in internet explorer, coulld test this?

    IE nonetheless is the marketplace leader and a
    large section of folks will omit your magnificent writkng because of this problem.|
    I’m not sure where you aree getting your information, but great topic.
    I needs to spend some time learning more or understanding more.
    Thanks for great information I was looking for
    this information for my mission.|
    Hello, i think that i saww you visited my website thus i came to “return the favor”.I am trying to fihd thngs to improve my website!I suppose its ok to use some of your \

    Reply
  17. Its like you learn my mind! You seem to understand so much approximately
    this, like you wrote the e-book in it or something. I feel that you just could do with a few p.c.
    to drive the message home a bit, but instead of that, that is excellent blog.

    An excellent read. I’ll certainly be back.

    Reply
  18. I will immediately grab your rss as I can’t to find your e-mail subscription hyperlink or newsletter service.
    Do you have any? Kindly permit me understand so that I could subscribe.
    Thanks.

    Reply
  19. I will right away seize your rss as I can’t find your email subscription link or newsletter service.
    Do you have any? Kindly allow me know in order that I could subscribe.
    Thanks.

    Reply
  20. I have been browsing on-line more than three hours nowadays, yet I by
    no means found any interesting article like yours. It’s pretty price enough for me.
    In my opinion, if all webmasters and bloggers made excellent content material as you probably did, the internet
    will probably be much more useful than ever before.

    Reply
  21. I have been surfing online more than 2 hours today, yet
    I never found any interesting article like yours. It is
    pretty worth enough for me. In my view, if all
    website owners and bloggers made good content as you did, the
    web will be a lot more useful than ever before.

    Reply
  22. I absolutely love your blog and find nearly all of your post’s to
    be exactly what I’m looking for. Does one offer guest writers to write content in your case?
    I wouldn’t mind writing a post or elaborating on a
    few of the subjects you write related to here. Again,
    awesome weblog!

    Reply
  23. Hello there! I could have sworn I’ve been to this site before
    but after looking at a few of the articles I realized it’s new
    to me. Nonetheless, I’m definitely happy I came across it and I’ll be bookmarking
    it and checking back often!

    Reply
  24. I will right away seize your rss as I can’t to find your email subscription hyperlink or newsletter service.
    Do you’ve any? Please let me understand so that I may
    just subscribe. Thanks.

    Reply
  25. I will immediately clutch your rss feed as I can’t to find your email subscription hyperlink or e-newsletter service.
    Do you’ve any? Kindly permit me realize
    in order that I may subscribe. Thanks.

    Reply

Leave a Comment