필요없는 목록/CSS 스타일

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

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

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

-

이름이 나와요

최종 완성본

 

이번 슬라이드도 API 없이 코드로 작성합니다.

이번거는 위로 이동하는 슬라이드 입니다.

(1번과 2번을 활용해서 만들어보기 미션이었네요)

 

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><a href="sliderEffect02.html">2</a></li>
        <li class="active"><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>

코드 설명

(이번것은 2번을 활용하여서 HTML내용이 슬라이드 2번과 똑같습니다.)

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>
    // javascript
    // 트랜지션 설정
    // sliderInner.style.transition = "all 0.6s";
    // setInterval(() => {
    //         currentIndex = (currentIndex+1) % sliderCount;
    //         sliderInner.style.transform = "translateY(" + (-520 * 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
    //     }, 500);
    </script>

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

            gsap.to(sliderInner, {
                y: -520 * currentIndex,
                duration: 1,
                ease: "elastic.out"
            });
        }, 500);
    </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;

            // jquery는 translate을 지원하지 않음
            $(".slider__inner").css("position", "relative");
            $(".slider__inner").animate( {top: -520 * currentIndex}, 1000, "easeOutElastic");
        }, 1000);
    </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(() => {
         currentIndex = (currentIndex+1) % sliderCount;
         sliderInner.style.transform = "translateY(" + (-520 * currentIndex) + "px)";
 }, 500);
</script>

이번꺼는 위로 이동을 해야합니다.

그래서 div태그인 .slider__inner가 갖고있는 display: flex를 주석처리해서 사용을 못하게 합니다.

그리고 슬라이드 2번에서의 translatY로 수정만 하면 끝납니다.~

 

4.GSAP 활용하기

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

        gsap.to(sliderInner, {
            y: -520 * currentIndex,
            duration: 1,
            ease: "elastic.out"
        });
    }, 500);
</script> -->

(이것도 간단합니다. 슬라이드 2번에서 썻던 코드 x를 y로 바꿔주면 끝입니다.)

  • div태그인 .slider__inner가 갖고있는 display: flex를 주석처리해서 사용을 못하게 합니다.
  • 3번의 코드를 그대로 사용하고. 전체 크기를 담고 있는 div태그인 sliderInner를 가져옵니다.
  • 그리고 translateY로 -520 * currentIndex(1,2,3,4,5)를 곱해주면 됩니다.
  • gsap에서 translatY는 y입니다.

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;

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

음..이것도 슬라이드 2번에서 사용했던 코드를 그냥 top으로 바꿔주면 되네요

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

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

관련글

댓글

티스토리툴바