43일차 - 스와이퍼 반응형

밀레·2022년 11월 24일

목록 보기

109/135

ex) 스와이퍼 파괴! & 반응형 처리

"매체성을 고려해서 인터페이스를 모바일에서는 라디오버튼으로 나오도록!"
반응형(PC/모바일)에 따라 하나의 컨텐츠에 2개의 스와이퍼를 돌리기
같은 컨텐츠가! PC에서는 폼태그인데 <-> 모바일에서는 라디오버튼/셀렉트박스
ex) PC ○○○○ <-> 모바일 1 2 3 4
ex) PC ' X ' <-> 모바일 '닫기'

1. 스와이퍼 플러그인

1-1. HTML cdn

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

1-2. HTML 스와이퍼 레이아웃

<div class="swiper" id="banner">

  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  
</div>

+) 부트스트랩 v4.6 플러그인 (스와이퍼보다 위쪽에 cdn 달기)

1-3. JS - Initialize Swiper

<script>
    const swiper = new Swiper('.swiper', {
      // Optional parameters
      direction: 'vertical',
      loop: true,

      // If we need pagination
      pagination: {
        el: '.swiper-pagination',
      },

      // Navigation arrows
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

      // And if we need scrollbar
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    });
</script>

+) js 파일 따로 빼서 외부연동

결과물

2. 스와이퍼 커스터마이징

이렇게 만들어봅시다!
가운데 오는 슬라이드는 확대되고, 전후 슬라이드는 어두워짐

+) 슬라이더 커스터마이징! 아래 목록에서 무엇이 가능한지 한번 둘러보길.

2-1. slidesPerView : 3 (이미지 3개씩 보이기)

slidesPerView: 3, <!-- 자바스크립트에 너비값 내장. '.스와이퍼'를 건들면 width값 변경 불가! -->
				  <!-- (그 아래 자식 div 생성해서 걔를 건들어야 함) -->
spaceBetween: 0,

2-2. centeredSlides: true

2-2-1) centeredSlides 기능

가운데에 오는 슬라이드들에 '.swiper-slide-active' 클래스가 순간적으로 생긴다.
가운데 외 슬라이드들에는 가상선택자 같은 '.swiper-slide-duplicate-active' 생긴다.

2-2-2) CSS 적용 1

'.swiper-slide-active' & '.swiper-slide-duplicate-active' 옷 입히기

<style>
    .swiper-slide{height: 500px;}

    #banner{ background-color: black; }
    #banner .swiper-slide{ /* 스와이퍼-슬라이드 모두 배경색 어둡게 */
        transition: 0.5s;
        opacity: 0.5;
    }

    #banner .swiper-slide-active, /* 가운데 슬라이드만 밝게 */
    #banner .swiper-slide-duplicate-active{
        color: white;
        font-size: 40px;
        opacity: 1;
    }
</style>

가운데 슬라이드에 너비만 넓게 주면 되는데, 안됨! 왜?

2-2-3) CSS 적용 2

Q) '.swiper-slide-active' & '.swiper-slide-duplicate-active' 너비지정 안되는 이유?
A) slidesPerView : 3 // 자바스크립트 때문!
└ 자바스크립트에 너비값 내장됨. '.swiper-slide' 직통으로 건들면 width값 변경 X !
└ 그 아래 자식 div 생성해서, 걔를 주물러야 함

여기까지 결과물

2-3. '진짜 컨텐츠가 들어가는' 스와이퍼 자식 개체

2-3-1) 스와이퍼 안에 자식 div 생성

2-3-2) 자식 개체 div에 CSS 적용

.swiper-slide-active div,
.swiper-slide-duplicate-active div { 너비지정 }

<style>

    .swiper-slide{ height : 500px }

    #banner{ background-color: black;}
    #banner .swiper-slide{
        transition: 0.5s;
        opacity: 0.5;
        position: relative;
    }
    #banner .swiper-slide-active,
    #banner .swiper-slide-duplicate-active{
        opacity: 1;
        z-index: 1000;
        overflow: visible;  
    }

    #banner .swiper-slide-active div,
    #banner .swiper-slide-duplicate-active div{
             width:80vw;
             position: absolute;
             top:0; height: 100%;
             left:50%;
             transform: translateX(-50%);
             background-color: white;
    }
  
</style>

비슷해졌다

3. 스와이퍼 반응형 처리

이렇게 만들어보자

3-1. 성능화

3-2. 제이쿼리 v2 cdn 삽입

$( document ).ready( function( ){ } ) 이제 제이쿼리 식으로 바꾸기

3-3. 모바일-PC 따로 세팅

var _width = $( window ).width( ); 화면 너비 받아내기

PC용 스와이퍼
모바일용 스와이퍼...는 pagination 타입 : ○ ○ ○ ○ -> 1 2 3 4

3-4. if-else문

PC용 스와이퍼

모바일용 스와이퍼

4. 스와이퍼 파괴 & 반응형 처리

화면이 줄어들었을 때, 스와이퍼 파괴하고 반응형 처리하기!

반응형(PC/모바일)에 따라 하나의 컨텐츠에 2개의 스와이퍼를 돌리려면....
① PC용 스와이퍼 파괴! (=초기화)
② 모바일용 스와이퍼가 초기화 상태에서 시작

+) 단, 여기에는 (페이지가 열리자마자 실행되는) ready 이벤트만 있지, resize 이벤트 없다!

근데 안된다. 내일 수업받고 다시

<script>
  $(document).ready(function(){

    var _width = $(window).width();

    const loop_auto_center_3_pc ={      
      loop: true,    
      autoplay: {
        delay: 4000,
        disableOnInteraction : false,
      },
      slidesPerView: 3,
      spaceBetween: 0,
      centeredSlides: true,
      pagination: {
        el: '.swiper-pagination',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    }

    const loop_auto_center_3_m ={      
      loop: true,    
      autoplay: {
        delay: 4000,
        disableOnInteraction : false,
      },
      slidesPerView: 1.5,
      spaceBetween: 20,
      centeredSlides: true,
      pagination: {
        el: '.swiper-pagination',
        type: "fraction",
      },
    }
    
    var swiper_mbanner = undefined;

    if( _width < 768 ){ // 모바일용
        if( swiper_mbanner != undefined ){
            swiper_mbanner.destroy();
        }
        swiper_mbanner = new Swiper('#banner.swiper', loop_auto_center_3_M );
    }else{ // PC용
        if(swiper_mbanner != undefined){
            swiper_mbanner.destroy();            
        }
        swiper_mbanner = new Swiper('#banner.swiper', loop_auto_center_3_PC );
    } 
</script>

5. (PC용 CSS) containerModifierClass : 'pc_slide-'

5-1. 스와이퍼 자바스크립트에 containerModifierClass

자바스크립트에 containerModifierClass : 'pc_slide-' 변수 사용해서
해당 클래스에만 CSS 옷 추가

<script>
  $(document).ready(function(){

    var _width = $(window).width();
    
	///// PC용
    const loop_auto_center_3_pc ={      
      loop: true,    
      containerModifierClass : 'pc_slide-', // ←←← 여기★★★★★
      autoplay: {
        delay: 4000,
        disableOnInteraction : false,
      },
      slidesPerView: 3,
      spaceBetween: 0,
      centeredSlides: true,
      pagination: {
        el: '.swiper-pagination',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    }
	///// 모바일용
    const loop_auto_center_3_m ={      
      loop: true,       
      autoplay: {
        delay: 3000,
        disableOnInteraction : false,
      },
      slidesPerView: 1.5,
      spaceBetween: 20,  
      pagination: {
        el: '.swiper-pagination',
        type: "fraction",
      },
      scrollbar: {
        el: '.swiper-scrollbar',
      },   
    }

	///// if-else문
    var swiper_mbanner = undefined; 

    if( _width < 768 ){     
        if(swiper_mbanner != undefined){ 
          swiper_mbanner.destroy(); 
      }
      swiper_mbanner = new Swiper('#banner.swiper', loop_auto_center_3_m );    
      }else{   
          if(swiper_mbanner != undefined){ 
            swiper_mbanner.destroy(); 
      }
      swiper_mbanner = new Swiper('#banner.swiper', loop_auto_center_3_pc ); 
      }
  })
</script>

5-2. 해당 클래스에만 CSS 옷 추가 (PC용)

ex) #banner.pc_slide-initialized .swiper-slide

모바일은 옷 필요없음. 작은 화면에서 딱똑콱! 되니까 (화면 넓은 PC만 예쁘게 CSS 지정)

<style>
    #banner{ background-color: black;}
    #banner.pc_slide-initialized .swiper-slide{
        transition: 0.5s;
        opacity: 0.5;
        position: relative;
    }
    #banner.pc_slide-initialized .swiper-slide-active,
    #banner.pc_slide-initialized .swiper-slide-duplicate-active{
        opacity: 1;
        z-index: 1000;
        overflow: visible;

    }

    #banner.pc_slide-initialized .swiper-slide-active div,
    #banner.pc_slide-initialized .swiper-slide-duplicate-active div{
            width:80vw;
            position: absolute;
            top:0; height: 100%;
            left:50%;
            transform: translateX(-50%);
            background-color: white;
    }
</style>

HTML : 부트스트랩으로 반응형처리 추가

<div class="swiper" id="banner" style="height:500px">       
	<div class="swiper-wrapper">
          
		<div class="swiper-slide p-5 bg-light d-flex flex-column justify-content-center text-center">
            <div>나는 스와이퍼 자식객체_진짜 컨텐츠</div>
		</div>
		<div class="swiper-slide p-5 bg-warning">
            <div>나는 스와이퍼 자식객체_진짜 컨텐츠</div>
		</div>
		<div class="swiper-slide p-5 bg-light">
            <div>나는 스와이퍼 자식객체_진짜 컨텐츠</div>
		</div>
		<div class="swiper-slide p-5 bg-warning">
            <div>나는 스와이퍼 자식객체_진짜 컨텐츠</div>
		</div>
		<div class="swiper-slide p-5 bg-light">
            <div>나는 스와이퍼 자식객체_진짜 컨텐츠</div>
		</div>
		<div class="swiper-slide p-5 bg-warning">
            <div>나는 스와이퍼 자식객체_진짜 컨텐츠</div>
		</div>
          
	</div>        
	<div class="swiper-pagination"></div>      
        
	<div class="swiper-button-prev d-none d-md-block"></div>
	<div class="swiper-button-next d-none d-md-block"></div>      
        
	<div class="swiper-scrollbar d-md-none"></div>
</div>

6. 콜백함수로 만들어서 리사이즈 이벤트에 삽입하기

4에는 (페이지가 열리자마자 실행되는) ready 이벤트만 있지, resize 이벤트 없다

밀레

이전 포스트

42일차 - 1124 평가 대비 포폴.json 제작 (프론트앤드 개발자의 업무프로세스)

다음 포스트