私は本当にあなたのコードに従うことができませんでしたが、私は純粋なJavaScriptやCSS、HTMLソリューションを作成しました。あなたがアクションでそれを見ることができるように、このJSBinを参照してください：https://jsbin.com/kixofal/5/edit?html,css,js,output
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="slider" data-showing="2">
<div class="slide image-1"></div>
<div class="slide image-2"></div>
<div class="slide image-3"></div>
</div>
<button class="button previous">left</button>
<button class="button next">right</button>
</body>
</html>
JAVASCRIPT：
function initSlider() {
var slider = document.querySelector("#slider");
var previousButton = document.querySelector(".previous");
var nextButton = document.querySelector(".next");
var slides = slider.querySelectorAll(".slide");
var animationDuration = 700;
// put slides in it's initial place
var currentIndex = slider.dataset.showing * 1;
[].forEach.call(document.querySelectorAll(".slide"), function(elem, i){
i = i+1; // index starts at 0
if(i === currentIndex) return;
elem.style.transform = i < currentIndex ? "translateX(-100%)" : "translateX(100%)";
});
// prevent user from bursting through the slides.
function onAnimationEnd() {
clearTimeout(slider.isMoving);
slider.isMoving = undefined;
}
function moveSlide(animationName){
var direction = 0;
if(animationName === "left") direction = -1;
if(animationName === "right") direction = 1;
return function() {
// check if it is currently moving
if(!isNaN(slider.isMoving)) return;
// some old devices might skip a few animationEnd events
// setTimeout is used as a last reource to prevent that to happen.
slider.isMoving = setTimeout(onAnimationEnd, animationDuration + 50);
var current = slider.dataset.showing * 1;
var next = current + direction;
if(next < 1) next = 3;
if(next > slides.length) next = 1;
var currentSlide = slider.querySelector(".image-" + current);
var nextSlide = slider.querySelector(".image-" + next);
currentSlide.style.animationName = "slide-out-" + animationName;
nextSlide.style.animationName = "slide-in-from-" + animationName;
slider.dataset.showing = next;
};
}
previousButton.addEventListener("click", moveSlide("left"), false);
nextButton.addEventListener("click", moveSlide("right"), false);
slider.addEventListener("animationend", onAnimationEnd, false);
}
window.addEventListener("load", initSlider, false);
CSS：
#slider {
overflow: hidden;
position: relative;
width: 100%;
/* viewport units to keep the ratio */
height: 50vw;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
animation-fill-mode: forwards;
animation-duration: 700ms;
animation-timing-function: ease;
}
.image-1 {
background-image: url("http://www.freedigitalphotos.net/images/img/homepage/87357.jpg");
}
.image-2 {
background-image: url("http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg");
}
.image-3 {
background-image: url("http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg");
}
// animations
@keyframes slide-out-left {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
@keyframes slide-out-right {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
@keyframes slide-in-from-left {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
@keyframes slide-in-from-right {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
編集
私は、このソリューションにはブラウザプレフィックスがないことを忘れていました。私はこれを避け、ソリューションをきれいに保ちました。
また、このソリューションではjQueryやその他の外部モジュールを使用していないため、GPUがスライド変更をレンダリングできるようにすることに集中しています（すべてのデバイスがスムーズにレンダリングできるようにアニメーションを最適化しようとしています）。ここで
はこれを見ている：https://jsfiddle.net/t2emherc/ – blex
あなたはいないかを説明することができますあなたのために働く？ちょうどそれが正常に動作していないと言っても、あなたが実際にどのような問題を持っているのかは分かりません。 – JoeMoe1984
申し訳ありませんが、次のボタンをクリックすると画像が変更されませんでした。 –