swiperで画像を2つセンターに表示してスライドさせる

では早速デモから！

See the Pen swiper by sayuri (@giraffeweb) on CodePen.light

ソースはこちら。
基本的にはコピペでうまくいくと思います。
CSSやJSなどはお好みで好きに触ってください。

最初にswiperJSとswiperのCSS、swiperを読み込むのを忘れずに！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" type="text/css" />

<div class="swiper-container">
  <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>
</div>

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: 300px;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        width: 300px;
        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;
        -webkit-transform: translate(-50%,0);
      -moz-transform: translate(-50%,0);
      -ms-transform: translate(-50%,0);
      -o-transform: translate(-50%,0);
      transform: translate(-50%,0);
    }

CSSでのポイントはこの「
-webkit-transform: translate(-50%,0);
-moz-transform: translate(-50%,0);
-ms-transform: translate(-50%,0);
-o-transform: translate(-50%,0);
transform: translate(-50%,0);」。これを調整することで真ん中に寄せたり右寄せ、左寄せが可能になります。

let swipeOption = {
        speed: 1000,
        loop: true,
        slidesPerView: 3.6,
        slidesPerGroup: 2,
        initialSlide: 1,
        spaceBetween: 30,
        centeredSlides : true,
        autoplay: {
            delay: 5000,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        }
    }
    new Swiper('.swiper-container', swipeOption);

以上、みなさんもやってみてね！

Share: