web-dev-qa-db-ja.com

SwiperJSでマウスオーバーを拡大

ユーザーがダブルタップではなく、スライドの上にマウスを置いたときにズーム機能を実行することは可能ですか？ダブルタップ方式はタッチには最適ですが、デスクトップの場合はそれほど直感的ではなく、他のインタラクティブな要素（リンクなど）で大混乱を引き起こします

マウスオーバーによるズームを使用すると、ユーザーは、スライドの中心に対するマウスの位置に関連して、ズームされたスライド画像をナビゲートできるようになります。マウスを右上に移動すると、ズームコンテナ内の他のコーナーまたは領域にマウスを移動するのと同じように、スライド画像がパンして右上の領域にズームします。

ズームで反転パンも有効にするスイッチがあった場合も便利です（たとえば、カーソルを左上に移動すると、画像の右下にパンしてズームします）。

javascriptreactjsswiper
7
Noman

Swiperjsライブラリを使用して画像をズームインおよびズームアウトします。

HTML

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="swiper-zoom-container">
                <img src="https://s3.amazonaws.com/uifaces/faces/Twitter/zakiwarfel/128.jpg" class="media-object img-circle thumbnail">
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper-zoom-container">
                <img src="https://s3.amazonaws.com/uifaces/faces/Twitter/adhamdannaway/128.jpg" class="media-object img-circle thumbnail">
            </div>
        </div>
        <div class="swiper-slide">Plain slide with text</div>
        <div class="swiper-slide">
            <!-- Override maxRatio parameter -->
            <div class="swiper-zoom-container" data-swiper-zoom="5">
                <img src="path/to/image1.jpg">
            </div>
        </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

JS

var mySwiper = new Swiper('.swiper-container', {
  zoom: {
    maxRatio: 5,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
   }
});

var swiperSlide = document.getElementsByClassName('swiper-slide')
for(var index = 0; index< swiperSlide.length; index++){
swiperSlide[index].addEventListener('mouseover',function(e){
    mySwiper.zoom.in();
})

swiperSlide[index].addEventListener('mouseout',function(e){
    mySwiper.zoom.out();
})
}
4
front_end_dev

マウスオーバーイベントで次のメソッドを呼び出すことができます。

mySwiper.zoom.in

ここで、mySwiperはSwiperクラスのインスタンスです。 link の後に情報を取得できます。これが例です。

window.Myswiper = new Swiper('.swiper-container', {
  zoom: true,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
img1.addEventListener("mousemove", function() {
if(Myswiper.zoom.scale < 2)
  Myswiper.zoom.in()
})
img1.addEventListener("mouseout", function() {
  Myswiper.zoom.out()
})
img2.addEventListener("mousemove", function() {
  if(Myswiper.zoom.scale < 2)
  Myswiper.zoom.in()
})
img2.addEventListener("mouseout", function() {
  Myswiper.zoom.out()
})
html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #000;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

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

.swiper-slide {
  overflow: hidden;
}
<link href="https://idangero.us/swiper/dist/css/swiper.min.css" rel="stylesheet" />
<script src="https://idangero.us/swiper/dist/js/swiper.min.js"></script>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="swiper-zoom-container">
        <img id="img1" src="http://www.clker.com/cliparts/3/m/v/Y/E/V/small-red-Apple-hi.png">
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-zoom-container">
        <img id="img2" src="http://www.clker.com/cliparts/3/k/L/m/P/2/yellow-Apple-md.png">
      </div>
    </div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination swiper-pagination-white"></div>
  <!-- Add Navigation -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
5
Chinmoy Samanta

react-id-swiperを使用していて、Swiper垂直サムネイルも使用している場合

これがコード例です。

componentWillUpdate(nextProps, nextState) {
  if (nextState.gallerySwiper && nextState.thumbnailSwiper) {
    const { gallerySwiper, thumbnailSwiper } = nextState

    gallerySwiper.controller.control = thumbnailSwiper;
    thumbnailSwiper.controller.control = gallerySwiper;

    var swiperSlide = document.getElementsByClassName('swiper-zoom-container')
    for(var index = 0; index<swiperSlide.length; index++){
      swiperSlide[index].addEventListener('mouseover',function(e){
        gallerySwiper.zoom.in();
      })
      swiperSlide[index].addEventListener('mouseout',function(e){
        gallerySwiper.zoom.out();
      })
    }
  }
}
0
Noman