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

Question

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 += '

'; makeHtml += '

'; makeHtml += "

"; // 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); }, }, });

깡코딩 · Answer

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

깡코딩 · Answer

이미지 이펙트를 스와이프 슬라이드에서 실행하는 방법입니다 :) 스와이프 최신 버전을 추가하세요 html을 변경하세요

HELLO :D GGANG CODING

스와이프 슬라이드를 초기화 하고 콜백 함수에서 이미지 이펙트를 실행하세요 $(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); } } }); });