Natasha Kydd Natasha Kydd - 1 month ago 6
CSS Question

How to add a second slideshow on the same webpage

I want my webpage to have two slideshows. I have one at the moment that works fine, but having trouble adding the second slideshow, as the images for the second slideshow appear outside of it.

I thought I could probably just copy and paste the code I did for the first slideshow and just change the div class names, but this did not work. I also have javascript controlling my slideshow but I didn't think copying the function I did for the first slideshow, would work for the second.

Can someone give me advice on how I can create the second slideshow using HTML, javascript and css?

HTML:

<div class="slideshow-container" >
<div class="mySlides">
<div class="number">1 /3</div>
<img src="Cisco1.png" style="width:400px; height: 450px;">
<div class="instruction">Connect to access-point: <b> 'UoS Wi-Fi Setup' </b>
</div>
</div>

<div class="mySlides">
<div class="number">2 / 3</div>
<img src="Cisco2.png" style="width:400px; height: 450px;">
<div class="instruction">Open your browser ie; Chrome, and navigate to a <b> web page </b></div>
</div>

<div class="mySlides">
<div class="number">3 / 3</div>
<img src="Cisco3.png" style="width:400px; height: 450px;">
<div class="instruction">Login with your <b> Portal Username and Password </div>
</div>
</div>

<div style="padding-left: 470px;">
<span class="indictor"></span>
<span class="indictor"></span>
<span class="indictor"></span>
</div>


JAVASCRIPT:

function motion(n)
{
var i;
var slides = document.getElementsByClassName("mySlides");
var indictors = document.getElementsByClassName("indictor");

if (n > slides.length)
{
count = 1
}
if (n < 1)
{
count = slides.length
}
for (i = 0; i < slides.length; i++)
{
slides[i].style.display = "none";
}
for (i = 0; i < indictors.length; i++)
{
indictors[i].className = indictors[i].className.replace(" active", "");
}
slides[count-1].style.display = "block";
indictors[count-1].className += " active";
}


CSS:

.slideshow-container
{
max-width: 1000px;
max-height:450px;
position: relative;
padding-left: 300px;
margin: auto;
background-color: grey;
}

.text
{
color: white;
background-color: black;
opacity: 0.6;
font-size: 15px;
padding: 8px 12px;
left: 0px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: left;
}

.numbertext
{
color: white;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

Answer

Well, part of the key is to parameterize all of the required details - that is, don't hard-code things like the output container's id or that of the target image element if you decide to use a single image and change it's source.

Some approaches use an unordered-list and set it (with css) so only the first item is visible. Changing slides then becomes a matter of moving the li items around inside their container. I.e if one calls appendChild on the parent with the first li item as a parameter, it will be hidden since it's now the last li item and the 2nd item will now be the first and this will be the one displayed.

While the first approach is a little more straight forward, the 2nd has the benefits of (0) not needing to know or care how many images there are - you simply move the first li item to be the last, or move the last one to be first and, (1) all the images are loaded at the start, so you don't get a small delay as each slide is shown for the first time and loaded.

Other approaches change the src of an image element.

I've utilized the second here. I've not bothered with prev/next buttons - this may mean this answer is beyond you at the moment. I would add prev/next functions inside the startSlideshow function and return the function itself - i.e return this;, rather than the id of the timer (which is to allow it to be stopped via clearInterval)

JS

function newEl(tag){return document.createElement(tag)}
function byId(id){return document.getElementById(id)}

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
    var slideshow1TimerId = startSlideshow( ['uqrsGpO.jpg', 'vote-pedro.jpg'], 'slide1', 3000 );
    var slideshow2TimerId = startSlideshow( ['zS0lOud.jpg', 'tree.png', 's13.bmp'], 'slide2', 1000 );
}

function startSlideshow(imgNameArray, idOfContainer, msPerSlide)
{
    var container = byId(idOfContainer);
    var tgtImgElem = newEl('img');
    container.appendChild(tgtImgElem);

    var timerId = setInterval(setSlideImg, msPerSlide);
    var slideIndex = 0;
    var numSlides = imgNameArray.length;

    function setSlideImg()
    {
        tgtImgElem.src = imgNameArray[slideIndex];
        slideIndex++;
        if (slideIndex >= numSlides)
            slideIndex = 0;
    }
    return timerId;
}

CSS

#slide1 img, #slide2 img
{
    height: 128px;
}

HTML

<div id='slide1'></div>
<div id='slide2'></div>