Показать и скрыть IMG

У меня есть некоторый код для слайдера:Показать и скрыть IMG

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;} 
    }

Теперь, как вы видите из CSS изображения исходит из -700px, потому что слайдер width is 700px Но я пытаюсь сделать он отображает: нет для частей изображения, которые не находятся внутри рамки слайдера. Я делаю это, нанося невидимые «стены» рядом со слайдером, делая его с большим индексом z и слайдом под ним. Но я хочу сделать это без этого, если это возможно. Я добавлю некоторые краски ПОС, как я хотел бы, чтобы это было ...

img

источник

2016-05-29 JustALittleBit