๋ฐ์ํ
๋ค์ ๊ฒ์๊ธ
//fragmentํธ์ถ๋ถ๋ถ
<div th:replace="fragments/slider :: slider('CATEGORY222', 'swiperB')"></div>
//fragment์ง์ ๋ถ๋ถ
<div class="mt-5" th:fragment="slider(title, swiperName)">
<h3 style="font-weight:bold;" th:text="${title}"></h3>
<div class="swiper-cover">
<!-- Slider main container -->
<div class="swiper " th:classappend="${swiperName}">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<th:block th:each="num : ${#numbers.sequence(1,10)}">
<!--/* ์ปฌ๋ ์
์์ด ๋จ์ ๋ฐ๋ณต๋ฌธ์ฒ๋ฆฌ : ${#numbers.sequence(from,to,step)} */-->
<div class="swiper-slide">
<div class="col">
<div class="card shadow-sm">
<img src="https://plchldr.co/i/245x180" alt="plchldr.co" class="swiper-lazy">
<div class="card-body">
<p class="card-text" style="text-align:left;">
<span th:text="'์ฑ
์ ๋ชฉ'+${num}"></span> <br>
<span>์ต์๊ธ</span> <br>
<span>10000์</span>
</p>
</div>
</div>
</div>
</div>
</th:block>
</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev-custom " th:classappend="${swiperName}">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
<path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
</svg>
</div>
<div class="swiper-button-next-custom " th:classappend="${swiperName}">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
<path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
</svg>
</div>
</div>
</div>
๋๋ swiper๋ฅผ fragment๋ก ์ฌ์ฉํ๊ธฐ์ํด ํ์๋ฆฌํ๋ก swiperName์ ๋ฐ์์ ํด๋์ค๋ฅผ ์ถ๊ฐํ๊ฒ๋ํ๊ณ ,
์ฌ์ง์ฒ๋ผ ๋ฒํผ์ ์ธ๋ถ๋ก ๊บผ๋ด๊ธฐ ์ํด swiper-cover๋ผ๋ div๋ก ํ๋ฒ ๋ ๊ฐ์ธ์ฃผ์๋ค
๊ทธ๋ฆฌ๊ณ ํ ํ์ด์ง์ ์ฌ๋ฌ ์ฌ๋ผ์ด๋๊ฐ ๋ค์ด๊ฐ ์ํ์ด๋ค (swiper-slide ์์ bootstrapํด๋์ค ์ฌ์ฉ)
const swiperA = new Swiper('.swiperA', {
loop: true,
navigation: {
nextEl: '.swiperA.swiper-button-next-custom',
prevEl: '.swiperA.swiper-button-prev-custom',
},
lazy : {
loadPrevNext : true
},
});
ํ์๋ฆฌํ๋ก ๋์ด์จ swiperName์ ์๋ฐ์คํฌ๋ฆฝํธ์์ ์ง์ ํด์ ์ ๋ ๊ฒ ๊ฐ์ ธ์ค๋ฉด ๋ ์ค ์์๋๋ฐ..
^^..
๊ตฌ๊ธ๋งํด๋ด๋ ๋๋์ ๊ฑฐ๋ฆฌ๊ฐ ๋ค ๋จผ ๊ฒ ๊ฐ๊ณ ์ด๊ฒ์ ๊ฒ ์๋ํด๋ณด๋ค๊ฐ
<div class="mt-5">
<h3 style="font-weight:bold;">TestTest</h3>
<div class="swiper-cover">
<!-- Slider main container -->
<div class="swiper swiperC"> // ํด๋์ค๋ช
์ง์ โญโญโญโญโญโญ
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<th:block th:each="num : ${#numbers.sequence(1,10)}">
<!--/* ์ปฌ๋ ์
์์ด ๋จ์ ๋ฐ๋ณต๋ฌธ์ฒ๋ฆฌ : ${#numbers.sequence(from,to,step)} */-->
<div class="swiper-slide">
<div class="col">
<div class="card shadow-sm">
<img src="https://plchldr.co/i/245x180" alt="plchldr.co" class="swiper-lazy">
<div class="card-body">
<p class="card-text" style="text-align:left;">
<span th:text="'์ฑ
์ ๋ชฉ'+${num}"></span> <br>
<span>์ต์๊ธ</span> <br>
<span>10000์</span>
</p>
</div>
</div>
</div>
</div>
</th:block>
</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev-custom swiper-button-prev-custom-swiperC" > //css ๊ทธ๋๋ก ๋๋๊ณ ์๋ก์ด ํด๋์ค๋ช
์ง์ โญโญโญโญโญโญ
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
<path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
</svg>
</div>
<div class="swiper-button-next-custom swiper-button-next-custom-swiperC"> //css ๊ทธ๋๋ก ๋๋๊ณ ์๋ก์ด ํด๋์ค๋ช
์ง์ โญโญโญโญโญโญ
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
<path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
</svg>
</div>
</div>
</div>
const swiperC = new Swiper('.swiperC', {
loop: true, //๋ฌดํ๋ฐ๋ณต O
navigation: {
nextEl: '.swiper-button-prev-custom-swiperC',
prevEl: '.swiper-button-next-custom-swiperC',
//ํด๋์ค๋ช
ํ๋๋ก๋ง ์ง์ โญโญโญโญโญโญ
},
lazy : {
loadPrevNext : true // ์ด์ , ๋ค์ ์ด๋ฏธ์ง๋ ๋ฏธ๋ฆฌ ๋ก๋ฉ
},
}
์ด๋ ๊ฒ ํ๋ ์๋ฌ์์ด ์๋๋ค.. ๋์ฒด ๋จธ์ผ ใ ใ
๋ฐ์ํ