인프런 커뮤니티 질문&답변
작성한 질문수
swiper-slide 적용관련 친절한 설명 감사드립니다. 근대 첫장만 되고 다음장부터
24.06.26 14:48 작성
·
82
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
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);
}
}
});
});