필요없는 목록/CSS 스타일

슬라이드 API 없이 코드로 하기 2 / 10 (자동으로 "좌"로 이동)

비밀안 2023. 4. 10. 19:23
클릭

버튼을 클릭하면 명언이 나와요

-

이름이 나와요

최종 완성본

 

 

이번에도 API없이 코드로 만들어보는 슬라이드 유형입니다.

이번에는 absolute없이 사용하는 방법입니다.

(JAVASCRIPT, GSAP, jQuery를 사용했습니다.)

 

HTML+CSS코드

<style>
    /* slider__wrap */
   .slider__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
   }
   /* 이미지가 보이는 영역 */
   .slider__img {
    position: relative;
    width: 800px;
    height: 520px;
    /* overflow: hidden; */
   }
   /* 전체 이미지를 감싸고 있는 부모 : 움직이는 영역 */
   .slider__inner {
    display: flex;
    flex-wrap: wrap;
    width: 4000px;
    height: 520px;
   }
   /* 개별적인 이미지 */
   .slider {
    position: relative;
    width: 800px;
    height: 520px;
   }
   #header li a {
    line-height: 27px;      
   }
</style>
</head>

<body class="img02 bg02 font05">
<header id="header">
    <h1>Javascript Slider Effect02</h1>
    <p>슬라이드 이팩트 : 좌로 움직이기</p>
    <ul>
        <li><a href="sliderEffect01.html">1</a></li>
        <li class="active"><a href="sliderEffect02.html">2</a></li>
        <li><a href="sliderEffect03.html">3</a></li>
        <li><a href="sliderEffect04html">4</a></li>
        <li><a href="sliderEffect05.html">5</a></li>
    </ul>
</header>
 <!-- //header -->
 <main id="main">
    <div class="slider__wrap">
        <div class="slider__img">
            <div class="slider__inner">
                <div class="slider"><img src="./img/slider_bg07b.jpg" alt="이미지1"></div>
                <div class="slider"><img src="./img/slider_bg08b.jpg" alt="이미지2"></div>
                <div class="slider"><img src="./img/slider_bg03b.jpg" alt="이미지3"></div>
                <div class="slider"><img src="./img/slider_bg04b.jpg" alt="이미지4"></div>
                <div class="slider"><img src="./img/slider_bg06b.jpg" alt="이미지5"></div>
            </div>
        </div>
    </div>
</main> 
<!-- //main -->
<footer id="footer">
    <a href="mailto:skadldldl123@gmail.com">mailto:skadldldl123@gmail.com</a>
</footer>
<!-- //footer -->
</body>

코드 설명

(이번거가 특히 이해가 안가서 1시간 쳐보고 이해가 갔습니다.)

1.div태그인 slider__wrap은 전체 내용물을 이동 시켜줍니다.

(이번것도 align-items는 먹히지 않아서 height값을 부여해서 가운데로 이동하였습니다.)

2.div태그인 slider__img는 이제 보여줄 width만큼만 주고 overflow로 잘라줍니다.

(주렁 주렁 달고온 것들을 눈에 안보여주게 하고. 그것들을 translateX로 width값만큼 이동을 시켜주면 됩니다.)

3.div태그인 slider__inner는 .slider의 모든 width값을 합한만큼 줍니다.

(display:flex를 주면 좌->우로 주렁 주렁 달고 옵니다. + flex-wrap 필수)

4.div태그인 slider는 각각 width를 줍니다.

 

JAVASCRIPT코드

<script>
// 선택자 
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img");      //보여지는 영역
const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역
const slider = sliderWrap.querySelectorAll(".slider");          //개별 영역

let currentIndex = 0;               //현재 보이는 이미지
let sliderCount = slider.length;    //이미지 갯수
let sliderInterval = 3000;          //이미지 간격 시간
</script>

<script>
// javascript
// 트랜지션 설정
// sliderInner.style.transition = "all 0.6s";
// setInterval(() => {
//     1 % 5 = 1  / 2 % 5 = 2 / 3 % 5 = 3 / 4 % 5 = 4 / 5 % 5 = 0
//     currentIndex = (currentIndex+1) % sliderCount;
//     sliderInner.style.transform = "translateX(" + (-800 * currentIndex) + "px)";

//     위에 코드 예를 들은 것임.
//     // sliderInner[index].style.transform = translateX("-800px");   //-800 * 1
//     // sliderInner[index].style.transform = translateX("-1600px");  //-800 * 2
//     // sliderInner[index].style.transform = translateX("-2400px");  //-800 * 3
//     // sliderInner[index].style.transform = translateX("-3200px");  //-800 * 4
//     // sliderInner[index].style.transform = translateX("-0px");     //-800 * 0
// }, sliderInterval);
</script>

<!-- GSAP CDN  -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>    
// GSAP CDN - https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js
setInterval(() => {
    currentIndex = (currentIndex + 1) % sliderCount;

    // gsap.to(".클래스이름", {속성:값});
    // gsap.to(대상, {속성:값});
    gsap.to(sliderInner, {
        // x : translateX
        x : -800 * currentIndex,
        duration : 1,
        ease : "elastic.out"
    });
}, sliderInterval);
</script> -->

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
setInterval(() => {
    // currentIndex = (currentIndex + 1) % document.querySelector(".slider").length;
    currentIndex = (currentIndex + 1) % $(".slider").length;
    console.log(currentIndex);

    // jquery는 translate을 지원하지 않음
    $(".slider__inner").css("position", "relative");
    $(".slider__inner").animate( {left: -800 * currentIndex}, 1000, "easeOutElastic")


}, sliderInterval);
</script>

코드 설명

1.

// 선택자 
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img");      //보여지는 영역
const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역
const slider = sliderWrap.querySelectorAll(".slider");          //개별 영역

querySelector로 클래스, 아이디, 태그를 찾습니다.

 

2.

let currentIndex = 0;               //현재 보이는 이미지
let sliderCount = slider.length;    //이미지 갯수
let sliderInterval = 3000;          //이미지 간격 시간
  • currentIndex는 이제 현재 보여줄 이미지로 opacity로 숨겨주고 난 다음에 데이터를 저장시켜서 이동하는 효과를 줄 예정입니다.
  • sliderCount는 div태그인 .slider 이미지의 전체 갯수인비다.
  • sliderInterval은 setInterval를 동작시킬때의 시간입니다.(3초)

3. JAVASCRIPT로 만들어 보기

<script>
// javascript
// 트랜지션 설정

sliderInner.style.transition = "all 0.6s";
 
setInterval(() => {
//    1 % 5 = 1  / 2 % 5 = 2 / 3 % 5 = 3 / 4 % 5 = 4 / 5 % 5 = 0
     currentIndex = (currentIndex+1) % sliderCount;
     sliderInner.style.transform = "translateX(" + (-800 * currentIndex) + "px)";

//    위에 코드 예를 들은 것임.
     // sliderInner[index].style.transform = translateX("-800px");   //-800 * 1
     // sliderInner[index].style.transform = translateX("-1600px");  //-800 * 2
     // sliderInner[index].style.transform = translateX("-2400px");  //-800 * 3
    //  sliderInner[index].style.transform = translateX("-3200px");  //-800 * 4
     // sliderInner[index].style.transform = translateX("-0px");     //-800 * 0
 }, sliderInterval);
</script>

sliderInner은 div태그 .slider__inner로 div태그 .slide의 모든 width값을 합한만큼 가진 아이입니다.(4000px)

translateX로 -800(좌측)으로 이동 시켜줍니다.(currentIndex의 값만큼 곱해줍니다)

 

4.GSAP을 활용한 방법

 <!-- GSAP CDN  -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>    
    // GSAP CDN - https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js
    setInterval(() => {
        currentIndex = (currentIndex + 1) % sliderCount;

        // gsap.to(".클래스이름", {속성:값});
        // gsap.to(대상, {속성:값});
        gsap.to(sliderInner, {
            // x : translateX
            x : -800 * currentIndex,
            duration : 1,
            ease : "elastic.out"
        });
    }, sliderInterval);
</script> -->

이것도 간단합니다.

3번의 코드를 그대로 사용하고. 전체 크기를 담고 있는 div태그인 sliderInner를 가져옵니다.

그리고 translateX로 -800 * currentIndex(1,2,3,4,5)를 곱해주면 됩니다.

Gsap에서는 translateX가 x입니다.

 

5.jQuery를 활용한 방법

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
    setInterval(() => {
        // currentIndex = (currentIndex + 1) % document.querySelector(".slider").length;
        currentIndex = (currentIndex + 1) % $(".slider").length;
        console.log(currentIndex);

        // jquery는 translate을 지원하지 않음
        $(".slider__inner").css("position", "relative");
        $(".slider__inner").animate( {left: -800 * currentIndex}, 1000, "easeOutElastic")


    }, sliderInterval);
</script>

이것도 간단합니다.

3번의 코드를 그대로 사용하고.

left의 값만큼 이동 시켜주면 됩니다.(-800px은 좌측으로 이동)

~_~ 

'필요없는 목록/CSS 스타일'의 다른글

  • 현재글슬라이드 API 없이 코드로 하기 2 / 10 (자동으로 "좌"로 이동)

관련글

댓글

티스토리툴바