0

実現したいこと
下記キャプチャのように中心にスライダーのアクティブ画像を表示し、左右にアクティブ画像に隣接する前後の要素の画像を1枚づつ見切らせて表示したい。
https://gyazo.com/c86fcc89613d7e7efe3bf351a578a49f

現在の状況
アクティブ画像の位置が中心からかなりズレてしまい、レイアウトが崩れてしまっている
https://gyazo.com/e2daab7be34497cb6e5631c7bbcd8add

該当箇所のコード

<div class="main-visual">
    <div class="add-wrapper">
        <div class="swiper-container swiper1">
            <div class="swiper-wrapper">
                <div class="swiper-slide slide1">
                    <img src="path/to/image.svg" class="mv-img">
                </div>
                <div class="swiper-slide slide2">
                    <img src="path/to/image.svg" class="mv-img">
                </div>
                <div class="swiper-slide slide3">
                    <img src="path/to/image.svg" class="mv-img">
                </div>
                <div class="swiper-slide slide4">
                    <img src="path/to/image.svg" class="mv-img">
                </div>
                <div class="swiper-slide slide5">
                    <img src="path/to/image.svg" class="mv-img">
                </div>
            </div>
            <!-- swiperのページネーション -->
            <div class="swiper-pagination page1"></div>
            <!-- ナビゲーション -->
            <div class="swiper-button-prev prev1"></div>
            <div class="swiper-button-next next1"></div>
        </div>
    </div>
</div>
.main-visual {
  width: 100%;
  height: 522px;
  background-image: url(hoge);
  background-repeat: repeat;
  z-index: 0;
  background-color: #F0F0F0;
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
}

.add-wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
}

.swiper1 {
  width: 100%;
  overflow: visible;
  z-index: 1;
  height: 520px;
}

.swiper1 .swiper-slide {
  vertical-align: middle;
  margin-top: 88px;
}

.swiper1 .swiper-slide .mv-img {
  width: 670px !important;
  height: 335px !important;
}

.swiper1 .swiper-slide-active {
  height: 450px !important;
  width: 900px !important;
  margin-top: 30px;
}

.swiper1 .swiper-slide-active .mv-img {
  height: 450px !important;
  width: 900px !important;
}

.swiper1 .swiper-slide-prev,
.swiper1 .swiper-slide-next {
  width: 670px !important;
  height: 335px !important;
}

.swiper1 .swiper-slide-prev::after,
.swiper1 .swiper-slide-next::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.swiper1 .swiper-slide-prev .mv-img,
.swiper1 .swiper-slide-next .mv-img {
  width: 670px !important;
  height: 335px !important;
}

.swiper1 .swiper-pagination {
  width: 100%;
  left: 0;
  bottom: 10px;
}

.swiper1 .swiper-button-next{
  width: 32px;
  height: 60px;
}

.swiper1 .swiper-button-prev{
  width: 32px;
  height: 60px;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: #91d539;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<script>
'use strict';
    // スライダーの設定
window.addEventListener('load', function() {
    var mySwiper = new Swiper ('.swiper1', {
    loop: true,
    slidesPerView: 1.5,
    centeredSlides : true,
    loopedSlides:5,
    spaceBetween: 0,
    breakpoints: {
        960: {
            slidesPerView: 1,
            spaceBetween: 0
        }
    },
    navigation: {
        nextEl: '.next1',
        prevEl: '.prev1',
    },
    pagination: {
        el: '.page1',
    },
    // autoplay: {
    //   delay: 3000,
    //   disableOnInteraction: false
    // },
    speed: 500,
    roundLengths: true,
    });
}, false);
</script>

centeredSlides が機能していないようでうまく想定通りのレイアウトになってくれません。

必要な情報が不足している場合にはご指摘いただければ助かります。

ご支援のほどよろしくお願いいたします。

1

1 件の回答 1

1

slidesPerView オプションは、各スライドの横幅が異なる場合を考慮しないため、今回のようなアクティブなスライドの両側のスライドで横幅が異なる場合に対応出来ず、スライドのずれが発生しています。

そのため、単純にすべてのスライドの横幅を一致させ、 slidesPerView オプションを 1 に戻すことで、スライドがずれてしまう問題は解決することが出来ます。

.swiper1 .swiper-slide-prev,
.swiper1 .swiper-slide-next {
  width: 900px !important;  /* 変更 */
  height: 335px !important;
}

.swiper1 .swiper-slide-prev .mv-img,
.swiper1 .swiper-slide-next .mv-img {
  width: 900px !important;  /* 変更 */
  height: 335px !important;
}
var mySwiper = new Swiper('.swiper1', {
  loop: true,
  slidesPerView: 1, // 変更
  loopedSlides: 5,
  spaceBetween: 0,
  breakpoints: {
    960: {
      slidesPerView: 1,
      spaceBetween: 0
    }
  },
  navigation: {
    nextEl: '.next1',
    prevEl: '.prev1',
  },
  pagination: {
    el: '.page1',
  },
  speed: 500,
  roundLengths: true,
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
<style>
  .main-visual {
    width: 100%;
    height: 522px;
    background-image: url(hoge);
    background-repeat: repeat;
    z-index: 0;
    background-color: #F0F0F0;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
  }
  
  .add-wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
  }
  
  .swiper1 {
    width: 100%;
    overflow: visible;
    z-index: 1;
    height: 520px;
  }
  
  .swiper1 .swiper-slide {
    vertical-align: middle;
    margin-top: 88px;
  }
  
  .swiper1 .swiper-slide .mv-img {
    width: 670px !important;
    height: 335px !important;
  }
  
  .swiper1 .swiper-slide-active {
    height: 450px !important;
    width: 900px !important;
    margin-top: 30px;
  }
  
  .swiper1 .swiper-slide-active .mv-img {
    height: 450px !important;
    width: 900px !important;
  }
  
  .swiper1 .swiper-slide-prev,
  .swiper1 .swiper-slide-next {
    width: 900px !important;
    /* 変更 */
    height: 335px !important;
  }
  
  .swiper1 .swiper-slide-prev::after,
  .swiper1 .swiper-slide-next::after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
  }
  
  .swiper1 .swiper-slide-prev .mv-img,
  .swiper1 .swiper-slide-next .mv-img {
    width: 900px !important;
    /* 変更 */
    height: 335px !important;
  }
  
  .swiper1 .swiper-pagination {
    width: 100%;
    left: 0;
    bottom: 10px;
  }
  
  .swiper1 .swiper-button-next {
    width: 32px;
    height: 60px;
  }
  
  .swiper1 .swiper-button-prev {
    width: 32px;
    height: 60px;
  }
  
  .swiper-pagination-bullet-active {
    opacity: 1;
    background: #91d539;
  }
</style>
<div class="main-visual">
  <div class="add-wrapper">
    <div class="swiper-container swiper1">
      <div class="swiper-wrapper">
        <div class="swiper-slide slide1">
          <img src="http://placehold.jp/ffffaa/ffffff/800x600.png?text=1" class="mv-img">
        </div>
        <div class="swiper-slide slide2">
          <img src="http://placehold.jp/ffaaff/ffffff/800x600.png?text=2" class="mv-img">
        </div>
        <div class="swiper-slide slide3">
          <img src="http://placehold.jp/ffaaaa/ffffff/800x600.png?text=3" class="mv-img">
        </div>
        <div class="swiper-slide slide4">
          <img src="http://placehold.jp/aaffff/ffffff/800x600.png?text=4" class="mv-img">
        </div>
        <div class="swiper-slide slide5">
          <img src="http://placehold.jp/aaffaa/ffffff/800x600.png?text=5" class="mv-img">
        </div>
      </div>
      <!-- swiperのページネーション -->
      <div class="swiper-pagination page1"></div>
      <!-- ナビゲーション -->
      <div class="swiper-button-prev prev1"></div>
      <div class="swiper-button-next next1"></div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<script>
  'use strict';
  window.addEventListener('load', function() {
    var mySwiper = new Swiper('.swiper1', {
      loop: true,
      slidesPerView: 1, // 変更
      loopedSlides: 5,
      spaceBetween: 0,
      breakpoints: {
        960: {
          slidesPerView: 1,
          spaceBetween: 0
        }
      },
      navigation: {
        nextEl: '.next1',
        prevEl: '.prev1',
      },
      pagination: {
        el: '.page1',
      },
      speed: 500,
      roundLengths: true,
    });
  }, false);
</script>


各スライドの横幅が異なる状態のままで、かつ質問文のコードを使用して実現したい場合は、「slidesPerView オプションの値を調節する」か、「スライド (.swiper-slide) の横幅はそのままで、画像の位置のみをずらす」などの方法が思いつきますが、いずれも少し面倒な方法に感じます。

今回の場合、 coverflow エフェクトを使用することで、より簡単に質問者さんが実現したいことを行なえます。以下のスニペットでは厳密な調整をしていませんが、 coverflow エフェクトの各種オプションを調整することで、質問者さんが参考にしているサイトと同じライドが実現出来ると思います。

const swiper = new Swiper('.swiper-container', {
  effect: 'coverflow',
  loop: true,
  centeredSlides: true,
  slidesPerView: 'auto',
  coverflowEffect: {
    rotate: 0,
    stretch: 0,
    depth: 500,
    modifier: 1,
    slideShadows: false,
  },
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
.swiper-wrapper>.swiper-slide {
  width: 50vw;
  height: 50vmin;
}

.swiper-slide>img {
  height: 100%;
  width: 100%;
}

.swiper-slide-prev,
.swiper-slide-next {
  background: #000;
}

.swiper-slide-prev>img,
.swiper-slide-next>img {
  opacity: .5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />

<div class="container">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide slide1">
        <img src="http://placehold.jp/ffffaa/ffffff/800x600.png?text=1" class="mv-img">
      </div>
      <div class="swiper-slide slide2">
        <img src="http://placehold.jp/ffaaff/ffffff/800x600.png?text=2" class="mv-img">
      </div>
      <div class="swiper-slide slide3">
        <img src="http://placehold.jp/ffaaaa/ffffff/800x600.png?text=3" class="mv-img">
      </div>
      <div class="swiper-slide slide4">
        <img src="http://placehold.jp/aaffff/ffffff/800x600.png?text=4" class="mv-img">
      </div>
      <div class="swiper-slide slide5">
        <img src="http://placehold.jp/aaffaa/ffffff/800x600.png?text=5" class="mv-img">
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</div>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。