VanilaJSを使用したCarouselの作成

57488 ワード

VanilaJSでCarouselを作成しました.後で各種機能を追加した記事をアップロードします.(後で書くために、ははは)

Carousel
上のリンクに置いてありました.

2レコーダなしのビデオ講義のコードを参考に書いた文章です.

YouTube レコーダなしのビデオ講義を見て、実現したい機能を追加しました.

基本htmlコードの作成

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>

<body>
    <div class="container">
        </div>
    </div>
</body>

</html>

次にcontainerクラスでcarouselクラスとスライドを作成します.

<div class="container">
        <div class="carousel">
            <div class="slide_item">
                <h1>Slide1</h1>
            </div>
            <div class="slide_item">
                <h1>Slide2</h1>
            </div>
            <div class="slide_item">
                <h1>Slide3</h1>
            </div>
            <div class="slide_item">
                <h1>Slide4</h1>
            </div>
            <div class="slide_item">
                <h1>Slide5</h1>
            </div>    
        </div>
    </div>

クラス名はcarouselとslid itemにのみ指定されます.
これらのスライドは1枚ずつ表示され、同じ位置にある必要があります.

cssの適用

ネットワークフォントNoto Sans KRフォントも使用しています.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

body {
    font-family: 'Noto Sans KR', sans-serif;
    margin: 0;
}
        
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel {
    width: 80%;
    position: relative;
}
 
.slide_item {
    width: 100%;
    height: 500px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0 px;
    z-index: 0;
}

.slide_item:nth-child(odd) {
     background-color: yellow;
 }

 .slide_item:nth-child(even) {
     background-color: yellowgreen;
 }

position: relative;は、z−indexでスクリーン要素を重畳することができる.z-indexの高いスタックが一番上にあります.上記の場合、次のように最後のSlide 5が上部に表示されます.(これはcssの下に.slide_item:nth-child()を追加する前の写真です.上のコードに示すように、薄緑色のはずです)

次に、一番上のスライドを決定し、コードを記述するshowクラスがあると仮定します.

.showing {
    z-index: 1;
 }

showクラスがある場合はz-indexが高いので無条件に上に表示されます.
例:

<div class="slide_item showing">
    <h1>Slide1</h1>
</div>

このようにコードを修正すると、Slide 1が画面に表示されます.このメソッドを使用してCarouselが作成されます.
まず、前のスライドに移動するボタン(左Btn)と、次のスライドに移動するボタン(右Btn)を作成します.アイコンはフォントを使用しています.cdnを使用!

html

<i class="fa fa-chevron-left movebtn" id="left"></i>
	<div class="slide_item showing">
		<h1>Slide1</h1>
	</div>
	<div class="slide_item">
		<h1>Slide2</h1>
	</div>
	<div class="slide_item">
		<h1>Slide3</h1>
	</div>
	<div class="slide_item">
		<h1>Slide4</h1>
	</div>
	<div class="slide_item">
		<h1>Slide5</h1>
	</div>    
<i class="fa fa-chevron-right movebtn" id="right"></i>

css

 .movebtn {
     font-size: 30px;
     position: absolute;
     color: rgba(0,0,0,0.5);
     top: 225px;
     z-index: 2;
     cursor: pointer;
 }
        
 #left {
     left: 20px;
 }

 #left:hover {
     transition: 0.3s;
     transform: translateX(-5px);
     color: rgba(0,0,0,0.8);
  }

 #right {
     right: 20px;
 }

 #right:hover {
     transition: 0.3s;
     transform: translateX(5px);
     color: rgba(0,0,0,0.8);
 }

また、マウスの移動時に透明度の変化に伴って変化する動作も追加されました.
では、次のボタンがあります.ここでアクティビティを追加できます.

イベントの追加

html <body>タグには、<script>にコードが追加されている.document.querySelectorAll()関数を使用して、.slide_itemクラスの要素をArrayにロードします.アイコンをクリックするたびに、moveRSlide()、moveLSlide()関数が実行され、スライドがスキップされます.

const SHOWING_CLASS = "showing";
       
const Slides = document.querySelectorAll(".slide_item");
const leftBtn = document.querySelector("#left");
const rightBtn = document.querySelector("#right");

let curIndex = 0;

const moveRslide = () => {
    Slides[curIndex].classList.remove(SHOWING_CLASS);	// 현재 슬라이드의 SHOWING_CLASS를 없애고
     
    if (curIndex < Slides.length - 1) {
         curIndex++;
     } else {
         curIndex = 0;
     }
    Slides[curIndex].classList.add(SHOWING_CLASS);	// 다음 슬라이드에 SHOWING_CLASS를 추가한다.
}

const moveLslide = () => {
     Slides[curIndex].classList.remove(SHOWING_CLASS);	// 현재 슬라이드의 SHOWING_CLASS를 없애고
          
      if (curIndex > 0) {
          curIndex--;
      } else {
          curIndex = Slides.length - 1;
      }
               
      Slides[curIndex].classList.add(SHOWING_CLASS);	// 다음 슬라이드에 SHOWING_CLASS를 추가한다.
  
 leftBtn.addEventListener("click",moveLslide);
 rightBtn.addEventListener("click",moveRslide);
  
}

なお、curIndexがスライドの個数を超えると、スライド1または0未満に再初期化する必要があり、if文で解決するスライド5に移動する必要がある.
これにより、各スライドの表示レベルがなくなり、追加と重複に伴ってスライドがスキップされます.

完全なコード

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

        body {
            font-family: 'Noto Sans KR', sans-serif;
            margin: 0;
        }
        
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .carousel {
            width: 80%;
            position: relative;
        }

        .slide_item {
            width: 100%;
            height: 500px;
            border-radius: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0 px;
            z-index: 0;
        }

        .slide_item:nth-child(odd) {
            background-color: yellow;
        }

        .slide_item:nth-child(even) {
            background-color: yellowgreen;
        }

        .showing {
            opacity: 1;
            z-index: 1;
        }
        .movebtn {
            font-size: 30px;
            position: absolute;
            color: rgba(0,0,0,0.5);
            top: 225px;
            z-index: 2;
            cursor: pointer;
        }
        
        #left {
            left: 20px;
        }

        #left:hover {
            transition: 0.3s;
            transform: translateX(-5px);
            color: rgba(0,0,0,0.8);
        }

        #right {
            right: 20px;
        }

        #right:hover {
            transition: 0.3s;
            transform: translateX(5px);
            color: rgba(0,0,0,0.8);
        }
       

    </style>
</head>

<body>
    <div class="container">
        <div class="carousel">
            <i class="fa fa-chevron-left movebtn" id="left"></i>
            <div class="slide_item">
                <h1>Slide1</h1>
            </div>
            <div class="slide_item">
                <h1>Slide2</h1>
            </div>
            <div class="slide_item">
                <h1>Slide3</h1>
            </div>
            <div class="slide_item">
                <h1>Slide4</h1>
            </div>
            <div class="slide_item">
                <h1>Slide5</h1>
            </div>    
            <i class="fa fa-chevron-right movebtn" id="right"></i>
        </div>
    </div>
    <script>
        const SHOWING_CLASS = "showing";
       
        const Slides = document.querySelectorAll(".slide_item");
       
       
        const leftBtn = document.querySelector("#left");
        const rightBtn = document.querySelector("#right");
        let curIndex = 0;

        const moveRslide = () => {
            Slides[curIndex].classList.remove(SHOWING_CLASS);
            if (curIndex < Slides.length - 1) {
                curIndex++;
            } else {
                curIndex = 0;
            }
            console.log(curIndex);
            
            Slides[curIndex].classList.add(SHOWING_CLASS);
        }

        const moveLslide = () => {
            Slides[curIndex].classList.remove(SHOWING_CLASS);
            if (curIndex > 0) {
                curIndex--;
            } else {
                curIndex = Slides.length - 1;
            }
            Slides[curIndex].classList.add(SHOWING_CLASS);
        }

        leftBtn.addEventListener("click",moveLslide);
        rightBtn.addEventListener("click",moveRslide);
        
    </script>
</body>

</html>

次の記事では、追加したページをアップロードします.実際、cssには多くの不足があるので、アイコンも少しハードコーディングされています.次回こそはㅠㅠ!

Reference

この問題について(VanilaJSを使用したCarouselの作成), 我々は、より多くの情報をここで見つけました https://velog.io/@gkscodus11/VanilaJS-로-Carousel만들기

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

linuxコマンドファイルの空白行を削除する

[白俊]1260DFSとBFS