인프런 커뮤니티 질문&답변
작성한 질문수
swiper-slide 적용관련 친절한 설명 감사드립니다. 근대 첫장만 되고 다음장부터
작성
·
186
0
ggang_effect.js
function ggangImgEffect() { var obj = (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
0
이미지 이펙트를 스와이프 슬라이드에서 실행하는 방법입니다 :)
스와이프 최신 버전을 추가하세요
<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);
}
}
});
});