Show and hide img

Question

I have some code for slider:

var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2500);    
}

CSS:

.mySlides {

    display:none;

    width: 100%;
    height: 100%;

    }
    .w3-animate-right{
        position:relative;
        -webkit-animation:animateright 0.9s;
        animation:animateright 0.9s;
    }
    @-webkit-keyframes animateright{
        from{right:-700px; display: none;} to{right:0; display: block;}
    }
    @keyframes animateright{
        from{right:-700px; display: none;} to{right:0; display: block;}
    }

Now as you see from css image is coming from -700px because slider width is 700px But I am trying to make it display:none for image parts that are not inside the slider frame. I caan do it by putting invisible "walls" next to slider by making it with bigger z index and to slide image under it. But I want to do it without that if it is possible. I will add some paint pic how I would like it to be...

img

Answer 1

The best practice for this is to use the overflow: hidden; css attribute to keep all content outside a div hidden.

More information can be found on this page .

Answer 2

You can create a CSS carousel using overflow: hidden . The exact structure can be found, for example, here:

https://dl.dropboxusercontent.com/u/2629908/sandbox/fluid-css-carousel/index.html