How to add a second slideshow on the same webpage

Question

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?

Please show us your code, or link us to your web page. You may need to use a unique ID for each of the slideshows. — Garconis, Oct 25 '16 at 02:43
it's really hard to answer, you need to explain much more than this, and give us your sample code possible put it in Jsfiddle or somewhere to show us a demo then we can help more. — Majid, Oct 25 '16 at 02:43
You probably should paste the full code here or provide a link to jsfiddle — react_or_angluar, Oct 25 '16 at 02:44
First things first, you're missing a closing `` tag in slide 3. — Garconis, Oct 25 '16 at 03:06
When did you call `function motion(n)`, what parameter did you pass on for the `n`, and how you do the recursive process to call the `function motion(n)` again? At least if you include that, others could recreate your problem even without the full code, and it's best to provide the `CSS` needed to for better example — Kyojimaru, Oct 25 '16 at 03:14
@Kyojimaru Sorry I didn't paste the full code for the script, basically n represents the slide number, I have 2 other functions that control the direction of navigation of the slide, using 2 buttons "back" and "forward", using n as the current slide number. I'm adding the css now. — Natasha Kydd, Oct 25 '16 at 03:22

enhzflep · Accepted Answer · 2016-10-25T04:45:18.250

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 second approach is a little more straight forward, the 1st 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>

How to add a second slideshow on the same webpage

1 Answers1

JS

CSS

HTML

Linked