SLIDER EFFECT02 - JAVASCRIPT

이미지 슬라이드 배우기 튜토리얼입니다.
이미지 슬라이드 플러그인을 사용하지 않고 직접 만들어 보는 예제입니다.
자바스크립트와 제이쿼리를 동시에 배우고 익히는 강의입니다.
모든 강의는 소스를 보면서 따라하는 튜토리얼입니다.
꼭 따라하시길 추천합니다.

Code Youtube

Code Sample

전체 소스는 여기서 다운 받을 수 있습니다.

바로가기

샘플 소스는 여기서 확인 할 수 있습니다.

바로가기

Sourece Reference

Value	link
이미지1	https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg1.jpg
이미지2	https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg2.jpg
이미지3	https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg3.jpg
이미지4	https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg4.jpg
이미지5	https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg5.jpg
이미지6	https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg6.jpg
이미지7	https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg7.jpg
이미지8	https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg8.jpg
이미지9	https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg9.jpg
jquery	https://webstoryboy.github.io/wtss/refer-effect/assets/js/jquery.min.js

Code example

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slider Effect</title>

    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap" rel="stylesheet">
</head>
<body>
    <!-- main -->
    <main>
        <div class="slider-wrap">
            <div class="slider-img">
                <div class="slider-inner">
                    <div class="slider"><img src="../assets/img/bg19.jpg" alt="이미지1"></div>
                    <div class="slider"><img src="../assets/img/bg18.jpg" alt="이미지2"></div>
                    <div class="slider"><img src="../assets/img/bg17.jpg" alt="이미지3"></div>
                    <div class="slider"><img src="../assets/img/bg16.jpg" alt="이미지4"></div>
                    <div class="slider"><img src="../assets/img/bg15.jpg" alt="이미지5"></div>
                </div>
            </div>
        </div>
    </main>
    <!-- //main -->

    <!-- info -->
    <div class="info">
        <h1><a href="index.html">Slider Effect02 - Javascript</a></h1>
        <p>이미지 슬라이드 - 좌로 움직이기</p>
    </div>

    <div class="info right">
        <ul>
            <li><a href="javascriptSE01.html">1</a></li>
            <li class="active"><a href="javascriptSE02.html">2</a></li>
            <li><a href="javascriptSE03.html">3</a></li>
            <li><a href="javascriptSE04.html">4</a></li>
            <li><a href="javascriptSE05.html">5</a></li>
        </ul>
        <ul>
            <li><a href="jquerySE01.html">1</a></li>
            <li><a href="jquerySE02.html">2</a></li>
            <li><a href="jquerySE03.html">3</a></li>
            <li><a href="jquerySE04.html">4</a></li>
            <li><a href="jquerySE05.html">5</a></li>
        </ul>
    </div>
    <!-- //info -->
</body>
</html>

<style>
    @font-face {
        font-family: 'NEXONLv1Gothic';
        font-weight: 300;
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Light.woff') format('woff');
        font-style: normal;
    }
    @font-face {
        font-family: 'NEXONLv1Gothic';
        font-weight: 400;
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
        font-style: normal;
    }
    * {
        margin: 0; padding: 0;
    }
    body {
        background: #222;
        color: #fff;
        font-family: 'NEXONLv1Gothic';
        font-weight: 400;
        position: relative;
        height: 100vh;
        background-image: url(../assets/img/bg13.jpg);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
    body::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(8, 31, 36, 0.9);
        z-index: -1;
    }

    /* info */
    .info {
        color: #fff;
        font-family: "NEXONLv1Gothic";
        padding: 20px;
        position: absolute;
        left: 0;
        top: 0;
    }
    .info.right {
        left: auto;
        right: 0px;
        top: 0px;
    }
    .info h1 {
        font-weight: 300;
        font-size: 20px;
        line-height: 1.6;
        border-bottom: 1px dashed #fff;
        display: inline-block;
        margin-bottom: 10px;
    }
    .info h1 a {
        color: #fff;
        text-decoration: none;
        font-weight: 400;
    }
    .info p {
        font-weight: 300;
        font-size: 16px;
    }
    .info li {
        list-style: none;
        display: inline;
    }
    .info li a {
        display: inline-block;
        text-decoration: none;
        color: #fff;
        border: 1px dashed #fff;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        line-height: 21px;
        text-align: center;
        font-size: 12px;
        margin-bottom: 5px;
    }
    .info li.active a {
        background: #fff;
        color: #000;
    }
    .info.left {
        top: auto;
        right: 0px;
        bottom: 0px;
    }
    .info.left li {
        display: block;
        font-size: 14px;
        line-height: 1.6;
        font-weight: 300;
    }

    /* slider */
    .slider-wrap {
        height: 100vh;
    }
    .slider-img img {
        width: 100%;
    }
    .slider-img {
        position: absolute;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        width: 800px;
        height: 480px;
        overflow: hidden;
    }
    .slider-inner {
        position: relative;
        width: 4000px;
        height: 480px;
        overflow: hidden;
        transition: all 0.6s;
        left: 0;
    }
    .slider-inner .slider {
        float: left;
        width: 800px;
        height: 480px;
        position: relative;
    }
    .slider-inner .slider::before {
        position: absolute;
        left: 5px; top: 5px;
        background: rgba(0,0,0,.4);
        color: #fff;
        padding: 5px 10px 3px;
        font-family: "NEXONLv1Gothic";
    }
    .slider-inner .slider:nth-child(1)::before {content: "이미지1";}
    .slider-inner .slider:nth-child(2)::before {content: "이미지2";}
    .slider-inner .slider:nth-child(3)::before {content: "이미지3";}
    .slider-inner .slider:nth-child(4)::before {content: "이미지4";}
    .slider-inner .slider:nth-child(5)::before {content: "이미지5";}
    .slider-inner .slider:nth-child(1){z-index: 5;}
    .slider-inner .slider:nth-child(2){z-index: 4;}
    .slider-inner .slider:nth-child(3){z-index: 3;}
    .slider-inner .slider:nth-child(4){z-index: 2;}
    .slider-inner .slider:nth-child(5){z-index: 1;}
</style>

<!-- script -->
<script>
    const sliderWrap = document.querySelector(".slider-wrap");
    const sliderImg = sliderWrap.querySelector(".slider-img");
    const sliderInner = sliderImg.querySelector(".slider-inner");
    const slider = sliderInner.querySelectorAll(".slider");

    let currentIndex = 0;
    let sliderCount = slider.length;  
    let sliderInterval = 2000;
    // sliderInner.style.transition = "all 0.6s";
    // sliderInner.style.left = 0;

    setInterval(() => {
        currentIndex < sliderCount-1 ? currentIndex++ : currentIndex = 0;

        let sliderPosition = currentIndex * -800 + "px";
        sliderInner.style.left = sliderPosition;
        //sliderInner.style.transition = "all 0.6s";

        console.log(currentIndex)
    }, sliderInterval);
</script>

Site Reference

INSTAGRAM 바로가기

STUDY 바로가기

YOUTUBE 바로가기

INFLUENCER 바로가기

728x90

저작자표시

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

webs portfoliodeveloper

Port developer

challenge

1.

2.

3.

completed 전체 보기

스터디 과정 26기 수료 | 김현* 프론트 취업 완료

스터디 과정 26기 수료 | 양다* 프론트 취업 완료

스터디 과정 26기 수료 | 김아* 프론트 취업 완료

스터디 과정 26기 수료 | 김가* 프론트 취업 완료

스터디 과정 25기 수료 | 이태* 프론트 취업 완료

스터디 과정 26기 수료 | 양다* 프론트 취업 완료

스터디 과정 26기 수료 | 김아* 프론트 취업 완료

스터디 과정 26기 수료 | 김가* 프론트 취업 완료

국비지원 과정 30기 수료 | 김성* 프론트 취업 완료

국비지원 과정 30기 수료 | 양다* 프론트 취업 완료

국비지원 과정 30기 수료 | 이영* 프론트 취업 완료

국비지원 과정 30기 수료 | 이중* 프론트 취업 완료

국비지원 과정 30기 수료 | 박선* 프론트 취업 완료

국비지원 과정 30기 수료 | 최진* 프론트 취업 완료

국비지원 과정 30기 수료 | 김석* 프론트 취업 완료

국비지원 과정 30기 수료 | 김대* 프론트 취업 완료

국비지원 과정 30기 수료 | 권규* 프론트 취업 완료

국비지원 과정 30기 수료 | 권혜* 프론트 취업 완료

국비지원 과정 30기 수료 | 김민* 프론트 취업 완료

국비지원 과정 30기 수료 | 김대* 프론트 취업 완료

portfolio 전체 보기

재밌는 포트폴리오

포트포리오

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 포트폴리오

가로 세로 포트폴리오

귀여운 포트폴리오

쿨한 포트폴리오

페이지 포트폴리오

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 개발자

웹 퍼블리셔

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 개발자

디자인 및 퍼블리셔

프론트앤드 개발자

interview 전체보기

review

스터디 후기 이다*

스터디 후기 이다*

SLIDER EFFECT02 - JAVASCRIPT

Code Youtube

Code Sample

Sourece Reference

Code example

Site Reference

기타(삭제예정)/03 SLIDER EFFECT Related Articles

더보기

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역