57005


現在、Webサイトにスライダーを実装しようしているのですが、一つ目の要素が他の要素の約２倍になるようなものを作りたいです。（以下画像のようなイメージです）

[![スライダーの参考画像](https://i.stack.imgur.com/0RCUQ.jpg)](https://i.stack.imgur.com/0RCUQ.jpg)

有名なjsプラグイン（swiperやslickなど）でできないかやってみましたが、どうにもうまくいきませんでした。動きは下記サイトのような感じで、スムーズにしたいです。  
[<https://liginc.co.jp/>](https://liginc.co.jp/)

自分一人でいくらやってみても、出来ませんでした・・。  
誰かやり方を教えてもらえないでしょうか？  
よろしくお願いします‍♂️


CC BY-SA 4.0
2019-07-29T00:23:50.917
56997
2020-12-23T10:53:44.507
2020-12-23T10:53:44.507
32986
35290
question
javascript html jquery css swiper
要素幅がそれぞれ異なるスライダーを作りたい


質問文に挙げられたサイトでは、 [Swiper](https://idangero.us/swiper/) というスライダーを用いているようですので、
Swiper を使用します。Swiper では、 **現在アクティブなスライドには`.swiper-slide-active`
クラスが付与される**ことを利用し、アクティブなスライド以外を `transform` プロパティの `scale` 関数で縮小します。

ちなみに、質問文のサイトでは、ここで `transform` プロパティではなく、 `width`, `height`
プロパティの値を変更しています。詳細な動作が知りたい場合、開発者ツールを用いて調べてみると良いと思います。

すると、質問文のリンク先のように、現在アクティブな左端のスライドが他のスライドの 2 倍に拡大されているような効果が得られます。

[code]

    var swiper = new Swiper(".swiper-container", {
      slidesPerView: 3,
      spaceBetween: 30,
      loop: true,
      loopFillGroupWithBlank: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
    });
[/code]

[code]

    * {
      margin: 0;
      padding: 0;
    }
    
    .swiper-container {
      width: 80vmax;
      height: 80vmin;
    }
    
    .swiper-slide>img {
      transform: scale(.5);
      transform-origin: top;
    }
    
    .swiper-slide-active>img {
      transform: scale(1);
    }
    
    img {
      width: 100%;
      height: 100%;
    }
[/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="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="https://picsum.photos/420/670?random=1"></div>
        <div class="swiper-slide"><img src="https://picsum.photos/420/670?random=2"></div>
        <div class="swiper-slide"><img src="https://picsum.photos/420/670?random=3"></div>
        <div class="swiper-slide"><img src="https://picsum.photos/420/670?random=4"></div>
        <div class="swiper-slide"><img src="https://picsum.photos/420/670?random=5"></div>
        <div class="swiper-slide"><img src="https://picsum.photos/420/670?random=6"></div>
        <div class="swiper-slide"><img src="https://picsum.photos/420/670?random=7"></div>
        <div class="swiper-slide"><img src="https://picsum.photos/420/670?random=8"></div>
        <div class="swiper-slide"><img src="https://picsum.photos/420/670?random=9"></div>
        <div class="swiper-slide"><img src="https://picsum.photos/420/670?random=10"></div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
[/code]

これにテキストを付与すれば概ね実現したいことに近い形になると思います。なお、以下のコードは狭い画面では正常に動作しないため、質問文のサイトと同様にメディアクエリによってスライダーの構成を変更する必要があります。

[code]

    var swiper = new Swiper(".swiper-container", {
      slidesPerView: 3,
      spaceBetween: 30,
      loop: true,
      loopFillGroupWithBlank: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
    });
[/code]

[code]

    * {
      margin: 0;
      padding: 0;
    }
    
    .swiper-container {
      width: 80vmax;
      height: 80vmin;
    }
    
    .swiper-slide {
      display: flex;
      flex-direction: column;
      justify-content: start;
      transform: scale(0.5);
      transform-origin: top;
    }
    
    .swiper-slide>img {
      height: 80%;
    }
    
    .swiper-slide>p {
      font-size: 2em;
    }
    
    .swiper-slide-active {
      transform: scale(1);
    }
    
    .swiper-slide-active>p {
      position: absolute;
      left: 50vw;
      bottom: 0;
      width: 15em;
      font-size: 1.5em;
    }
    
    img {
      width: 100%;
      height: 100%;
    }
[/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="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://picsum.photos/420/670?random=1">
    
          <p>テキスト1テキスト1テキスト1テキスト1テキスト1テキスト1</p>
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/420/670?random=2">
          <p>テキスト2テキスト2テキスト2テキスト2テキスト2テキスト2</p>
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/420/670?random=3">
          <p>テキスト3テキスト3テキスト3テキスト3テキスト3テキスト3</p>
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/420/670?random=4">
          <p>テキスト4テキスト4テキスト4テキスト4テキスト4テキスト4</p>
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/420/670?random=5">
          <p>テキスト5テキスト5テキスト5テキスト5テキスト5テキスト5</p>
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/420/670?random=6">
          <p>テキスト6テキスト6テキスト6テキスト6テキスト6テキスト6</p>
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/420/670?random=7">
          <p>テキスト7テキスト7テキスト7テキスト7テキスト7テキスト7</p>
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/420/670?random=8">
          <p>テキスト8テキスト8テキスト8テキスト8テキスト8テキスト8</p>
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/420/670?random=9">
          <p>テキスト9テキスト9テキスト9テキスト9テキスト9テキスト9</p>
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/420/670?random=10">
          <p>テキスト10テキスト10テキスト10テキスト10テキスト10テキスト10</p>
        </div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
[/code]


CC BY-SA 4.0
2019-07-29T07:12:22.423
57005
2019-07-29T07:12:22.423
32986
56997
answer