2
私は死んだ簡単なカルーセルを構築しようとしています。バニラJavaScriptのカルーセル - スライドがない場合の停止方法
各スライドの幅は25％です。したがって、ビューポートの内側には合計4つの表示が常に表示されます。
これまでのところ、スライドが残った&右ボタンをクリックすると、クリックごとにtransform: translateXが増減します。これは、リストの最初または最後のスライドをビューポートから正確に移動し、次のスライドのためのスペースを確保することです。
スライドがなくなったときにスライダを停止させる方法を頭で囲むことはできません。
私はslideListの幅の合計を計算してきた、と私は私のような何かをする必要があると考えています：
「総slideList幅はメインコンテナの左または右を通過して移動している場合は、無効にその方向のスライドボタンです。
編集：私は常にビューポート内に4つのスライドがあることを忘れていました。したがって、slideListの最初または最後のslideItemがビューポートの内側にあるとすぐに、25％の増減を停止したいと思います。それ以外の場合は、slideListがビューポートから押し出されます。
(function() {
\t var slideList = document.querySelector(".slide-list");
\t var slideItems = document.querySelectorAll(".slide-list li");
\t var btnSlideLeft = document.querySelector(".btn-slide-left");
\t var btnSlideRight = document.querySelector(".btn-slide-right");
\t var numberOfSlides = slideItems.length;
\t var totalSlideListWidth = slideList.getBoundingClientRect().width;
\t var moveAmount = 25; // for translateX left/right
\t var initial = 0;
\t
\t btnSlideLeft.addEventListener("click", function() {
\t \t initial -= moveAmount;
\t \t slideList.style.transform = "translateX(" + initial + "%)";
\t });
\t btnSlideRight.addEventListener("click", function() {
\t \t initial += moveAmount;
\t \t document.querySelector(".slide-list").style.transform =
\t \t \t "translateX(" + initial + "%)";
\t });
})();.page-container {
\t margin-left: auto;
\t margin-right: auto;
\t overflow: hidden;
}
.js-carousel {
\t overflow: hidden;
\t list-style: none;
margin: 0 auto;
\t max-width: 1000px;
\t font-size: 0;
\t white-space: nowrap;
}
.slide-list li {
\t display: inline-block;
\t height: 150px;
\t width: 25%;
}
.image {
\t width: 100%;
\t height: 100%;
\t object-fit: cover;
}
.slide-nav {
\t padding: 2rem;
\t margin: 1rem auto;
\t max-width: 150px;
}
.btn {
\t cursor: pointer;
\t padding: 1rem 1.5rem;
\t border: 0;
\t margin-left: .25rem;
\t margin-right: .25rem;
}<div class="page-container">
\t
\t
\t <div class="js-carousel">
<ul class="slide-list">
<li><img class="image" src="https://wallscover.com/images/jurassic-park-iii--3.jpg" alt=""></li>
\t
<li><img class="image" src="https://wallscover.com/images/jurassic-park-iii-wallpaper-17.jpg" alt=""></li>
\t
\t <li><img class="image" src="https://wallscover.com/images/jurassic-park-iii--6.jpg" alt=""></li>
\t \t
\t <li><img class="image" src="https://wallscover.com/images/jurassic-world-wallpaper-7.jpg" alt=""></li>
\t
\t
\t <li><img class="image" src="https://wallscover.com/images/jurassic-world-10.jpg" alt=""></li> \t
\t \t <li><img class="image" src="https://wallscover.com/images/jurassic-world-wallpaper-10.jpg" alt=""></li>
\t
</ul>
<div class="slide-nav">
\t <button class="btn btn-slide-left">Left</button>
<button class="btn btn-slide-right">Right</button>
</div>
</div>
</div>は見てのGithub上で多くのカルーセルの例がありますが、私は私の現在のJSのスキルレベルのために十分に簡単であるものを見つけることができません。
誰でも私にいくつかの提案を教えてもらえますか？
ありがとうございました:)
私はあなたのコードを無効BTN機能は非常に便利であることを理解、ありがとうございました。しかし、私の主な問題は、スライダがウィンドウから完全に移動することです。最後のスライドが左または右からウィンドウに入ったときに停止する方法が必要です（ビューポートには常に4つのスライドがあります）。私はおそらく私の元の質問を間違って言いました。 slideList全体の合計幅を計算し、slideList全体がウィンドウの左右いずれかの端を通過したときを検出する方法を見つけるのは間違っていますか？ – Capax