1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Help with Multiple Automatic Slideshows - HTML/CSS/JAVA

Discussion in 'HTML & Website Design' started by Caitlin Preval, Dec 18, 2018.

  1. #1
    Hello there,
    I am a beginner are web design and am having trouble with a website I am currently building.

    I am trying to have multiple, slideshows sit on the page together, and run automatically, but I cannot figure out how to rework the Javascript section. I have also tried the code for multiple sliders on W3schools but it does not work. I have looked at a billion other forums with similar questioning but none help with automatic slideshows or just say that copying the javascript code and changing the targeted CSS Class might work, but it doesn't.

    Currently, with the code below, I am having one animation work (the first slideshow-container), whilst the second one is sitting with all the inclusive slideshow images one under another on the page.)

    Any help would be greatly appreciated.

    The code sections are as follows:
    HTML:

    <!-- Slideshow container -->
    <div class="slideshow-container">

    <!-- Full-width images with number and caption text -->
    <div class="mySlides fade">
    <img src="images/socialcontent/Artboard%201.png" style="width:100%">
    </div>

    <div class="mySlides fade">
    <img src="images/socialcontent/Artboard%202.png" style="width:100%">
    </div>

    <div class="mySlides fade">
    <img src="images/socialcontent/Artboard%203.png" style="width:100%">
    </div>
    </div>
    <br>

    </div>


    <!-- Slideshow container -->
    <div class="slideshow-container">

    <!-- Full-width images with number and caption text -->
    <div class="mySlidestwo fade">
    <img src="images/socialcontent/1.6_ozhairandbeauty_IG_beautyhack7_1080x1080_V2.png" style="width:100%">
    </div>
    SEMrush
    <div class="mySlidestwo fade">
    <img src="images/socialcontent/13.9_ozhairandbeauty_IG_beautyhack8_1080X1080.png" style="width:100%">

    </div>

    <div class="mySlidestwo fade">
    <img src="images/socialcontent/10.9_ozhairandbeauty_IG_beautyhack11_1080x1080.png" style="width:100%">
    </div>



    CSS:
    /* Slideshow container */
    .slideshow-container {
    max-width: 320px;
    position: relative;
    margin: auto;
    }


    Javascript:
    var slideIndex = 0;
    showSlides();

    function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    for (i = 0; i < slides.length; i++) {
    slides.style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) {
    slideIndex = 1
    }
    slides[slideIndex - 1].style.display = "block";
    setTimeout(showSlides, 2000); // Change image every 2 seconds
    }
     
    Caitlin Preval, Dec 18, 2018 IP
    SEMrush
  2. hdewantara

    hdewantara Active Member

    Messages:
    434
    Likes Received:
    36
    Best Answers:
    19
    Trophy Points:
    80
    #2
    Probably something like below would do?
    Try to run it on your local machine...

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <style>
                /* Slideshow container */
                .slideshow-container{
                    max-width: 15em;
                    position: relative;
                    margin: auto;
                }
                .mySlides{
                    background-color: lightblue;
                }
            </style>
           
        </head>
        <body>
            <h2>yellow eyed cats</h2>
           
            <!-- Slideshow container -->
            <div class="slideshow-container" id="slideshow1">
                <!-- Full-width images with number and caption text -->
                <div class="mySlides fade">
                    <img src="http://www.cattell.net/devon/BlackCats/face_8126.jpg" style="width:100%" alt="slide 1 img 1">
                </div>
                <div class="mySlides fade">
                    <img src="http://cattell.net/devon/BlackCats/face%20buster_2079.jpg" style="width:100%" alt="slide 1 img 2">
                </div>
                <div class="mySlides fade">
                    <img src="https://wpclipart.com/animals/cats/cat_photos/cat_face_striped_tabby_T.png" style="width:100%" alt="slide 1 img 3">
                </div>
            </div>
           
            <h2>blue eyed cats</h2>
           
            <!-- Slideshow container -->
            <div class="slideshow-container" id="slideshow2">
                <!-- Full-width images with number and caption text -->
                <div class="mySlides two fade">
                    <img src="https://www.ultimatepapermache.com/wp-content/uploads/2012/03/cat-face1.jpg" style="width:100%" alt="slide 2 img 1">
                </div>
                <div class="mySlides two fade">
                    <img src="https://thumb9.shutterstock.com/display_pic_with_logo/167892742/532870726/stock-photo-cat-face-portrait-in-studio-532870726.jpg" style="width:100%" alt="slide 2 img 2">
                </div>
                <div class="mySlides two fade">
                    <img src="https://i.pinimg.com/736x/fb/c4/0e/fbc40e4d36735eb84cd5cb04db26bc72.jpg" style="width:100%" alt="slide 2 img 3">
                </div>
            </div>
           
            <script>
                'use strict';
               
                function Make_a_slideshow(id){
                    var slideIndex = 0,
                        container = document.getElementById(id);
    
                    function showSlides(){
                        var slides = container.querySelectorAll('.mySlides');
                        for (var i = 0; i < slides.length; i++){
                            slides[i].style.display = "none";
                        }
                        slideIndex++;
                        if (slideIndex > slides.length){
                            slideIndex = 1;
                        }
                        slides[slideIndex - 1].style.display = "block";
                        setTimeout(showSlides, 2000); // Change image every 2 seconds
                    }
                    showSlides();
                }
               
                //start slideshow 1
                Make_a_slideshow('slideshow1');
               
                //delay 1 second before starting slideshow 2
                setTimeout(function(){
                    Make_a_slideshow('slideshow2');
                }, 1000);
            </script>
        </body>
    </html>
    PHP:
     
    hdewantara, Dec 18, 2018 IP
    qwikad.com likes this.
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,704
    Likes Received:
    1,567
    Best Answers:
    227
    Trophy Points:
    515
    #3
    A few suggestions:

    1) Stop controlling the appearance with JavaScript. Instead do a class swap so that the stylesheet can be used not only to set the display state, but also possibly do animations.

    2) Use a "scripted" class to do the initial hide instead of looping each item.

    3) Walk the DOM instead of the slower nodeList / getElementsBy approach

    4) Axe all the pointless DIV for nothing and classes for nothing. Ever heard George Carlin's joke "not every ejaculation deserves a name"? Well, not every blasted HTML element needs a DIV around it or classes on it.

    5) Axe the pointless comments. <div class="slideshow-container"> is a slideshow container? Whoddathunkit?!?

    Given what you have -- or at least what you are showing, there is no real reason to have anything more than this for the HTML:

    
    
    <div class="slideshow">
    	<img
    		src="images/socialcontent/Artboard%201.png"
    		alt="describe this, ALT is NOT optional"
    	>
    	<img
    		src="images/socialcontent/Artboard%202.png"
    		alt="describe this, ALT is NOT optional"
    	>
    	<img
    		src="images/socialcontent/Artboard%203.png"
    		alt="describe this, ALT is NOT optional"
    	>
    <!-- .slideShow --></div>
    
    <div class="slideshow">
    	<img
    		src="images/socialcontent/1.6_ozhairandbeauty_IG_beautyhack7_1080x1080_V2.png"
    		alt="describe this, ALT is NOT optional"
    	>
    	<img
    		src="images/socialcontent/13.9_ozhairandbeauty_IG_beautyhack8_1080X1080.png"
    		alt="describe this, ALT is NOT optional"
    	>
    	<img
    		src="images/socialcontent/10.9_ozhairandbeauty_IG_beautyhack11_1080x1080.png"
    		alt="describe this, ALT is NOT optional"
    	>
    <!-- .slideShow --></div>
    
    Code (markup):
    From there for the scripting I'd have it all in a IIFE using the "document as parameter" trick to save me some typing. First it needs to let CSS know we are scripting (this way scripting off/blocked/disabled all images show), then grab hold of all slideshows. To track the current slide, we can use/abuse a data- attribute on the player itself.

    
    (function(d) {
    
    	d.body.classList.add('slideshowActive');
    	
    	var
    		slideshowInterval = 2000;
    		slideshows = d.getElementsByClassName('slideshow');
    	
    	for (var i = 0, show; show = slideshows[i]; i++) {
    		show['data-slideshowCurrent'] = show.firstElementChild;
    		show.firstElementChild.classList.add('current');
    	}
    	
    	function slideUpdate() {
    		for (var i = 0, show; show = slideshows[i]; i++) {
    			var current = show['data-slideshowCurrent']; 
    			current.classList.remove('current');
    			if (!(show['data-slideshowCurrent'] = current.nextElementSibling))
    				show['data-slideshowCurrent'] = show.firstElementChild;
    			show['data-slideshowCurrent'].classList.add('current');
    		}
    	}
    	
    	window.addEventListener('load', function() {
    		setInterval(slideUpdate, slideshowInterval);
    	}, false);
    	
    })(document);
    Code (markup):
    Note, this script is written for IE9/later only. Legacy IE would be a bit trickier, but not too much so.

    From there it's a simple matter of the CSS:

    
    .slideshowActive {
    	position:relative;
    }
    
    .slideshowActive .slideshow > * {
    	position:absolute;
    	left:0;
    	z-index:1;
    	opacity:0;
    	transition:opacity 0s 0.5s;
    }
    
    .slideshowActive .slideshow .current {
    	position:relative;
    	z-index:2;
    	opacity:1;
    	transition:opacity 0.5s;
    }
    Code (markup):
    Since you have the class fade, I assumed you want fade-in transitions? Let the CSS do the heavy lifting. The apo slides it off the screen keeping the inactive ones out of flow, whilst the "current" one sets the size of the container.

    Live demo here:

    http://www.cutcodedown.com/for_others/CaitlinPreval/

    Basically, the DOM is your friend, use it. Because it's writen for "> *" instead of a class or specific tag, this will work with any tag as the slideshow child and work reasonably well so long as they are all uniform in size.

    Hope this helps.
     
    Last edited: Dec 26, 2018
    deathshadow, Dec 26, 2018 IP