スライドUIはキャッシュユニットと呼ばれます.
one-wayアニメーション付きUIの作成方法

アニメーション開始前に画面

を作成する.

アニメーションを終了すると、画面

が作成されます.
JSコード作成

いつ終了画面になるか

遷移

を追加

one-wayアニメーション付きUIの作成

1.アニメーションの開始前に画面を作成する

▲3枚の写真は横に長く置くべきでしょうか?
そして全体を左に移動すればいいです
ではhtml cssのようにコードを書きましょう.

<div style="overflow: hidden">
   <div class="slide-container">
     <div class="slide-box">
       <img src="car1.png">
     </div>
     <div class="slide-box">
       <img src="car2.png">
     </div>
     <div class="slide-box">
       <img src="car3.png">
     </div>
   </div>
</div> 

<button class="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button>

.slide-container {
 width: 300vw;
 transition: all 1s;
}
.slide-box {
 width: 100vw;
 float: left;
}
.slide-box img {
 width: 100%;
} 

このようにコードを記述すると,3つの画像が水平に配置される.
(4次プリスケーリング遷移)

vw単位はブラウザ幅に比例します.100 vwはブラウザ幅の100%です.

2.アニメーション終了後にスクリーンを作成する

2番のボタンを押すと、2番の写真が見えます
最終画面を作る音
html要素を左に移動するにはmargine-leftまたはtransformプロパティを使用します.

.slide-container {
  width: 300vw;
  transition: all 1s;
  transform: translateX(-100vw);
} 

さっき作成したcssファイルに長いボックスがあります.
transform: translateX(-100vw); これをプラスして、2枚目の写真が滑られて、よく見えました.
これを終了画面にすればいいです

3.JSコードを作成し、いつ終了画面になるかを決める

$('.slide-1').on('click', function() {
  $('.slide-container').css('transform', 'translateX(0vw)');
});

$('.slide-2').on('click', function() {
  $('.slide-container').css('transform', 'translateX(-100vw)');
});

$('.slide-3').on('click', function() {
  $('.slide-container').css('transform', 'translateX(-200vw)');
});

次はJavaScriptです
ボタン2を押すと最終画面になります
jQueryで見つけた要素の中にあります.css()の場合、styleプロパティを変更できます.

次のボタンの作成

ボタンを押すと、

になります.
今見ている写真が1なら2番の写真を見せてください

今見た写真二面三号写真

を見せてください
これは直接コードに翻訳すればいいです.

<button class="next">다음</button>
<script>

  var 지금사진 = 1;

  $('.next').on('click', function(){
    if (지금사진 == 1) {
      $('.slide-container').css('transform', 'translateX(-100vw)');
      지금사진 += 1;
    } 
    else if (지금사진 == 2){
      $('.slide-container').css('transform', 'translateX(-200vw)');
      지금사진 += 1;
    }
  })
</script>

ボタンを1つ押すたびに写真+1が追加されます.
では今写真が1の時にボタンを押すと.

2号写真

var現在の写真+1

あなたはこのような方法でよくできます.

(アプリ2)4枚、5枚の写真があれば、次のボタンの機能も正常に機能していたら?

現在、4枚の写真があれば、次のボタンJSコードの修正が面倒になります.
文を追加する必要がありますが、これが面倒な場合は、写真の数に関係なく正常に動作するコードを作成することもできます.
よく見るとボタンを1つ押すと
現在写真が1の場合は-100 vw移動
今なら写真が2面-200 vw移動
現在写真が3の場合は-300 vw移動
...
和音を編んでるんじゃないの?いくつかのルールを見ました.
ではif文は当初は必要ありません.
ボタンを押して、「translate X(-現在の写真vw)」に従ってコードを1行移動すればいいです.

<button class="next">다음</button>
<script>

  var 지금사진 = 1;

  $('.next').on('click', function(){
      $('.slide-container').css('transform', 'translateX(-' + 지금사진 + '00vw)');
      지금사진 += 1;
  })
</script>

これで次のボタンの動きもいいですね
でも今回は5枚の写真が4枚あってもよくできました
注:アップルをコード