인프런 커뮤니티 질문&답변

foxball님의 프로필 이미지

작성한 질문수

쉽고 빠르게 만드는 다양한 이미지 이펙트!

수업자료 다운로드(완성된코드)

swiper-slide 적용관련 친절한 설명 감사드립니다. 근대 첫장만 되고 다음장부터

24.06.26 14:48 작성

·

96

0

ggang_effect.js

function ggangImgEffect() { var obj = $(".ggang_effect"); var makeHtml = ""; var row = 4; var columns = 8; var rowHeight = 100 / row + "%"; var columnsWidth = 100 / columns + "%"; var imgWidth = 100 * columns + "%"; var imgHeight = 100 * row + "%"; for (var i = 0; i < row; i++) { // console.log('-행-:'+i); for (var j = 0; j < columns; j++) { var delaySpeed = (columns - j - i * 0.5) * 0.25; var left = -j * 100 + "%"; var top = -i * 100 + "%"; makeHtml += '<div class="img_box" style="width:' + columnsWidth + "; height:" + rowHeight + "; transition-delay:" + delaySpeed + 's; ">'; makeHtml += '<div class="img_position" style="width:' + imgWidth + "; height:" + imgHeight + "; left:" + left + "; top:" + top + ';"></div>'; makeHtml += "</div>"; // console.log('열:'+j); } } $(obj).append(makeHtml); setTimeout(function () { $(obj).find(".img_box").addClass("active"); }, 200); } $(function () { ggangImgEffect(); }); const mySwiper = new Swiper(".swiper-container", { effect: "fade", loop: true, speed: 1500, autoplay: { delay: 5000, disableOnInteraction: false, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, on: { slideChange: function () { var thisSlide = $(".swiper-container").find(".swiper-slide").eq(this.activeIndex); ggangImgEffect(thisSlide, this.activeIndex); }, }, });

답변 2

0

깡코딩님의 프로필 이미지
깡코딩
지식공유자

2024. 06. 26. 15:36

글에 작성하신 예제 코드는 삭제부탁드립니다~ :)

0

깡코딩님의 프로필 이미지
깡코딩
지식공유자

2024. 06. 26. 15:35

이미지 이펙트를 스와이프 슬라이드에서 실행하는 방법입니다 :)

 

스와이프 최신 버전을 추가하세요

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>

 

html을 변경하세요

<section class="sec01">

  <h2 class="tit">

    <span>HELLO :D</span>

    GGANG CODING

  </h2>

  <div class="swiper-container">

      <div class="swiper-wrapper">

          <div class="swiper-slide slide1"><div class="ggang_effect bg01"></div></div>

          <div class="swiper-slide slide2"><div class="ggang_effect bg02"></div></div>

          <div class="swiper-slide slide3"><div class="ggang_effect bg03"></div></div>

      </div>

      <div class="swiper-button-next"></div>

      <div class="swiper-button-prev"></div>

  </div>

</section>

 

스와이프 슬라이드를 초기화 하고 콜백 함수에서 이미지 이펙트를 실행하세요

 

$(function(){

  const swiper = new Swiper('.swiper-container', {

    effect: 'fade',

    speed: 0,

    navigation: {

        nextEl: '.swiper-button-next',

        prevEl: '.swiper-button-prev',

    },

    on: {

      init: function () {

        var thisSlide = $('.swiper-container').find('.swiper-slide').eq(0);

        ggangImgEffect(thisSlide, 'ran'); // 최초 처음실행

      },

      slideChange: function () {

        var thisSlide = $('.swiper-container').find('.swiper-slide').eq(this.activeIndex);

        ggangImgEffect(thisSlide, this.activeIndex);

      }

    }

  });

});

 

foxball님의 프로필 이미지

작성한 질문수

질문하기