.springtheme {padding:0% 0% 10%;} .springtheme .swiper-button-next { background-image: url(https://support.visitkorea.or.kr/img/call?cmd=VIEW&id=ac465916-7281-4d2c-af0a-38d6f3468f31&mode=raw); background-size: auto !important; width: 42px; height: 42px; right: 10px; left: auto; } .springtheme .swiper-button-prev { background-image: url(https://support.visitkorea.or.kr/img/call?cmd=VIEW&id=13eaa572-4849-4705-9477-470d81330f67&mode=raw); background-size: auto !important; width: 42px; height: 42px; left: 10px; right: auto; } .springtheme .swiper-slide { background-position: center; background-size: cover; width: 80%; height: auto; } .springtheme .swiper-pagination-bullet-active { opacity: 1; background: rgba(12,12,12,0.8); } .springtheme2 {padding:3% 0% 10%;} .springtheme2 .swiper-button-next { background-image: url(https://support.visitkorea.or.kr/img/call?cmd=VIEW&id=ac465916-7281-4d2c-af0a-38d6f3468f31&mode=raw); background-size: auto !important; width: 42px; height: 42px; right: 10px; left: auto; } .springtheme2 .swiper-button-prev { background-image: url(https://support.visitkorea.or.kr/img/call?cmd=VIEW&id=13eaa572-4849-4705-9477-470d81330f67&mode=raw); background-size: auto !important; width: 42px; height: 42px; left: 10px; right: auto; } .springtheme2 .swiper-slide { background-position: center; background-size: cover; width: 50%; height: auto; } .springtheme2 .swiper-pagination {position:unset;} .springtheme2 .swiper-pagination .swiper-pagination-bullet-active { opacity: 1; background: rgba(12,12,12,0.8); } .springtheme3 {padding:3% 0% 10%;} .springtheme3 .swiper-button-next { background-image: url(https://support.visitkorea.or.kr/img/call?cmd=VIEW&id=ac465916-7281-4d2c-af0a-38d6f3468f31&mode=raw); background-size: auto !important; width: 42px; height: 42px; right: 10px; left: auto; } .springtheme3 .swiper-button-prev { background-image: url(https://support.visitkorea.or.kr/img/call?cmd=VIEW&id=13eaa572-4849-4705-9477-470d81330f67&mode=raw); background-size: auto !important; width: 42px; height: 42px; left: 10px; right: auto; } .springtheme3 .swiper-slide { background-position: center; background-size: cover; width: 50%; height: auto; } .springtheme3 .swiper-pagination {position:unset;} .springtheme3 .swiper-pagination-bullet-active { opacity: 1; background: rgba(12,12,12,0.8); } .springthemeroom {padding:3% 0% 5%;} .contents_img1 {width:70% !important;} .contents_img2 {width:70% !important;} .contents_img3 {width:70% !important;}.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 0; cursor: auto; pointer-events: none;} @media screen and (max-width: 1023px) { .travelContent .contents_img1 {width:100% !important;} .travelContent .contents_img2 {width:100% !important;} .travelContent .contents_img3 {width:100% !important;} .springtheme .swiper-slide {width:100%;} .springtheme2 .swiper-slide {width:100%;} .springtheme3 .swiper-slide {width:100%;} } ​ ​ ​ ​ $(function(){ function springtheme(){ var springthemeSwiper = new Swiper('.springtheme .swiper-container', { simulateTouch:false, loop:false, autoplay: false, startSlide:2, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, effect: 'coverflow', grabCursor: true, centeredSlides: true, slidesPerView: 'auto', coverflowEffect: { rotate: 50, stretch: 0, depth: 100, modifier: 1, slideShadows : true, }, pagination: { el: '.swiper-pagination', }, }); swiperThumbs(springthemeSwiper, { scope: '.springtheme', element: 'swiper-thumbnails', }); $('.springtheme .btn_autoArea button').on('click touchsrat', function(){ if($(this).closest('.springtheme').hasClass('active')){ $(this).closest('.springtheme').removeClass('active'); springthemeSwiper.autoplay.start(); }else{ $(this).closest('.springtheme').addClass('active'); springthemeSwiper.autoplay.stop(); } }); $(document).on('click touchend', '.springtheme .swiper-thumbnails button, .springtheme .swiper-container', function(){ if($('.springtheme').addClass('active')){ springthemeSwiper.autoplay.stop(); } }); } springtheme(); }); $(function(){ function springtheme2(){ var springtheme2Swiper = new Swiper('.springtheme2 .swiper-container', { simulateTouch:false, loop:false, autoplay: false, startSlide:2, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, effect: 'coverflow', grabCursor: true, centeredSlides: true, slidesPerView: 'auto', coverflowEffect: { rotate: 50, stretch: 0, depth: 100, modifier: 1, slideShadows : true, }, pagination: { el: '.swiper-pagination', }, }); swiperThumbs(springtheme2Swiper, { scope: '.springtheme2', element: 'swiper-thumbnails', }); $('.springtheme2 .btn_autoArea button').on('click touchsrat', function(){ if($(this).closest('.springtheme2').hasClass('active')){ $(this).closest('.springtheme2').removeClass('active'); springtheme2Swiper.autoplay.start(); }else{ $(this).closest('.springtheme2').addClass('active'); springtheme2Swiper.autoplay.stop(); } }); $(document).on('click touchend', '.springtheme2 .swiper-thumbnails button, .springtheme .swiper-container', function(){ if($('.springtheme2').addClass('active')){ springtheme2Swiper.autoplay.stop(); } }); } springtheme2(); }); $(function(){ function springtheme3(){ var springtheme3Swiper = new Swiper('.springtheme3 .swiper-container', { simulateTouch:false, loop:false, autoplay: false, startSlide:2, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, effect: 'coverflow', grabCursor: true, centeredSlides: true, slidesPerView: 'auto', coverflowEffect: { rotate: 50, stretch: 0, depth: 100, modifier: 1, slideShadows : true, }, pagination: { el: '.swiper-pagination', }, }); swiperThumbs(springtheme3Swiper, { scope: '.springtheme3', element: 'swiper-thumbnails', }); $('.springtheme3 .btn_autoArea button').on('click touchsrat', function(){ if($(this).closest('.springtheme3').hasClass('active')){ $(this).closest('.springtheme3').removeClass('active'); springtheme3Swiper.autoplay.start(); }else{ $(this).closest('.springtheme3').addClass('active'); springtheme3Swiper.autoplay.stop(); } }); $(document).on('click touchend', '.springtheme3 .swiper-thumbnails button, .springtheme .swiper-container', function(){ if($('.springtheme3').addClass('active')){ springtheme3Swiper.autoplay.stop(); } }); } springtheme3(); });