スライドの仕方をhttps://infcurion.digital/のサイトのように動かしたい。

Question

      <div class="slider">
        <div class="slideSet">
          <div class="slide"><img src="img/mv.png"></div>
          <div class="slide"><img src="img/ACCESS-bg.png"></div>
          <div class="slide"><img src="img/mv.png"></div>
          <div class="slide"><img src="img/ACCESS-bg.png"></div>
        </div>
      </div>

.slider {
  position: relative;
  overflow: hidden;
  width: 500px;
  height: 500px;
  margin: 0 auto
}

.slideSet {
  position: absolute;
}

.slide {
  display: flex;
  float: left;
  width: 500px;
  height: 500px;
  background: #333
}

  'use strict';

    $(function() {
      var dir = -1;
      var interval = 3000;
      var duration = 600;
      var timer;
      $('.slideSet').prepend($('.slide:last-child'));
      $('.slideSet').css('left', '-500px');

      timer = setInterval(slideTimer, interval);

      function slideTimer() {
        if (dir === -1) {
          $('.slideSet').animate({
            left: '-=500'
          }, duration, function() {
            $(this).append($('.slide:first-child'));
            $(this).css('left', '-500px');
          });
        } else {
          $('.slideSet').animate({
            left: '+=500'
          }, duration, function() {
            $(this).prepend($('.slide:last-child'));
            $(this).css('left', '-500px');

            dir = -1;

          });

        }

      };
    });

スライドの動きが実現したいサイトの動きと違うので上記のサイトのような動きにしたいのですが、全く動きが違うので困っています。
また、背景画像も上記のサイトのようにゆっくり右に流れるような動きもプラスさせたいです。

Answer 1

いろいろな方法があると思いますが、アニメーションは CSS transition で実装して、jQueyではクラスを切り替えるだけにしてみました。

<div class="slider">
  <div class="slideSet">
    <div class="slide is-now">
      <img src="https://placehold.jp/100/3d4070/ffffff/550x500.png?text=Image1">
    </div>
    <div class="slide">
      <img src="https://placehold.jp/100/703d57/ffffff/550x500.png?text=Image2">
    </div>
    <div class="slide">
      <img src="https://placehold.jp/100/70643d/ffffff/550x500.png?text=Image3">
      </div>
    <div class="slide is-old">
      <img src="https://placehold.jp/100/3d704f/ffffff/550x500.png?text=Image4">
      </div>
  </div>
</div>

.slider {
  position: relative;
  overflow: hidden;
  width: 500px;
  height: 500px;
  margin: 0 auto
}
.slide {
  position: absolute; 
  width: 0;
  height: 500px;
  overflow: hidden;
  transition: width .7s linear;
}
.slide > img {
  position: absolute; 
  left: -50px;  
  transition: left 3s .7s linear;
}
.slide.is-now > img, .slide.is-now > img {
  left: 0;  
}
.slide.is-old {
  width: 500px;
  z-index: 1;
}
.slide.is-now {
  width: 500px;
  z-index: 2;
}

$(function() {
  var idx = 0;
  var interval = 3000;
  var items = $(".slide");
  
  timer = setInterval(slideTimer, interval);

  function slideTimer() {
    items.removeClass("is-now is-old");
    items.eq(idx).addClass("is-old"); 
    items.eq(idx==3 ? idx=0 : ++idx).addClass("is-now");    
  };
});

Codepenサンプル

---

画像を画面サイズ一杯に広げて、スライドする場合のサンプル

Codepenサンプル

Comments

[退会済みユーザー]

ありがとうございます。
ただこの記述ですと画面幅いっぱいにならないのですが、どのcssを変えればタイトルに記述したサイトのようにwidth,height共にトップ画面全体を覆うようになりますでしょうか。

[hatena19]

width,height が500pxになっているところを width:100vw と height: 100vh と設定して、画像のサイズは画面サイズより大きいものにすれば画面全体を覆うようになります。

ただ画像サイズも画面幅に応じて可変にするには、imgタグではなく、background-image で画像を表示するようにするといいでしょう。

[退会済みユーザー]

ご指摘いただいたようにやってみたのですが、うまくいかないので再度質問させていただきました。
よろしければコードの方を見ていただいてどこが間違っているのか教えていただければと思います。
よろしくお願いいたします。

[hatena19]

質問にサンプルを追加しておきましたので、ご参照ください。

[退会済みユーザー]

わかりました。どうもありがとうございます。