웹 퍼블리싱 정복반 - 3주차

본 과정은 내일배움캠프 웹개발 사전캠프로 지급받은 강의의 내용을 바탕으로 정리한 글입니다.

Swiper.js

가로 또는 세로 형태의 Slider을 만들때 쓰는 대표적인 플러그인

Swiper.js 링크 : https://swiperjs.com/demos

원하는 슬라이드의 Core를 클릭하면 코드를 볼 수 있음

autoplay : {
	delay : 1000 
}

☞ dealy의 1000은 현실 시간으로 1초

      var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        centeredSlides: true,
        loop: true, // infinity loop
        autoplay: {
          delay: 1000,
          disableOnInteraction: false
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      });

☞ 반복적으로 계속 전환을 원하면 loop: true로 하면 된다.

         <div class="swiper-container mySwiper">
            <div class="swiper-wrapper">
              <a class="swiper-slide">
	      </div>
	    </div>
	 </div>

☞ Swiper.js를 쓰기 위해서는 계층(swiper-container, swiper-wrapper, swiper-slide)을 순서대로 쌓아야한다.

        <div class="card_nav">
          <a href="#" role="button" class="btn_nav btn_prev"><span class="blind">이전</span></a>
          <a href="#" role="button" class="btn_nav btn_next"><span class="blind">다음</span></a>
        </div>

  navigation: {
    nextEl: "#timesquare .card_nav .btn_next", 
    prevEl: "#timesquare .card_nav .btn_prev",
    // 이 버튼이 prev과 next 버튼의 선택자를 지정해주는 부분 
  },

탭 구조

N개의 버튼과 1개 이상의 컨텐츠 영역을 가진 구조를 탭 구조라고 함

    <a class="tab-link on" data-type="tab-1">첫번째 탭</a> 
    <a class="tab-link" data-type="tab-2">두번째 탭</a>
    <a class="tab-link" data-type="tab-3">세법째 탭</a>

    <hr />

    <div id="tab-1" class="tab-content on">첫번째 탭 내용</div>
    <div id="tab-2" class="tab-content">두번째 탭 내용</div>
    <div id="tab-3" class="tab-content">세번째 탭 내용</div>

    <script>
      $('.tab-link').click(function () { // $표시라서 제이쿼리, tab-link를 클릭하면
        var tab_id = $(this).attr('data-type'); //data-type 값을 tab_id에 가져옴
        $('.tab-link').removeClass('on'); // tab-link에 있는 on을 삭제
        $('.tab-content').removeClass('on'); //tab-content에 있는 on을 삭제
        $(this).addClass('on'); // 현재 클릭한 tab-link에 on을 붙여주고
        $('#' + tab_id).addClass('on'); //  tab_id를 가진 블록에도 on을 붙여준다.
      });
    </script>

☞ 탭 제목의 data-type="tab-1"는 탭 내용의 div id="tab-1" 과 연결되어진다.
on이라는 클래스를 통해서 화면에 출력이 되었다가 on이 사라지면 출력이 안되는 형태다.

오늘의 한줄평 : 탭 구조와 Swiper.js에 같은 플러그인이 있다는걸 알게 되어서 유용했다. 따로 관련 문서도 있어서 유용하게 사용할 수 있을 것 같다.