[javascript] 팝업 안 swiper 설정

바둑판 계열의 리스트 형식에서 해당 리스트를 클릭했을 때,

모달 팝업 형태로 각자의 내용의 슬라이드가 생성 되어야 한다. 

 

따라서 각자의 팝업을 생성해두고 include를 할껀데 문제는 해당 리스트를 클릭시, 해당 슬라이드만 동작을 원하고,

해당 모달 팝업을 닫았을 땐 해당 슬라이드를 해제 시키려한다.

 

미리 슬라이더를 그려놓으면 과부하가 생기니 주의해야한다.

그린 슬라이더를 저장할 변수 popupSlide를 전역 변수로 빼놓고 팝업 오픈 요소 클릭시 생성, 

닫기 버튼 클릭시 해제를 할 수 있도록 하는 것이 중요하다.

 

index.html

<ul class="lineup-box">
<li data-popup="popup-lineup0" class="popup-link">
<div class="img-box">
<img src="" alt="begins" />
</div>
<div class="txt-box">
<p>title</p>
</div>
</li>
<li data-popup="popup-lineup1" class="popup-link">
<div class="img-box">
<img src="" alt="knight" />
</div>
<div class="txt-box">
<p>title</p>
</div>
</li>
<li class="popup-link">
<div class="img-box">
<img src="" alt="heroes" />
</div>
<div class="txt-box">
<p>title</p>
</div>
</li>
<li class="popup-link">
<div class="img-box">
<img src="" alt="V" />
</div>
<div class="txt-box">
<p>title</p>
</div>
</li>
<li class="popup-link">
<div class="img-box">
<img src="" alt="" />
</div>
<div class="txt-box">
<p>title</p>
</div>
</li>
<li class="popup-link">
<div class="img-box">
<img src="" alt="" />
</div>
<div class="txt-box">
<p>title</p>
</div>
</li>
</ul>
<!-- lineup popup -->
<!--#include file="/gravity/gstar2023/inc/popup-lineup.html"-->

popup-lineup.html

<!-- S: 라인업 공통 dim -->
<span class="blind"></span>
<button type="button" class="blind--btnClosed" title="닫기 버튼"></button>
<!-- E: 라인업 공통 dim -->

<!--
  슬라이드 5개 (동영상1, 이미지4),
  로고 logo,
  태깅 tags,
  설명 desc,
  버튼 homepage
-->

<div class="popup popup-lineup0">
  <div class="popup__scroll">
    <div class="popup__thumb">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="video"></div>
          </div>
          <div class="swiper-slide">
            <div class="img-box">
              <img src="assets/images/popup/sample.png" alt="" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img-box">
              <img src="assets/images/popup/sample.png" alt="" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img-box">
              <img src="assets/images/popup/sample.png" alt="" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img-box">
              <!-- <img src="assets/images/popup/sample.png" alt=""> -->
            </div>
          </div>
        </div>
        <div class="lineup-pagination swiper-pagination"></div>
      </div>
    </div>
    <div class="popup__con">
      <img src="assets/images/popup/sample_logo.png" class="popup__logo" alt="" />
      <ul class="list-tag">
        <li>PC</li>
        <li>Mobile</li>
        <li>console</li>
      </ul>
      <div class="description">샘플 설명입니다. 샘플 설명입니다. 샘플 설명입니다. 샘플 설명입니다.</div>
      <div class="homepage"><a href="javascript:;">정보 보기</a></div>
    </div>
  </div>
</div>

<div class="popup popup-lineup1">
  <div class="popup__scroll">
    <div class="popup__thumb">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="video"></div>
          </div>
          <div class="swiper-slide">
            <div class="img-box">
              <img src="assets/images/popup/sample2.png" alt="" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img-box">
              <img src="assets/images/popup/sample2.png" alt="" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img-box">
              <img src="assets/images/popup/sample2.png" alt="" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img-box">
              <!-- <img src="assets/images/popup/sample.png" alt=""> -->
            </div>
          </div>
        </div>
        <div class="lineup-pagination swiper-pagination"></div>
      </div>
    </div>
    <div class="popup__con">
      <img src="assets/images/popup/sample_logo.png" class="popup__logo" alt="" />
      <ul class="list-tag">
        <li>PC</li>
        <li>Mobile</li>
        <li>console</li>
      </ul>
      <div class="description">팝업222222222222222222222222222222222</div>
      <div class="homepage"><a href="javascript:;">정보 보기</a></div>
    </div>
  </div>
</div>

popup.js

// ## 팝업 안 슬라이드 설정
let popupSlide;

let sliderSetting = {
  loop: true,
  navigation: {
    nextEl: '.swiper-button--next',
    prevEl: '.swiper-button--prev',
  },
  effect: 'fade',
  fadeEffect: {
    crossFade: true,
  },
  observer: true,
  observeParents: true,
};

//## 팝업열기
$(document).on('click', '.popup-link', function () {
  // # 팝업 내용 오픈
  let targetPopupName = $(this).attr('data-popup');
  open_blind();
  $('.' + targetPopupName)
    .fadeIn()
    .css('display', 'flex');
  // # 해당 팝업 슬라이드 생성
  let sliderN = targetPopupName;
  $('.' + targetPopupName)
    .find('.swiper-container')
    .attr('id', sliderN);
  console.log(
    $('.' + targetPopupName)
      .find('.swiper-container')
      .attr('id')
  );
  let sliderId = '#' + sliderN;

  popupSlide = new Swiper(sliderId, sliderSetting);
  $('.blind--btnClosed').on('click', function () {
    closed_popup(popupSlide);
  });
  return false;
});

// ## 팝업 요청 시 블라인드 액션 함수.
function open_blind() {
  $('.blind, .blind--btnClosed').fadeIn(300);
}
// ## 팝업 닫기 요청 시 액션 함수.
function closed_popup(ele) {
  $('.blind, .blind--btnClosed').fadeOut(300);
  $('.popup').hide();
  // # 해당 팝업 슬라이드 해제
  ele.destroy(true, true);
  return false;
}