$(document).ready(function(){
   //서브메뉴
  
   $(".navi>li").mouseover(function(){
    $(this).find(".sub").stop().slideDown(500);
  })
  
  $(".navi>li").mouseout(function(){
    $(".sub").stop().slideUp(300);
  }) 

  
  let $header = $('header'),
  $gnb = $header.find('nav'),
  $mobileBtn = $header.find('.mobile-btn');

     // 모바일에서는 버튼 클릭으로 메뉴를 토글
     $mobileBtn.click(function () {
      $gnb.fadeToggle();
      $mobileBtn.toggleClass('on');
  });

    
    //메인 슬라이드
    var mySwiper = new Swiper(".mySwiper", {
      speed :1000,
      spaceBetween: 30, 
      slidesPerView : 'auto',
      centeredSlides: true, 
      effect: "fade",
      autoplay: {    
        delay: 3500, 
        disableOnInteraction: false, 
      },
      loop : true,  
      loopAdditionalSlides : 1,
      navigation: {
        nextEl: "#visual .swiper-button-next",
        prevEl: "#visual .swiper-button-prev",
      },
      scrollbar: {
        el: "#visual .swiper-scrollbar",
        hide: true,
      },
    });

    //메인 객실 슬라이드
    const bullet = ['특실', '준특실', '트윈A', '트윈B', '스탠다드', '드라이브인'];

    var roomSwiper = new Swiper(".roomSwiper", {
      slidesPerView: 1,
      spaceBetween: 30,
      loop: true,

      navigation: {
        nextEl: "#cont-1 .swiper-button-next",
        prevEl: "#cont-1 .swiper-button-prev",
      },
      pagination: {
        el: '#cont-1 .swiper-pagination',
          clickable: true,
          renderBullet: function (index, className) {
            return '<div class="' + className + '"><span>' + (bullet[index]) + '</span></div>';
          }
        }
    });

    // 메인 about 슬라이드
    var aboutSwiper = new Swiper(".aboutSwiper", {
      slidesPerView: 1,
      spaceBetween: 30,
      loop: true,
      autoplay: {    
        delay: 3500, 
        disableOnInteraction: false, 
      },
      navigation: {
        nextEl: "#cont-3 .swiper-button-next, .rooms_wrap .swiper-button-next",
        prevEl: "#cont-3 .swiper-button-prev, .rooms_wrap .swiper-button-prev",
      },
    });


    // 메인 tour 슬라이드
    var tourSwiper = new Swiper(".tourSwiper", {
      slidesPerView: 2, //모바일
      spaceBetween: 30,
      loop: true,
      pagination: {
        el: "#cont-4 .swiper-pagination",
        clickable: true,
      },
      breakpoints: {        
        768: {
          slidesPerView: 3,  //브라우저가 768보다 클 때- 태블릿
          spaceBetween: 20,
        },
        1024: {
          slidesPerView: 5,  //브라우저가 1024보다 클 때- PC
          spaceBetween: 10,
        },
      },
    });





    
  });