<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
let swiperMd = new Swiper(".mySwiper_md", {
scrollbar: {
el: ".swiper-scrollbar"
},
});
let swiperBene = new Swiper(".mySwiper_bene", {
pagination: {
el: ".swiper-pagination",
},
});
let swiper = new Swiper(".mySwiper_air", {
pagination: {
el: ".swiper-pagination",
},
});
</script>
pc버전에선 순수 javascript인 vanilla script로 구현을 했고, mobile 버전에선 swiper 플러그인을 사용했다.
<div class="swiper-slide" data-map="1">
<li>
<a href="#"><img src="images/hotel/content2/hotel1.jpg" alt=""></a>
<span class="hotel_type">호텔 | 제주시 서부</span>
<strong>WH호텔 제주</strong>
<p>229,000<span> 원</span></p>
</li>
</div>
<div class="swiper-slide" data-map="3">
<li>
<a href="#"><img src="images/hotel/content2/hotel2.jpg" alt=""></a>
<span class="hotel_type">리조트 | 제주시 동부</span>
<strong>한해리조트</strong>
<p>88,000<span> 원</span></p>
</li>
</div>
<div class="swiper-slide" data-map="2">
<li>
<a href="#"><img src="images/hotel/content2/hotel3.jpg" alt=""></a>
<span class="hotel_type">펜션 | 제주시</span>
<strong>히든클리펜션</strong>
<p>301,000<span> 원</span></p>
</li>
</div> let swiper1 = new Swiper(".mySwiper_rec", {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
on: {
slideChange: function () {
let hotelAct = document.querySelector('.mySwiper_rec .swiper-slide-active');
let H_recoJMap = document.querySelectorAll('.hotelCon .jeju .inner .jeju_hotel .img .maps img')
let num = hotelAct.dataset.map-1;
H_recoJMap.forEach(element => {
element.style.display = 'none'
});
H_recoJMap[num].style.display='block'
}
}
});
pc 버전에선 호텔 이미지에 hover 시 해당 호텔의 위치가 지도에 표시되도록 했는데 mobile에선 hover를 쓸 수 없으므로 하나의 호텔만 나타나게 script를 작성하고 스와이프 시 그에 맞는 지도가 나타나도록 해 보았다.
swiper에서 액션을 하게 되면 표시되는 요소에 active class가 부여되는데 이 점을 이용하여 해당 요소를 가져온 후 data-를 추출해 지도가 바뀌도록 구현했다.
