JavaScript/실전

[JavaScript] 슬라이더 + 탭 형식 멀티 팝업

Lpla

·

2021. 5. 30. 21:24

반응형

 

업무 중에 팝업 관련 업무도 생각보다 많다.

일반적으로 팝업창 하나에 이미지 한 개가 들어가지만 사이트에 게시되는 팝업 개수가 늘어나면 지저분함은 물론, 일일이 닫는 것도 불편하기 때문에 이럴 경우엔 멀티 팝업을 사용한다.

기존에 만든 멀티 팝업이 몇 개 있지만 이번에 블로그 포스팅용으로 새롭게 만들어보겠다.

 

 

1. 미리보기

 

 

2. 슬라이더 라이브러리

내가 가장 애용하는 슬라이더 라이브러리는 Swiper다.

하지만 이번에는 Slider Pro를 준비해봤다.

내가 좋아하고 잘하는 라이브러리만 고집하기보다 다른 라이브러리도 경험해보면서 실력을 늘리기 위함이다.

따라서 반드시 Slider Pro일 필요는 없지만 여기선 Slider Pro를 사용하겠다.

Slider Pro는 제이쿼리 기반 라이브러리이기 때문에 제이쿼리와 함께 css와 js 파일을 불러오도록 한다.

 

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slider-pro/1.5.0/css/slider-pro.min.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slider-pro/1.5.0/js/jquery.sliderPro.min.js"></script>
</head>

 

그리고 Slider Pro 깃허브 페이지를 참고하여 html을 작성한다.

 

bqworks/slider-pro

A modular, responsive and touch-enabled jQuery slider plugin that enables you to create elegant and professionally looking sliders. - bqworks/slider-pro

github.com

 

 

3. HTML 마크업, Slider Pro 실행

<div class="slider-pro" id="slide">
  <div class="sp-slides">
    <div class="sp-slide">
      <img class="sp-image" src="./images/01.jpg" />
    </div>
    <div class="sp-slide">
      <img class="sp-image" src="./images/02.jpg" />
    </div>
    <div class="sp-slide">
      <img class="sp-image" src="./images/03.jpg" />
    </div>
    <div class="sp-slide">
      <img class="sp-image" src="./images/04.jpg" />
    </div>
    <div class="sp-slide">
      <img class="sp-image" src="./images/05.jpg" />
    </div>
  </div>
  <div class="sp-thumbnails">
    <div class="sp-thumbnail">
      1번 탭 </div>
    <div class="sp-thumbnail">
      2번 탭 </div>
    <div class="sp-thumbnail">
      3번 탭 </div>
    <div class="sp-thumbnail">
      4번 탭 </div>
    <div class="sp-thumbnail">
      5번 탭 </div>
  </div>
</div>

 

탭 기능은 썸네일로 대신한다.

썸네일 관련 API는 여기서 확인할 수 있다.

 

bqworks/slider-pro

A modular, responsive and touch-enabled jQuery slider plugin that enables you to create elegant and professionally looking sliders. - bqworks/slider-pro

github.com

 

 

그리고 자바스크립트로 Slider Pro를 실행한다.

관련 API는 마찬가지로 깃허브 페이지에서 확인할 수 있다.

 

$(function () {
  $('#slide').sliderPro({
    width: 1000,
    height: 600,
    arrows: true,
    buttons: false,
    slideDistance: 0,
    waitForLayers: true,
    thumbnailWidth: 200,
    thumbnailHeight: 55,
    thumbnailPointer: true,
    autoplay: true,
    autoScaleLayers: false,
    breakpoints: {
      1000: {
        width: 400,
        height: 565,
        arrows: false,
        thumbnailWidth: 8,
        thumbnailHeight: 8
      }
    }
  });
});

 

이제 CSS를 추가한다.

 

#slide { border-radius: 20px; } 
#slide .sp-mask { border-radius: 20px 20px 0 0; }

.sp-thumbnails-container { border-radius: 0 0 20px 20px; } 
.sp-thumbnail { display: inline-block; height: 55px; line-height: 55px; text-align: center; font-size: 20px; font-weight: bold; } 
.sp-thumbnails > div:last-child .sp-thumbnail { border-right: none; } 
.sp-bottom-thumbnails .sp-thumbnail-container,
.sp-top-thumbnails .sp-thumbnail-container { margin: 0; } 
.sp-bottom-thumbnails .sp-thumbnail-container { background: #fff; } 
.sp-selected-thumbnail .sp-thumbnail { background: #FFD800; } 
.sp-thumbnails .sp-thumbnail { width: 100%; } 
.sp-bottom-thumbnails .sp-selected-thumbnail:before,
.sp-bottom-thumbnails .sp-selected-thumbnail:after { display: none; } 
.sp-bottom-thumbnails.sp-has-pointer { margin-top: 0; } 
.sp-bottom-thumbnails.sp-has-pointer .sp-thumbnail { position: static; top: auto; } 

@media (max-width: 1000px) {
 .sp-bottom-thumbnails.sp-has-pointer { position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); } 
 .sp-bottom-thumbnails.sp-has-pointer .sp-thumbnail-container { margin: 0 5px; border-radius: 50%; background-color: #d4d4d4; } 
 #slide .sp-mask { border-radius: 20px; } 
 }

 

 

그렇게 슬라이더가 완성됐다.

 

 

4. 모달 팝업

이제 슬라이더를 모달창으로 감싸기만 하면 팝업이 완성된다.

닫기 버튼도 추가하여 클릭하면 모달창을 사라지도록 한다.

 

  <div id="main_modal">
    <div class="list-pops">
      <div class="close_btn" onclick="closePopUp();">
        <span>닫기</span>
      </div>
      <div class="slider-pro" id="slide">
        <div class="sp-slides">
          <div class="sp-slide">
            <img class="sp-image" src="./images/01.jpg" />
          </div>
          <div class="sp-slide">
            <img class="sp-image" src="./images/02.jpg" />
          </div>
          <div class="sp-slide">
            <img class="sp-image" src="./images/03.jpg" />
          </div>
          <div class="sp-slide">
            <img class="sp-image" src="./images/04.jpg" />
          </div>
          <div class="sp-slide">
            <img class="sp-image" src="./images/05.jpg" />
          </div>
        </div>
        <div class="sp-thumbnails">
          <div class="sp-thumbnail">
            1번 탭 </div>
          <div class="sp-thumbnail">
            2번 탭 </div>
          <div class="sp-thumbnail">
            3번 탭 </div>
          <div class="sp-thumbnail">
            4번 탭 </div>
          <div class="sp-thumbnail">
            5번 탭 </div>
        </div>
      </div>
      <script type="text/javascript">
        $(function () {
          $('#slide').sliderPro({
            width: 1000,
            height: 600,
            arrows: true,
            buttons: false,
            slideDistance: 0,
            waitForLayers: true,
            thumbnailWidth: 200,
            thumbnailHeight: 55,
            thumbnailPointer: true,
            autoplay: true,
            autoScaleLayers: false,
            breakpoints: {
              1000: {
                width: 400,
                height: 565,
                arrows: false,
                thumbnailWidth: 8,
                thumbnailHeight: 8
              }
            }
          });
        });
        
        $(function () {
          $('#main_modal').show();
        });
        function closePopUp() {
          $('#main_modal').hide();
        };
      </script>
    </div>
  </div>

 

모달창 관련 CSS도 추가한다.

#main_modal { position: fixed; width: 100%; height: 100%; z-index: 9999; top: 0; left: 0; background-color: rgba(239, 239, 239, 0.8); } 
#main_modal .list-pops { width: 1000px; position: fixed; border-radius: 20px; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
#main_modal .close_btn { width: 100px; height: 60px; line-height: 60px; font-size: 20px; color: #333; cursor: pointer; background-color: #FFD800; text-align: center; position: absolute; top: -80px; right: 0; border-radius: 15px; font-weight: bold; transition: background-color .2s linear; } 
#main_modal .close_btn:hover { background-color: #FBCE0F; } 

#slide { border-radius: 20px; } 
#slide .sp-mask { border-radius: 20px 20px 0 0; }

.sp-thumbnails-container { border-radius: 0 0 20px 20px; } 
.sp-thumbnail { display: inline-block; height: 55px; line-height: 55px; text-align: center; font-size: 20px; font-weight: bold; } 
.sp-thumbnails > div:last-child .sp-thumbnail { border-right: none; } 
.sp-bottom-thumbnails .sp-thumbnail-container,
.sp-top-thumbnails .sp-thumbnail-container { margin: 0; } 
.sp-bottom-thumbnails .sp-thumbnail-container { background: #fff; } 
.sp-selected-thumbnail .sp-thumbnail { background: #FFD800; } 
.sp-thumbnails .sp-thumbnail { width: 100%; } 
.sp-bottom-thumbnails .sp-selected-thumbnail:before,
.sp-bottom-thumbnails .sp-selected-thumbnail:after { display: none; } 
.sp-bottom-thumbnails.sp-has-pointer { margin-top: 0; } 
.sp-bottom-thumbnails.sp-has-pointer .sp-thumbnail { position: static; top: auto; } 

@media (max-width: 1000px) {
 #main_modal .list-pops { width: 400px; } 
 .sp-bottom-thumbnails.sp-has-pointer { position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); } 
 .sp-bottom-thumbnails.sp-has-pointer .sp-thumbnail-container { margin: 0 5px; border-radius: 50%; background-color: #d4d4d4; } 
 #slide .sp-mask { border-radius: 20px; } 
 }

 

 

여기서 더 심화 과정으로 넘어가면 쿠키를 이용한 만료기간 설정, 하루 동안 더 이상 안보기, 탭 개수에 따라서 자동으로 width 값 수정 등이 있는데 다음에 작성해보겠다.

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

JavaScript/실전 카테고리와 연관된 콘텐츠