JavaScriptを使った画像のスライドが１回しか動かない

Rails6でJavaScriptを初めて使って画像のスライドを作成しています。

実装したい内容

画像Aを表示した数秒後に画像Bを表示させたい。（全部で４つの画像をスライドで表示させたい）

現在の状況

ページの更新をした１回だけは動きますが、1枚目の時間も一瞬かつ、２枚目以降は動かない。

現在参考にしているサイト

https://allabout.co.jp/gm/gc/417216/2/#slideshow-javascript
https://nobunobu1717.site/?p=1292

app/views/layouts/application.html.erb


<!DOCTYPE html>
<html>
  <head>
    <title>TEST</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>

  <body>
  <header>
    <%= render partial: "layouts/navbar" %>
  </header>
    <%= render partial: "layouts/flash" %>
    <%= yield %>
  </body>
</html>

app/javascript/packs/top/application.js


require('top/slide')

app/javascript/packs/application.js


// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("bootstrap/dist/js/bootstrap")

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

app/javascript/top/slide.js


$(function slideSwitch() {
   var $active = $('#slideshow img.active');

  if ( $active.length == 0 ) $active = $('#slideshow img:last');

  var $next =  $active.next().length ? $active.next()
     : $('#slideshow img:first');

  $active.addClass('last-active');

   $next.css({opacity: 0.0})
     .addClass('active')
      .animate({opacity: 1.0}, 1000, function() {
    $active.removeClass('active last-active');
});
});

$(function() {
    setInterval("slideSwitch()", 3000);
});

app/views/homes/top.html.erb


<%= javascript_pack_tag 'top/application' %>
<section id="top">
  <div class="top-img">
    <p id="slideshow">
      <img src="<%= asset_path "top/top_img.png" %>" class="active">
      <img src="<%= asset_path "top/top2_img.jpg" %>">
      <img src="<%= asset_path "top/top3_img.png" %>">
      <img src="<%= asset_path "top/top4_img.jpg" %>">
    </p>
    <div class="top_message">
      <h2>共有しよう</h2>
    </div>
  </div>
  <div class="container">
    <h2 class="text-center">イベント情報</h2>
    <div class="text-center">
      <%= link_to "もっとみる", events_path %>
    </div>

    <h2 class="text-center">WEB情報</h2>
    <section id="tournaments">
      <div class="tournaments-wrapper">
        <%= render @tournaments %>
      </div>
    </section>
    <div class="text-center">
      <%= link_to  "もっとみる", tournaments_path %>
    </div>

    <h2 class="text-center">情報</h2>
    <div class="text-center">
      <%= link_to  "もっとみる", '#' %>
    </div>
  </div>
</section>

##　行なったこと
下記のようにapplication.html.erbに直接記述すると目的の動きができます

app/views/layouts/application.html.erb


<!DOCTYPE html>
<html>
  <head>
    <title>TEST</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<script type="text/javascript">
function slideSwitch() {
   var $active = $('#slideshow img.active');

   if ( $active.length == 0 ) $active = $('#slideshow img:last');

   var $next =  $active.next().length ? $active.next()
      : $('#slideshow img:first');

   $active.addClass('last-active');

   $next.css({opacity: 0.0})
      .addClass('active')
      .animate({opacity: 1.0}, 1000, function() {
           $active.removeClass('active last-active');
      });
}

$(function() {
   setInterval( "slideSwitch()", 4000 );
});
</script>


  </head>

  <body>
  <header>
    <%= render partial: "layouts/navbar" %>
  </header>
    <%= render partial: "layouts/flash" %>
    <%= yield %>
  </body>
</html>

JavaScriptを勉強中で今回初めて使いました。
間違っている箇所や解決方法のご指摘頂きたいです。
ご教示お願い致します。

行動規範の内容に同意します

回答2件

自己解決

自己解決できました。

【解決内容】
・app/javascript/packs/top/application.js

require("./top/slide")

・app/javascript/packs/top/slide.js

window.addEventListener('load', function () {
  viewSlide('.slide img');
});
function viewSlide(className, slideNo = -1) {
  let imgArray = document.querySelectorAll(className);
  if (slideNo >= 0) {
    imgArray[slideNo].style.opacity = 0;
  }
  slideNo++;
  if (slideNo >= imgArray.length) {
    slideNo = 0; 
  }
  imgArray[slideNo].style.opacity = 1;

  setTimeout(function () { viewSlide(className, slideNo); }, 3500);
}

・app/views/homes/top.html.erb
※先頭に下記を記述

<%= javascript_pack_tag 'top/slide', 'data-turbolinks-track': 'reload' %>

<div class="slide">
 <img src="<%= asset_path "top/画像.jpg" %>" />
 <img src="<%= asset_path "top/画像2.jpg" %>" />
 <img src="<%= asset_path "top/画像3.jpg" %>" />
 <img src="<%= asset_path "top/画像4.jpg" %>" />
</div>

・cssの記述

  .slide {
	position: relative;
  height: 500px;
  width: 100%;
  background-position: center;
  background-size: cover;
  }
  .slide img {
    position: absolute;
    height: 500px;
    width: 100%;
    opacity: 0;
    transition: all 1s ease-in-out;
    height: 100%;
    object-fit: cover;
  }

yambejpさん！アドバイスありがとうございました！
また宜しくお願い致します！

投稿2020/10/07 00:36

ty_tech

総合スコア1