자바 스크립트 세로 슬라이드 - jaba seukeulibteu selo seullaideu

Question

- slick 슬라이더 사용법 및 옵션 정리 - slick slider는 반응형 웹을 지원하는 슬라이더 라이브러리다. 여러가지 슬라이더 라이브러리가 있지만 그 중에서 가장 좋은 라이브러리 같다. 1. slick 다운로�

programmer93.tistory.com

-슬릭슬라이더 홈페이지 : kenwheeler.github.io/slick/

slick - the last carousel you'll ever need

slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

자바스크립트로 자연스러운 슬라이드 만들기 준비물 1. 300*300px 이미지 6장 (아래 파일에 첨부함, 연습하실때 필요하신분들 쓰세요~) 2. visual studio or 다른 개발자 도구 결과물 HTML코드 .

eunhee-programming.tistory.com

3D슬라이드 만들기

2021.07.19 - [웹/HTML-CSS-자바스크립트] - (웹) 회전형 슬라이드/3D 슬라이드 만들기: swiper 사용법 (상세설명)

(웹) 회전형 슬라이드/3D 슬라이드 만들기: swiper 사용법 (상세설명)

회전형 슬라이드 만들기 포스팅 요약 1. 최종 완성 작품 2. swiper 사용해서 3D 슬라이드 만드는법 3. 3D슬라이드 만든 전체 코드 4. 3D슬라이드 코드 다운받을 수 있는 깃허브 주소 더보기 API를 사용

웹디자인기능사 시험 날짜는 다가오고~
슬라이드 이미지 움직이게하는게 저한테는 제일 어려운 숙제 ㅠㅠ

원리는 알겠는데 구문 외우는게 너무 헷갈려요 ㅠㅠ...

css('margin-left','-1200px') 이렇게 쓰는거랑 css({'margin-left' : '-1200px'}) 이런 차이 ...?
animate는 animate({marginTop : "-300px"}) 이렇게 쓰고...ㅠㅠ
왜 이렇게 구문을 다 다르게 만들어놔서 날 헷갈리게 하는 것입니까~~?

아무튼 공부할 겸~ 슬라이드 부분만 제작해봤습니닷..!!

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>slide images</title>
    <link type="text/css" rel="stylesheet" href="css/styles.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>


<body>
    <div id="index_01">
        <div id="header1">좌우 슬라이딩</div>
        <div id="slide1">
            <ul>
                <li><a href="#"><img src="img/01.jpg" alt="슬라이드1"></a></li>
                <li><a href="#"><img src="img/02.jpg" alt="슬라이드2"></a></li>
                <li><a href="#"><img src="img/03.jpg" alt="슬라이드3"></a></li>
            </ul>
        </div>
    </div>
    
    <div id="index_02">
        <div id="header2">상하 슬라이딩</div>
        <div id="slide2">
            <ul>
                <li><a href="#"><img src="img/04.jpg" alt="슬라이드4"></a></li>
                <li><a href="#"><img src="img/05.jpg" alt="슬라이드5"></a></li>
                <li><a href="#"><img src="img/06.jpg" alt="슬라이드6"></a></li>
            </ul>
        </div>
    </div>
    
    <div id="index_03">
        <div id="header3">페이드인 페이드아웃</div>
        <div id="slide3">
            <ul>
                <li><a href="#"><img src="img/07.jpg" alt="슬라이드7"></a></li>
                <li><a href="#"><img src="img/08.jpg" alt="슬라이드8"></a></li>
                <li><a href="#"><img src="img/09.jpg" alt="슬라이드9"></a></li>
            </ul>
        </div>
    </div>


    <script type="text/javascript" src="script/slide.js"></script>
</body>

</html>

@charset "UTF-8";

*{
    margin: 0;
    padding: 0;
    font-size: 1rem;
    text-decoration: none;
    list-style: none;
    color: #333333;
}

/*--------좌우슬라이딩---------*/
#index_01{
    width: 1200px;
    height: 400px;
    border: 1px solid dimgrey;
    margin: 0 auto;
}

#header1{
    height: 100px;
    border-bottom: 1px solid dimgrey;
    box-sizing: border-box;
    text-align: center;
    line-height: 100px;
    font-size: 1.5rem;
}

#slide1{
    height: 300px;
    overflow: hidden;
    border-bottom: 1px solid dimgrey;
}
#slide1>ul{
    width: 3600px;
    font-size: 0;
}
#slide1>ul>li{
    display: inline-block;
    font-size: 0;
}

/*--------상하슬라이딩---------*/
#index_02{
    width: 1200px;
    height: 400px;
    border: 1px solid dimgrey;
    margin: 50px auto;
}

#header2{
    height: 100px;
    border-bottom: 1px solid dimgrey;
    box-sizing: border-box;
    text-align: center;
    line-height: 100px;
    font-size: 1.5rem;
}

#slide2{
    height: 300px;
    border-bottom: 1px solid dimgrey;
    overflow: hidden;
}
#slide2>ul{
    height: 900px;
}
#slide2>ul>li{
    height: 300px;
}

/*--------페이드인아웃---------*/
#index_03{
    width: 1200px;
    height: 400px;
    border: 1px solid dimgrey;
    margin: 0 auto;
}

#header3{
    height: 100px;
    border-bottom: 1px solid dimgrey;
    box-sizing: border-box;
    text-align: center;
    line-height: 100px;
    font-size: 1.5rem;
}

#slide3{
    height: 300px;
    border-bottom: 1px solid dimgrey;
}

#slide3>ul>li{
    position: absolute;
    font-size: 0;
}

//좌우슬라이딩
setInterval(function(){
    $('#slide1>ul').delay(2500);
    $('#slide1>ul').animate({marginLeft: "-1200px"})
    $('#slide1>ul').delay(2500);
    $('#slide1>ul').animate({marginLeft: "-2400px"})
    $('#slide1>ul').delay(2500);
    $('#slide1>ul').animate({marginLeft: "0px"})
});


//상하슬라이딩
setInterval(function(){
    $('#slide2>ul').delay(2500);
    $('#slide2>ul').animate({marginTop: "-300px"})
    $('#slide2>ul').delay(2500);
    $('#slide2>ul').animate({marginTop: "-600px"})
    $('#slide2>ul').delay(2500);
    $('#slide2>ul').animate({marginTop: "0px"})
});


//페이드인 페이드아웃

$('#slide3>ul>li').hide();
$('#slide3>ul>li:first-child').show();

setInterval(function(){
    $('#slide3>ul>li:first-child').fadeOut()
    .next().fadeIn().end(1000)
    .appendTo('#slide3>ul');
},3000);

※ 21.4.12. 가로 슬라이드 무한 반복 코드 첨부합니다.
(저도 어디서 긁어온건데 정확한 출처 기억안나고.. 문과 문어대가리라 이해가 잘 안감요 ㅋㅋㅋ
시험 볼 때는 위 스크립트만으로도 충분하나.. 무한 슬라이드 구현이 꼭 하고싶다고하면 참고로 하세용~)

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

<head>
  <meta charset="UTF-8">
  <title>infinity horizon slider</title>
  <style type="text/css">
    *{margin: 0; padding: 0; list-style: none;}
    #slideWrap { width: 300px; height: 150px; border: 5px solid black; overflow: hidden; position: relative; }
    #slider { height: 100%; background-color: yellow; position: absolute;}
    #slider ul { display: inline; }
    #slider li { float: left; width: 300px; height: 100%;}

  </style>
</head>

<body>
  <div id="slideWrap">
    <ul id="slider">
        <li><a href="#"><img src="#" alt="슬라이드1"></a></li>
        <li><a href="#"><img src="#" alt="슬라이드2"></a></li>
        <li><a href="#"><img src="#" alt="슬라이드3"></a></li>
    </ul>
  </div>

  <script>
    //자동 스크롤 애니메이션
    var ul = document.querySelector('#slider')
    var slideNumber = document.querySelector('#slider').childElementCount
    var li = document.querySelector('#slider>li')

    var firstItemClone = ul.firstElementChild.cloneNode(true);
    ul.appendChild(firstItemClone);
    ul.style.width = (slideNumber + 1) * 300 + 'px'

    function move(){
      var i = 0;

      setInterval(function(){
        ul.style.transition = '0.2s';
        ul.style.transform = 'translate3d(-'+300*(i+1)+'px, 0px, 0px)';

        i++;

        if (i == slideNumber){
          setTimeout(function(){
            ul.style.transition = '0s';
            ul.style.transform = "translate3d(0px, 0px, 0px)";
          },201)
          i = 0;
        }
      },3000);
    }

    document.addEventListener("DOMContentLoaded",function(){
      move();
    });

  </script>
</body>

</html>

게시글 관리

구독하기가을밤에 내리는 비

저작자표시 비영리 변경금지

카카오스토리
트위터
페이스북

'꿀팁 공유 > └ 웹디자인기능사' 카테고리의 다른 글

2020 웹디자인기능사 2회 합격 후기 (독학) (12)2020.08.132020 웹디자인기능사 실기시험 후기 (4)2020.06.22JUST 쇼핑몰 두번째 연습 (0)2020.05.30탭메뉴 구현 (공지사항/갤러리) (0)2020.05.18메뉴 네비게이션 만들기 (가로) (0)2020.05.18

세로 슬라이드 제이쿼리 jQuery 상하 슬라이드 자바스크립트 자동 슬라이드 자바스크립트 슬라이드 자바스크립트 무한 슬라이드 Html 상하 슬라이드