JustALittleBit JustALittleBit - 6 months ago 25
jQuery Question

Show and hide img

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

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.