Как отследить размер блока?

224

06 февраля 2018, 10:49

Есть окошко и есть скрипт управляющий этим окошком:

<div class="swiper-container"></div> 
 
<script> 
    var swiper = new Swiper('.swiper-container', { 
      zoom: false, 
      pagination: { 
        el: '.swiper-pagination', 
		clickable: true, 
      }, 
    }); 
</script>

Mожно ли сделать так, чтобы в момент раскрытия окошка во весь экран, менялся один из параметров скрипта, например zoom с false на true?

Пытался сделать через отслеживание размеров окна, но что то не выходит.
Или может, если это проще, запретить (сделать чтобы не срабатывал) двойной клик на этом окошке?

Answer 1

Можно прочитать документацию. Там есть хорошие методы и свойства: mySwiper.zoom.enable();, mySwiper.zoom.disable(); и mySwiper.zoom.toggle();. Можно попробовать написать так:

var swiper = new Swiper('.swiper-container', { 
  zoom: false, 
  pagination: { 
    el: '.swiper-pagination', 
    clickable: true, 
  }, 
}) 
 
function callZoom() { 
  swiper.zoom.enabled = !swiper.zoom.enabled; 
  console.log(swiper.zoom.enabled) 
} 
console.log(swiper.zoom.enabled)

html, 
body { 
  position: relative; 
  height: 100%; 
} 
 
body { 
  background: #eee; 
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
  font-size: 14px; 
  color: #000; 
  margin: 0; 
  padding: 0; 
} 
 
.swiper-container { 
  width: 100%; 
  height: calc(100% - 30px); 
} 
 
.swiper-slide { 
  text-align: center; 
  font-size: 18px; 
  background: #fff; 
  /* Center slide text vertically */ 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: -webkit-flex; 
  display: flex; 
  -webkit-box-pack: center; 
  -ms-flex-pack: center; 
  -webkit-justify-content: center; 
  justify-content: center; 
  -webkit-box-align: center; 
  -ms-flex-align: center; 
  -webkit-align-items: center; 
  align-items: center; 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.css" rel="stylesheet" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.js"></script> 
 
<div class="swiper-container" onclick="callZoom()"> 
  <div class="swiper-wrapper"> 
    <div class="swiper-slide">Slide 1</div> 
    <div class="swiper-slide">Slide 2</div> 
    <div class="swiper-slide">Slide 3</div> 
    <div class="swiper-slide">Slide 4</div> 
    <div class="swiper-slide">Slide 5</div> 
    <div class="swiper-slide">Slide 6</div> 
    <div class="swiper-slide">Slide 7</div> 
    <div class="swiper-slide">Slide 8</div> 
    <div class="swiper-slide">Slide 9</div> 
    <div class="swiper-slide">Slide 10</div> 
  </div> 
  <!-- Add Pagination --> 
  <div class="swiper-pagination"></div> 
</div>