

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

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

**該当箇所のコード**

[code]

    <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>
    
[/code]

[code]

    .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;
    }
    
[/code]

[code]

    <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>
    
[/code]

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

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

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


CC BY-SA 4.0
2019-08-26T04:00:07.923
57602
2019-08-31T19:48:01.330
34569
question
javascript html css
Swiper.jsによるスライダーのレイアウトが崩れてしまう


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

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

[code]

    .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;
    }
    
[/code]

[code]

    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,
    });
    
[/code]

[code]

    <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>
[/code]

* * *

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

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

[code]

    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',
      },
    });
[/code]

[code]

    .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;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2019-08-31T19:48:01.330
57743
2019-08-31T19:48:01.330
32986
57602
answer