Jump to content

How to make slide repeat images


deldalton

Recommended Posts

Here's my Code Pen.

 

At the moment, we have three images in the slideshow. It scrolls to the images container by the width of each image (and a few extra pixels to allow for the whitespace between the images - please let me know how to get rid of the white space if you know how).

 

When it gets to the last image, I've specified that it should return container to its original location.

 

My code works. Great!

 

But, it's not quite what I'd like to achieve. I would like the slideshow to appear as if it continues to slide to the left but starts at the beginning of the loop.

 

At the moment, it looks like someone made it who doesn't know what they're doing ... ;)

 

So, I know how I would like it to appear. Unfortunately, I'm not quite sure how to tell Javascript what I want to achieve. Mainly because I don't fully appreciate what I want to achieve (if that makes any sense).

 

I have two possible solutions.

1. Reorder the elements within the HTML document, so that the slideContainer forever slides left (although could this cause performance issues if it's running for too long?)

2. Add the third image twice. Once at the very beginning of the slideContainer, and then again in its expected location, and change the starting position to -1200px, rather than 0. Then, allow the slideContainer to be moved 1200px left twice. To get me to the third image. Then, disable transitions, change the location of the slideContainer to 0px, and re-enable transitions and then restart the slide?

 

Would my second example be the best suggestion?

 

Thanks!

Edited by deldalton
Link to comment
Share on other sites

I like the idea of every time it slides, you move the first image to the last position. You might have to mess around with the positions of where to slide to though, because that will also change the position of the image being shown. Basically, you have a list of 1..N images. Every time it slides, it moves from image 1 to image 2, then you remove image 1 (which makes image 2 image 1, and you'll probably have to adjust the slide position so that it is displaying image 1 again instead of image 2), and then you make the old image 1 the new image N. That sounds like a fairly elegant solution if you can work it out so that it doesn't jump when you move the first image to the last place and change the slide position.

Link to comment
Share on other sites

justsomeguy. Thanks for the response. I did expect that to be the solution most people agreed with. I'm sure I've seen it suggested somewhere else before ​(which is probably the only reason I thought of it).

 

However, in the mean time, check out a working Code Pen of the second solution I suggested. This works. And, as far as the end user is concerned, does the same thing. Let me know what you think. Do you think it uses less code than trying to implement the first solution?

Edited by deldalton
Link to comment
Share on other sites

What i did is clone first image to end so it give the impression of looping to first smoothly, as soon as the clone image has slid into view, set to first image position, its instant, no delay no stuttering, no continuous swapping of images.

 

Just to clarify, dsonesuk. In my example, I have cloned the last image (that's image 3) and placed it again at the beginning (we'll call this image 3b), jumping to it when the last image is viewed. There is a slight delay, after image 3 has been swapped for image 3b because of the setTimeout(slideIt, 3000) delay before telling it to slide to the next image.

 

Your suggestion clones image 1 and puts it at the very end ​(which is the opposite of my approach). But, the code will ultimately be the same and I would still end up with the delay I have at the end? Is that correct? I just need to work on the code to remove the delay.

Edited by deldalton
Link to comment
Share on other sites

I've updated my Code Pen. I'd somehow managed to put an extra if statement that wasn't required.

 

But, there's still a problem; a delay after we jump to the very first image, before proceeding to slide onto the next image.

 

I have tried changing the else statement to look like this but it doesn't appear to execute the lines in the way I expected.

if (-2408 <= left){      slideEle.style.transition = '1s';      slideEle.style.left = (left + -1204) + 'px';      slideLinkEle.href = slideLinks[index];    } else {      slideEle.style.transition = '0s';      slideEle.style.left = 0 + 'px';      slideEle.style.transition = '1s';      slideEle.style.left = (-1204) + 'px';      slideLinkEle.href = slideLinks[0];    }

I expect the code to be executed line by line. But, it would appear to execute the transitional effects first and then the style.left = 0 + 'px' line. So, it ends up scrolling back to the first image ​(rather than jumping) and then the second style.left line doesn't even appear to be executed.

Edited by deldalton
Link to comment
Share on other sites

Got it! ... :)

function slideIt() {    index = (index == maxLinks) ? 0 : ++index;  	var left = parseInt(slideEle.style.left);  		if (-2408 <= left){      slideEle.style.transition = '1s';      slideEle.style.left = (left + -1204) + 'px';      slideLinkEle.href = slideLinks[index];    } else {      slideEle.style.transition = '0s';      slideEle.style.left = 0 + 'px';      slideLinkEle.href = slideLinks[0];      setTimeout(resetSlide, 0);    }        setTimeout(slideIt, 3000);}function resetSlide() {  slideEle.style.transition = '1s';  slideEle.style.left = -1204 + 'px';  slideLinkEle.href = slideLinks[0];}
Link to comment
Share on other sites

This an old version i used

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <title>Untitled Document</title>        <script type="text/javascript">            /*<![CDATA[*//*---->*/            var gallery_parent, imgWidth, leftPos, NextSlidePos, calculate_TotalWidth = 0, t, gall_img;            var full_screen            window.onload = function() {                gallery_parent = document.getElementById("gallery_slider");                gall_img = gallery_parent.getElementsByTagName("img");                imgWidth = parseInt(gall_img[0].width);                NextSlidePos = imgWidth;                for (i = 0; i < gall_img.length; i++)                {                    if (i == 0) // create copy of first image and place at end to give continious looping effect                    {                        var end_image = document.createElement("img");                        end_image.src = gall_img[0].src;                        end_image.alt = gall_img[0].alt;                        gallery_parent.appendChild(end_image);                    }                    calculate_TotalWidth += parseInt(gall_img[i].width);                    gall_img[i].title = gall_img[i].alt;                }                document.getElementById("image_description").innerHTML = "<p>" + gall_img[0].alt + "</p>";                leftPos = -calculate_TotalWidth;                gallery_parent.style.width = calculate_TotalWidth + "px";                durationOfSlide();                var required_height = parseInt(window.innerHeight - 100);                var proportional_width = parseInt((required_height / gall_img[0].height) * (imgWidth));                if ('v' == 'v')                {                    required_height = parseInt(document.documentElement.clientHeight - 100)                    proportional_width = parseInt((required_height / gall_img[0].height) * (imgWidth));                }                document.getElementById("image_description")                full_screen = document.createElement("img");                full_screen.id = "full_small_img";                full_screen.style.width = proportional_width + "px";                full_screen.style.height = required_height + "px";                document.getElementById("inner").appendChild(full_screen);                var toggle_full_screen = document.getElementById("full_small");                document.getElementById("outer").style.display = "none";                toggle_full_screen.onclick = function()                {                    document.getElementById("outer").style.display == "none" ? document.getElementById("outer").style.display = "block" : document.getElementById("outer").style.display = "none";                }                document.getElementById(full_screen.id).onclick = function()                {                    document.getElementById("outer").style.display == "none" ? document.getElementById("outer").style.display = "block" : document.getElementById("outer").style.display = "none";                }            }            var count = -1;            function slideLeft()            {                leftPos -= 10; //move image left in increments of -10 pixels                if (leftPos >= -NextSlidePos)                {                    gallery_parent.style.left = leftPos + "px";                    slideSpeed();                }                else                {                    clearTimeout(t);                    NextSlidePos += imgWidth;                    count++;                    document.getElementById("image_description").innerHTML = '<p>' + gall_img[count].alt + '</p>';                    full_screen.src = gall_img[count].src;                    durationOfSlide();                    if ((leftPos - imgWidth) <= -calculate_TotalWidth) //after duplicate of first image position is reach at end return to position of first image                    {                        clearTimeout(t);                        NextSlidePos = imgWidth;                        leftPos = 0;                        count = 0;                        durationOfSlide();                    }                }            }            function slideSpeed()            {                t = setTimeout("slideLeft()", 8)            }            function durationOfSlide()            {                t = setTimeout("slideLeft()", 3000) // 3 seconds between each slide            }            /*--*//*]]>*/        </script>        <style type="text/css">            #gallery_outer { width:1200px; height:400px; margin:100px auto 0; position:relative; overflow:hidden;}            #gallery_slider { position:absolute; top:0; left:0; height:400px; left: -1200px;}            #gallery_slider img {float:left; height: 400px;  display:block;width:1200px;}            #image_description{width:1200px; height:3em; background-color:#669933; margin:0 auto; text-align:center; overflow:hidden;}            #full_small_img {/*z-index: 99; display: none;*/}            #full_small {/*position:relative; z-index:999;*/}            #outer { position:fixed; top:0; left:0; width:100%; height:100%; z-index:99; display:none;}            /* certering */            .middle { height:100%; display:table; margin:0 auto; width:800px; }            #inner { vertical-align:middle; display:table-cell; width:100%;}        </style>        <!--[if lte IE 7]>         <style>          /* centering for ie6/ie7 */          .middle { position:absolute; top:50%; left:50%; height:auto; }          #inner { position:relative; top:-50%; left:-50%;}         </style>        <![endif]-->    </head>    <body>        <div id="gallery_outer">            <div id="gallery_slider">                <img src="Nakheel-1200x400.jpg" alt="picture no1" />                <img src="phe_meetings_1200x400.jpg" alt="picture no2" />                <img src="tube-1200-x-400.jpg" alt="picture no3" />            </div>        </div>        <div id="image_description"></div>        <input id="full_small" type="button" value="Full screen" />        1159 X 850        <div id="outer">            <div class="middle">                <div id="inner">                </div>            </div>        </div>    </body></html>
Link to comment
Share on other sites

Uh, you have used the same id three times.

 

Ah. Yes I have! Let me amend that!

 

In fact, the IDs were left from a previous experiment and they're not needed at all now. But, yes, I should have used a class.

Edited by deldalton
Link to comment
Share on other sites

Please see my latest Code Pen of this example. I've removed the duplicate IDs now. They're no longer required now anyway but I do appreciate the mistake I made.

 

The latest Code Pen is working exactly how I would like it to. Interestingly, however, when I implement the same code locally, on my Apple Mac device using Safari and Chrome, the resetSlide function doesn't seem to work and I'm presented with the same delay I had before.

 

I haven't tested it on my Windows device yet.

Link to comment
Share on other sites

I'm not seeing any difference in any of the links you've posted, they all work like the first one.

 

Here's the original ... http://codepen.io/anon/pen/OPMNVq

 

Here's the latest ... http://codepen.io/anon/pen/KwVzzd

 

The other links I posted between the original and the latest was the same link as the latest but I have updated it since, which is why you can't tell a difference between them.

Edited by deldalton
Link to comment
Share on other sites

That's interesting. The two links take me to two different examples. The original that, upon seeing the last image, scrolled in the opposite direction to the first image. The latest that, upon seeing the last image, jumps to the first image (which is a clone of the last image) without a transition and then repeats the rest of the slides.

 

Maybe I'll put a new Code Pen together, to take advantage of a fresh link.

Edited by deldalton
Link to comment
Share on other sites

I wouldn't trust a site like CodePen to provide a reliable measure of how your code is functioning, and I did seem to see that IE10 was doing something different than Firefox.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...