jQueryでスライドショー機能を実装しようとしたが反映されずエラーが出てしまいます。
解決したいこと
アプリケーション内にjQueryでスライドショーを実装しようとしたのですが、うまく反映されません。
コンソール上にエラーが出ており、画像すら表示されていない状況です。
(当方プログラミング初心者で、最近jqueryの勉強を始めたばかりです。学んだことをアウトプットしてみようと思い実装してみたとたんエラーが出てしまいました
)
〇詳細
Ruby on Railsでhomes#aboutページにスライドショーを実装しようと思い
about.html.erb,slideshow.jsというファイルに記述を行いましたがうまく反映されませんでした。
各画像ファイルはimgフォルダの配下にあり、
jQueryのダウンロードした本体のファイル(jquery-3.7.1.min.js)はアプリケーションのフォルダの配下にあり、
slideshow.jsはjsフォルダの配下にあります。
発生している問題・エラー
コンソール上で画像ファイル(book1.jpg, book2.jpg, book3.jpg)と
slideshow.js, jquery-3.7.1.min.jsに対してエラーが出ています。
Failed to load resource: the server responded with a status of 404 ()
該当するソースコード
js/slideshow.js
$(function(){
$('.slideshow').each(function(){
var $slides =$(this).find('img'),
slideCount =$slides.length,
currentIndex= 0;
$slides.eq(showNextSlide, 7500);
function showNextSlide(){
var nextIndex=(currentIndex +1)%slideCount;
$slides.eq(currentIndex).fadeOut();
$slides.eq(nextIndex).fadeIn();
currentIndex=nextIndex;
}
});
});
app/view/homes/about.html.erb
<div class='container'>
<div class='row'>
<h1 class="px-3 mx-auto">Welcome to <i class="fas fa-book"></i><strong>Bookers</strong>!</h1>
</div>
<div class="slideshow">
<img src="img/book1.jpg", alt="", width="1600", height="465"></a>
<img src="img/book2.jpg", alt="", width="1600", height="465"></a>
<img src="img/book3.jpg", alt="", width="1600", height="465"></a>
</div>
<script src="jquery-3.7.1.min.js"></script>
<script src="js/slideshow.js"></script>
</div>
自分で試したこと
内にCDNコードを記述(その際はjquery本体のコードが被らないように1つにしていました)したり、HTMLファイルの下部に0
