Как на время нахождения курсора в блоке при листании слайдера отключить несколько всплывающих слоев?

let btnBR = document.querySelector('.btn-block-rent'),
elTropik = document.querySelector('.element-tropik'),
icoElemTropik = document.querySelector('.ico-element-tropik');
const swiper = new Swiper('.swiper-container', {
  // // Optional parameters
  // direction: 'vertical',
  // loop: true,

  // // If we need pagination
  // pagination: {
  //   el: '.swiper-pagination',
  // },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  on: {
    slideChange: function() {
      if(swiper.translate == -628 || swiper.translate == -1256) {
        elTropik.addEventListener("mouseleave", returnToStart, false);
        nextIfaceLauncher();
      }
      
      else if (swiper.translate == 0) {        
        elTropik.removeEventListener("mouseleave", returnToStart, false);
        
        icoElemTropik.style.transform = 'translate3d(0, 0,0)';
        btnBR.style.display = 'block';
        document.querySelector('.wrapper-svg-btn').style.transform = 'translate3d(0, 0,0)';
      }
    
    }
    
  },

  // // And if we need scrollbar
  // scrollbar: {
  //   el: '.swiper-scrollbar',
  // },
});

addOrangeToggler();

function returnToStart() {
  swiper.slideTo(0, 800);
  initiateZeroSlide();
}

function nextIfaceLauncher(x) {
        document.querySelector('.btn-price').style.zIndex = '8';
        
        icoElemTropik.style.zIndex = '8';
        document.querySelector('.h2-block-rent').style.zIndex = '8'; //5 def
        document.querySelector('.swiper-container').style.zIndex = '7'; //1 def
        
        if ( document.querySelector('.icon-umbrella').classList.contains("orange") ) {
          toggleOrangeIcons();
        }
        //remove listeners
        elTropik.removeEventListener("mouseenter", toggleOrangeIcons, false);
        elTropik.removeEventListener("mouseleave", toggleOrangeIcons, false);
        
         //icoElemTropik.style.transform = 'translate3d(-628px, 0,0)';
        //btnBR.style.display = 'none';
        
        //document.querySelector('.wrapper-svg-btn').style.transform = 'translate3d(-628px, 0,0)';
        
       // document.querySelector(`.swiper-slide:nth-child(${x}) img.photo-tropik`).addEventListener("mouseenter", function(){
         //      moveDetails("-628px", 5, "none");
       // });
        //document.querySelector(`.swiper-slide:nth-child(${x}) img.photo-tropik`).addEventListener("mouseleave", function(){
            //    moveDetails("0px", 9, "block");
       // });
}

function toggleOrangeIcons() {
  document.querySelector('.icon-umbrella').classList.toggle("orange");
  document.querySelector('.icon-bed').classList.toggle("orange");
  document.querySelector('.icon-person').classList.toggle("orange");
  document.querySelector('.btn-block-rent').classList.toggle("bg-orange");
}

//function moveDetails(x, z, display) {
// icoElemTropik.style.transform = `translate3d(${x}, 0,0)`;
// icoElemTropik.style.zIndex = `${z}`;
// btnBR.style.display = `${display}`;
// document.querySelector('.btn-price').style.zIndex = `${z}`;
// document.querySelector('.wrapper-svg-btn').style.transform = `translate3d(${x}, 0,0)`;
//}

function addOrangeToggler() {
  if (swiper.translate == 0) {
       elTropik.addEventListener("mouseenter", toggleOrangeIcons, false);
       elTropik.addEventListener("mouseleave", toggleOrangeIcons, false);
  }
}

function initiateZeroSlide() {
  addOrangeToggler();       
  document.querySelector('.h2-block-rent').style.zIndex = '5'; //5 def
  document.querySelector('.swiper-container').style.zIndex = '1'; //1 def
}

body {
  font-family: 'Ubuntu', sans-serif;
  margin: 0;
  padding: 0;
  color: #1A2B48;
}

.container {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0;
}

.element-tropik {
  position: relative;
  width: 628px;
  height: 300px;
  overflow: hidden;
}

.photo-tropik {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.h2-block-rent {
  position: absolute;
  color: white;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  padding-top: 72px;
  padding-left: 42px;
  margin: 0;
  z-index: 5;
  transition: all 0.2s ease-in-out;
}

.block-rent {
  margin-bottom: 30px;
}

.ico-person-p {
  margin: 0;
}

.ico-element-tropik {
  position: absolute;
  color: white;
  margin-left: 42px;
  margin-top: 218px;
  display: flex;
  z-index: 5;
  transition: all 0.5s ease;
}

.btn-price {
  position: absolute;
  color: white;
  margin-left: 470px;
  z-index: 5;
  transition: all 0.3s ease-in-out;
}

.wrapper-svg-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
  margin-top: 206px;
  transition: all 0.2s ease;
}

.btn-block-rent {
  width: 137px;
  height: 38px;
  background: #5091FA;
  border: 0;
  margin-top: 18px;
  padding: 0;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.5s ease-in-out;
}

.link-block-rent {
  text-decoration: none;
  color: white;
  text-transform: uppercase;
}

.price-p {
  padding-left: 15px;
  margin: 0;
}

.wrapper-element-tropik {
  display: flex;
  align-items: center;
}

.ico-person {
/*  padding-right: 22px;*/
  width: 27px;
  height: 27px;
}

.ico-person-dis {
  padding-left: 22px;
}

.wrapper-element-umbrella {
  display: flex;
  align-items: center;
  padding-top: 13px;
}

.ico-umbrella {
/*  padding-right: 22px;*/
  width: 28px;
  height: 22px;
}

.ico-umbrella-dis {
  padding-left: 22px;
}

.ico-umbrella-p {
  margin: 0;
}

.element-tropik::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(30, 144, 255, 0.6);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 5;
}

.element-tropik:hover::before {
  opacity: 1;
}


/*эффект для стрелок слайдера*/

.element-tropik:hover .swiper-button-next {
  visibility: visible;
}

.swiper-button-next {
  visibility: hidden;
}

.element-tropik:hover .swiper-button-prev {
  visibility: visible
}

.swiper-button-prev {
  visibility: hidden;
}


/*конец эффект для стрелок слайдера*/





.element-tropik:hover .h2-block-rent {
    padding-top: 38px;
    transition: all 0.3s ease-in-out;
}

.prewive-tropik-text {
    position: absolute;
    padding-left: 42px;
    padding-top: 100px;
    padding-right: 93px;
    color: white;
    font-size: 14px;
    font-style: normal;
    line-height: 16px;
    font-family: Ubuntu;
    opacity: 0;
    z-index: 5;
    transition: all 0.2s ease-in-out;
}

.element-tropik:hover
 .prewive-tropik-text {
    opacity: 1;
    padding-top: 76px;
    transition: all 0.4s ease-in-out;
}

.ico-bed-p {
  margin: 0;
}

.wrapper-element-bed {
  display: flex;
  margin-left: 22px;
}

.ico-bed {
/*  padding-right: 22px;*/
  width: 27px;
  height: 27px;
}

.ico-bed-dis {
  padding-left: 22px;
}

.wrapper-ico-bed {
  display: flex;
  margin-left: 22px;
  align-items: flex-end;
}

.ico-bed-dis {
  display: flex;
  align-items: center;
}



.element-tropik:hover .prewive-tropik-text {
  display:block;
}

.orange {
    color: #E8AE46;
}

.bg-orange {
    background: #E8AE46;
}

.icon-bed, .icon-person, .icon-umbrella {
    transition: all 0.5s ease-in-out;
}

/*swiper*/


        .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .swiper-container {
        width: 100%;
        height: 100%
      }

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet"/>
<div class="container">
<div class="block-rent">
    <div class="element-tropik">
        <h2 class="h2-block-rent">
            Вилла "Тропик"
        </h2>
        <div class="prewive-tropik-text">
             Вилла расположена в живописном месте в окружении леса и скал. На территории виллы находится открытый бассейн с водопадом, качеля для отдыха, заленые лужайки, барбекю с оборудованным местом для отдыха. 
        </div>


  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

        
        <div class="ico-element-tropik">

            <div class="wrapper-element-umbrella-person">
            <div class="wrapper-element-tropik">
                <div class="ico-person">
                    <svg class="icon-person" width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.0625 23.625C5.0625 23.625 3.375 23.625 3.375 21.9375C3.375 20.25 5.0625 15.1875 13.5 15.1875C21.9375 15.1875 23.625 20.25 23.625 21.9375C23.625 23.625 21.9375 23.625 21.9375 23.625H5.0625ZM13.5 13.5C14.8427 13.5 16.1303 12.9666 17.0797 12.0172C18.0291 11.0678 18.5625 9.78016 18.5625 8.4375C18.5625 7.09484 18.0291 5.80717 17.0797 4.85777C16.1303 3.90837 14.8427 3.375 13.5 3.375C12.1573 3.375 10.8697 3.90837 9.92027 4.85777C8.97087 5.80717 8.4375 7.09484 8.4375 8.4375C8.4375 9.78016 8.97087 11.0678 9.92027 12.0172C10.8697 12.9666 12.1573 13.5 13.5 13.5Z" fill="currentColor"/>
                    </svg>
                </div>
                <div class="ico-person-dis">
                    <p class="ico-person-p">
                        до 5 гостей
                    </p>
                </div>
            </div>
            <div class="wrapper-element-umbrella">
                <div class="ico-umbrella">
                    <svg class="icon-umbrella"  width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0)">
                    <g clip-path="url(#clip1)">
                    <path d="M4.87369 5.78268L9.18685 7.35318C10.6733 3.90891 12.8284 1.25833 15.0583 0.0160475C11.0083 -0.190507 7.08413 1.57725 4.56027 4.73851C4.27768 5.09332 4.44791 5.62766 4.87369 5.78268ZM10.46 7.81697L20.5334 11.4847C22.044 6.35757 21.3233 1.69932 18.7327 0.756519C18.4202 0.64247 18.0936 0.587558 17.7574 0.587558C15.3066 0.58798 12.3392 3.50931 10.46 7.81697ZM22.0275 2.55553C22.2902 3.24405 22.4849 4.01704 22.5851 4.88677C22.8275 6.99413 22.5251 9.45843 21.7846 11.94L26.1193 13.5181C26.5455 13.6732 27.0194 13.3733 27.0304 12.9196C27.1284 8.87763 25.2601 5.00208 22.0275 2.55553ZM23.6546 18.9228H13.5617L16.3048 11.3837L13.7644 10.4587L10.6851 18.9224H0.675845C0.302441 18.9224 0 19.2248 0 19.5986V20.9507C0 21.3241 0.302441 21.627 0.675845 21.627H23.6546C24.028 21.627 24.3304 21.3241 24.3304 20.9507V19.5986C24.3304 19.2252 24.028 18.9228 23.6546 18.9228Z" fill="currentColor"/>
                    </g>
                    </g>
                    <defs>
                    <clipPath id="clip0">
                    <rect width="27.0337" height="21.627" fill="white"/>
                    </clipPath>
                    <clipPath id="clip1">
                    <rect width="27.0337" height="21.627" fill="white"/>
                    </clipPath>
                    </defs>
                    </svg>
                </div>
                <div class="ico-umbrella-dis">
                        <p class="ico-umbrella-p">
                            800 м до моря
                        </p>
                </div>
            </div>

</div>

    <div class="wrapper-ico-bed">
        <div class="wrapper-bed">
            <div class="ico-bed-dis">
        <div class="ico-bed">
            <svg class="icon-bed" width="27" height="27" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M3.51562 7.03125C3.51562 6.65829 3.66378 6.3006 3.92751 6.03688C4.19123 5.77316 4.54891 5.625 4.92188 5.625H9.14062C9.51359 5.625 9.87127 5.77316 10.135 6.03688C10.3987 6.3006 10.5469 6.65829 10.5469 7.03125V8.4375H11.9531V7.03125C11.9531 6.65829 12.1013 6.3006 12.365 6.03688C12.6287 5.77316 12.9864 5.625 13.3594 5.625H17.5781C17.9511 5.625 18.3088 5.77316 18.5725 6.03688C18.8362 6.3006 18.9844 6.65829 18.9844 7.03125V8.4375H21.0938V2.8125C21.0938 2.43954 20.9456 2.08185 20.6819 1.81813C20.4181 1.55441 20.0605 1.40625 19.6875 1.40625H2.8125C2.43954 1.40625 2.08185 1.55441 1.81813 1.81813C1.55441 2.08185 1.40625 2.43954 1.40625 2.8125V8.4375H3.51562V7.03125ZM19.6875 9.84375H2.8125C2.06658 9.84375 1.35121 10.1401 0.823762 10.6675C0.296316 11.195 0 11.9103 0 12.6562L0 20.3906C0 20.5771 0.074079 20.7559 0.205941 20.8878C0.337802 21.0197 0.516645 21.0938 0.703125 21.0938H2.10938C2.29586 21.0938 2.4747 21.0197 2.60656 20.8878C2.73842 20.7559 2.8125 20.5771 2.8125 20.3906V18.2812H19.6875V20.3906C19.6875 20.5771 19.7616 20.7559 19.8934 20.8878C20.0253 21.0197 20.2041 21.0938 20.3906 21.0938H21.7969C21.9834 21.0938 22.1622 21.0197 22.2941 20.8878C22.4259 20.7559 22.5 20.5771 22.5 20.3906V12.6562C22.5 11.9103 22.2037 11.195 21.6762 10.6675C21.1488 10.1401 20.4334 9.84375 19.6875 9.84375Z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="22.5" height="22.5" fill="white"/>
</clipPath>
</defs>
</svg>
        </div>
        <div class="ico-bed-dis">
            <p class="ico-bed-p">
                5 спален
            </p>
        </div>
        </div>
</div>
</div>
        </div>
        
<div class="btn-price">
    <div class="wrapper-svg-btn">
    <p class="price-p">
        от 30 000 руб.
    </p>
    </div>
    <button class="btn-block-rent">
            <a class="link-block-rent" href="#">Описание</a>
    </button>
</div>


<div class="swiper-container">
  <div class="swiper-wrapper">

    <div class="swiper-slide">
    <img class="photo-tropik" src="https://estylespain.com/media/images/properties/2765_559650015c395.jpg" alt="">
    </div>
        <div class="swiper-slide">
    <img class="photo-tropik" src="https://www.rentineurope.ru/img/big/2423_187578974.jpeg" alt="">
        </div>
            <div class="swiper-slide">
        <img class="photo-tropik" src="https://www.clubvillamar.com/uploads/images/6021/5a848000da25c.jpg" alt="">
            </div>
</div>
</div>


</div> <!-- element tropic -->



    </div>
    
</div>