JS
swiper js 카테고리별로 보여주기
ᚁ ᚂ ᚃ ᚄ ᚅ
2024. 4. 3. 19:13
반응형
swiper js 를 사용해서 slide 화면을 보여주는 경우가 많은데 세부 카테고리 버튼을 두고서 클릭시 해당 카테고리 slide 내용만 보여주는 방법
참고 : https://codepen.io/lpla/pen/QWQErNr
<div class="cate">
<h1 class="active">전체</h1>
<h1>음료</h1>
<h1>빵</h1>
<h1>과일</h1>
</div>
<div class="view_section">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" data-type="음료">
<div class="sample_img">
<img src="https://cdn.pixabay.com/photo/2014/09/12/18/20/can-443123_960_720.png">
</div>
<div class="sample_name">
<p>콜라</p>
</div>
</div>
<div class="swiper-slide" data-type="빵">
<div class="sample_img">
<img src="https://cdn.pixabay.com/photo/2012/04/14/15/37/cheeseburger-34315_960_720.png">
</div>
<div class="sample_name">
<p>햄버거</p>
</div>
</div>
<div class="swiper-slide" data-type="음료">
<div class="sample_img">
<img src="https://cdn.pixabay.com/photo/2014/04/03/11/51/milk-312369_960_720.png">
</div>
<div class="sample_name">
<p>우유</p>
</div>
</div>
<div class="swiper-slide" data-type="음료">
<div class="sample_img">
<img src="https://cdn.pixabay.com/photo/2012/04/14/15/14/coffee-34251_960_720.png">
</div>
<div class="sample_name">
<p>커피</p>
</div>
</div>
<div class="swiper-slide" data-type="빵">
<div class="sample_img">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/13/sandwich-148023_960_720.png">
</div>
<div class="sample_name">
<p>샌드위치</p>
</div>
</div>
<div class="swiper-slide" data-type="빵">
<div class="sample_img">
<img src="https://cdn.pixabay.com/photo/2018/03/01/03/51/chocolate-cake-3189673_960_720.png">
</div>
<div class="sample_name">
<p>케익</p>
</div>
</div>
<div class="swiper-slide" data-type="과일">
<div class="sample_img">
<img src="https://cdn.pixabay.com/photo/2013/07/13/11/34/apple-158419_960_720.png">
</div>
<div class="sample_name">
<p>사과</p>
</div>
</div>
<div class="swiper-slide" data-type="과일">
<div class="sample_img">
<img src="https://cdn.pixabay.com/photo/2016/04/01/11/31/banana-1300390_960_720.png">
</div>
<div class="sample_name">
<p>바나나</p>
</div>
</div>
</div>
</div>
</div>
.cate { margin: 30px 0 0 30px; }
.cate h1 { cursor: pointer; margin: 0 0 10px; }
.cate h1.active { color: #174ec9; }
.swiper-container { margin: 50px auto; width: 1000px; }
.swiper-slide { text-align: center; }
.swiper-slide img { max-height: 350px; }
.sample_name { font-size: 32px; }
const cloneSlide = $('.view_section .swiper-wrapper').html();
const arraySlide = [];
$('.view_section .swiper-slide').each(function(i, e) {
arraySlide.push(e);
})
const mainSwiper = new Swiper('.view_section .swiper-container', {
slidesPerView: 2,
centeredSlides: true,
spaceBetween: 30,
speed: 1000,
loop: false,
loopAdditionalSlides: 1,
autoplay:{
autoplay: true,
delay: 3000,
disableOnInteraction: false
}
});
$('.cate h1').on('click', function() {
const type = $(this).text();
$('.cate h1').removeClass('active');
$(this).addClass('active');
$('.view_section .swiper-wrapper').empty();
if (type === '전체') {
$('.view_section .swiper-wrapper').append(cloneSlide);
} else {
$(arraySlide).each(function(i, e) {
const exist = $(e).attr('data-type').indexOf(type);
if (exist >= 0) {
$('.view_section .swiper-wrapper').append(e);
}
});
}
mainSwiper.update();
mainSwiper.slideTo(0);
});
<style>
.swiper-slide .desc { height: 46px; }
.swiper-slide .market-price { height: 46px; }
</style>
<div class="slide_contbox" id="myTabContent">
<div class="slide_cont show active" id="s2_cont1" role="tabpanel">
<div class="swiper main_s2_slider s2_1">
<div class="swiper-wrapper">
<?php
foreach($arPublic as $key => $datap_row)
{
$file_upload_name2 = $datap_row["file_upload_name2"];
$img_src = $file_upload_name2;
if("" == $img_src)
$img_src = "/admode/upload/etc/noimg/no_img.jpg";
echo <<<HERE
<div class="swiper-slide" data-type="{$datap_row['category']}">
<a href="sub.php?code={$code_public}&mode=view&no={$datap_row['no']}">
<div class="img gra_box">
<img src="{$img_src}" class="img-full">
</div>
<div class="tit">{$datap_row['provider']}</div>
<div class="desc">{$datap_row['title']}</div>
</a>
</div>
HERE;
}
?>
</div>
</div>
<div class="swiper-button-prev">
<i class="xi-angle-left"></i>
</div>
<div class="swiper-button-next">
<i class="xi-angle-right"></i>
</div>
</div>
</div>
<script>
const m_s2_slider1 = new Swiper(".main_s2_slider.s2_1", {
slidesPerView: 1.8,
loop: true,
//loopAdditionalSlides: 1,
speed: 500,
autoplay: {
delay: 3500,
disableOnInteraction: false,
},
navigation: {
nextEl: "#s2_cont1 .swiper-button-next",
prevEl: "#s2_cont1 .swiper-button-prev",
},
breakpoints: {
600: {
spaceBetween: 0,
slidesPerView: 4,
},
},
//observer: true, // 추가
//observeParents: true, // 추가
});
m_s6_slider1 = new Swiper(".main_s6_slider.s6_1", {
spaceBetween: 16,
slidesPerView: 1.8,
loop: true,
//loopAdditionalSlides: 1,
speed: 500,
autoplay: {
delay: 3500,
disableOnInteraction: false,
},
navigation: {
nextEl: "#s6_cont1 .swiper-button-next",
prevEl: "#s6_cont1 .swiper-button-prev",
},
breakpoints: {
600: {
spaceBetween: 0,
slidesPerView: 4,
},
},
//observer: true, // 추가
//observeParents: true, // 추가
});
const cloneSlidePublic = $('#s2_cont1 .swiper-wrapper').html();
const arraySlidePublic = [];
const cloneSlideClient = $('#s6_cont1 .swiper-wrapper').html();
const arraySlideClient = [];
$(document).ready(function () {
setSlide();
});
function setSlide()
{
setSlidePublic();
setSlideClient();
}
function setSlidePublic()
{
$('#s2_cont1 .swiper-slide').each(function(i, e) {
arraySlidePublic.push($(e).prop("outerHTML"));
})
$(".public_cat").click(function () {
m_s2_slider1.autoplay.stop();
//const type = $(this).text();
const type = $(this).attr("data-no");
$('#s2_cont1 .swiper-wrapper').empty();
if (type === '') {
$('#s2_cont1 .swiper-wrapper').append(cloneSlidePublic);
} else {
$(arraySlidePublic).each(function(i, e) {
const exist = $(e).attr('data-type').indexOf(type);
if (exist >= 0) {
$('#s2_cont1 .swiper-wrapper').append(e);
}
});
}
s_idx = 0;
$('#s2_cont1 .swiper-slide').each(function(i, e) {
$(this).attr("data-swiper-slide-index", s_idx);
s_idx++;
})
$('#s2_cont1').removeClass("slide_cont active show");
$('#s2_cont1').addClass("slide_cont active show"); //추가 안하니 slide 가 안보임
m_s2_slider1.update();
m_s2_slider1.slideTo(0);
m_s2_slider1.autoplay.start();
});
}
function setSlideClient()
{
$('#s6_cont1 .swiper-slide').each(function(i, e) {
arraySlideClient.push($(e).prop("outerHTML"));
})
$(".custom_cat").click(function () {
m_s6_slider1.autoplay.stop();
//const type = $(this).text();
const type = $(this).attr("data-no");
$('#s6_cont1 .swiper-wrapper').empty();
if (type === '') {
$('#s6_cont1 .swiper-wrapper').append(cloneSlideClient);
} else {
$(arraySlideClient).each(function(i, e) {
const exist = $(e).attr('data-type').indexOf(type);
if (exist >= 0) {
$('#s6_cont1 .swiper-wrapper').append(e);
}
});
}
s_idx = 0;
$('#s6_cont1 .swiper-slide').each(function(i, e) {
$(this).attr("data-swiper-slide-index", s_idx);
s_idx++;
})
$('#s6_cont1').removeClass("slide_cont active show");
$('#s6_cont1').addClass("slide_cont active show"); //추가 안하니 slide 가 안보임
m_s6_slider1.update();
m_s6_slider1.slideTo(0);
m_s6_slider1.autoplay.start();
});
}
</script>반응형