0

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

<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?

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

1 ответ 1

0

Можно прочитать документацию. Там есть хорошие методы и свойства: 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>

8
  • Спасибо сейчас попробую.
    – zfiodor
    5 фев 2018 в 13:43
  • Оно вроде все как правильно, в консоли есть "true" но скрипт не работает. Т.е. сам zoom не работает. Такое ощущение что 'true' не попадает в нужное место.
    – zfiodor
    5 фев 2018 в 14:01
  • Он в консоли выдает true. Может надо zoom: true?
    – zfiodor
    5 фев 2018 в 14:14
  • Немного исправил.
    – Puvvl
    5 фев 2018 в 19:31
  • Ок! Спасибо огромное! Завтра проверю, обязательно отпишусь. Спасибо еще раз!
    – zfiodor
    5 фев 2018 в 20:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.