SLIDER EFFECT03

제이쿼리를 이용한 이미지 슬라이드 효과입니다. 플러그인을 사용하지 않고 이미지 슬라이드를 만들어 보겠습니다.

Code Youtube

Code Sample

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

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

Code Reference

Value	Description	View
`.eq()`	.eq() 메서드는 선택한 요소의 인덱스 번호에 해당하는 요소를 찾습니다.	View
`.fadeIn()`	.fadeIn() 메서드는 선택한 요소를 선택한 요소를 천천히 보여줍니다.	View
`.fadeOut()`	.fadeOut() 메서드는 선택한 요소를 천천히 숨김니다.	View

Value	Description	View
`setInterval()`	일정 시간마다 함수를 반복해서 실행합니다.	View

Code example

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery Slider Effect03</title>
    </head>
    <body>
            
        <!-- main -->
        <main>
            <div class="slider-wrap">
                <div class="slider-img">
                    <div class="slider"><img src="../assets/img/su01.jpg" alt="이미지1"><span>이미지1</span></div>
                    <div class="slider"><img src="../assets/img/su02.jpg" alt="이미지2"><span>이미지2</span></div>
                    <div class="slider"><img src="../assets/img/su03.jpg" alt="이미지3"><span>이미지3</span></div>
                    <div class="slider"><img src="../assets/img/su04.jpg" alt="이미지4"><span>이미지4</span></div>
                    <div class="slider"><img src="../assets/img/su05.jpg" alt="이미지5"><span>이미지5</span></div>
                </div>
            </div>
        </main>
        <!-- //main -->
        
        <!-- info -->
        <div class="info left">
            <h1><a href="slider00.html">jQuery Slider Effect03</a></h1>
            <p>이미지 슬라이드 효과 : 좌로 넘기기(연속적으로)</p>
        </div>
        <!-- //info -->

    </body>
</html>

/* reset */
@font-face { 
    font-family: 'MapoFlowerIsland'; 
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MapoFlowerIslandA.woff') format('woff'); 
    font-weight: normal; 
    font-style: normal; 
}

*, *::before, *::after {
    box-sizing: border-box; 
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #fff;
    transition: all 0.2s;
}

a:hover {
    border-bottom: 1px dashed #fff;
}

img {
    width: 100%;
    vertical-align: top;
}

ul {
    padding: 10px 20px;
}

li {
    list-style: none;
}

body {
    background: url(../assets/img/su10.jpg) no-repeat center center;
    background-size: cover;
    color: #fff;
    height: 100vh;
    transition: all 0.2s;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.5;
    font-family: 'MapoFlowerIsland';
}

body::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(50, 37, 11, 0.9);
    z-index: -1;
}

/* info */
.info {
    position: absolute;
    z-index: 1000;
}

.info h1 {
    font-size: 20px;
    border-bottom: 1px dashed #fff;
    margin-bottom: 8px;
}

.info p, .info li {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 3px;
}

.info li.active a:first-child {
    background: #fff;
    color: #000;
}

.info.left {
    left: 20px;
    top: 20px;
}

.info.right {
    right: 10px;
    top: 10px;
}

.info.right a {
    display: inline-block;
    margin-left: 5px;
    width: 20px; height: 20px;
    border: 1px dashed #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    transition: all 0.2s;
}

.info.right a:hover {
    background: #fff;
    color: #000;
}

.info.bottom {
    left: 10px;
    bottom: 10px;
}

.info.view {
    right: 20px;
    bottom: 20px;
}

.info.view a {
    color: #fff;
    border: 1px solid #fff;
    border-radius: 30px;
    padding: 5px 30px;
}

@media (max-width: 800px){
    .info.bottom {display: none;}
    .info.right {display: none;}
}

/* slide */
.slider-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100vh;
    width: 1000px;
    height: 600px;
    overflow: hidden;
    box-shadow: 4px 4px 20px rgba(0, 0, 0, .5);
}

.slider-img {
    position: relative;
    width: 5000px;
    height: 600px;
    overflow: hidden;
}

.slider-img .slider {
    float: left;
    width: 1000px;
    height: 600px;
    position: relative;
}

.slider-img .slider span {
    position: absolute;
    left: 5px;
    top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    const sliderWrap = $(".slider-wrap");
    const sliderImg = $(".slider-img");
    const slider = $(".slider");

    let currentIndex = 0;

    setInterval(function () {
        sliderImg.animate({ left: "-1000px" }, 400, function () {
            $(".slider:first-child").appendTo(sliderImg);
            sliderImg.css("left", "");
        });
    }, 3000);
</script>

INSTAGRAM 바로가기

TWITTER 바로가기

STUDY 바로가기

YOUTUBE 바로가기

여러분의 댓글은 영상을 제작하는데 많은 힘이 됩니다.
모르시거나 궁금한 사항은 언제든지 댓글로 남겨주세요.
최대한 힘이 되어 드리겠습니다.
오늘도 수고하셨습니다.

728x90

저작자표시

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 EFFECT03 - JQUERY

Code Youtube

Code Sample

Code Reference

Code example

Share

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

더보기

티스토리툴바