タイトル通り、スライドショーを導入したいのですが、うまく行きません。
どこがおかしいのか、例えば足りないものがあればどこに追加すればいいのかなど具体的に教えていただけると助かります
コードは以下になります。
・HTML
<div class="slideshow"> <div class="slideshow-slides"> <a href="./" class="slide" id="slide-1"><img src="/slide-1.jpg" alt="" width="1600" height="465"></a> <a href="./" class="slide" id="slide-2"><img src="/slide-2.jpg" alt="" width="1600" height="465"></a> <a href="./" class="slide" id="slide-3"><img src="/slide-3.jpg" alt="" width="1600" height="465"></a> <a href="./" class="slide" id="slide-4"><img src="/slide-4.jpg" alt="" width="1600" height="465"></a> </div> <div class="slideshow-nav"> <a href="#" class="prev">Prev</a> <a href="#" class="next">Next</a> </div> <div class="slideshow-indicator"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
・CSS
.slideshow { background-color: rgb(0, 0, 0); height: 465px; min-width: 960px; overflow: hidden; position: relative; } .slideshow-slides { height: 100%; position: absolute; width: 100%; /* left は JavaScript で指定 */ } .slideshow-slides .slide { height: 100%; overflow: hidden; position: absolute; width: 100%; /* left は JavaScript で指定 */ } .slideshow-slides .slide img { left: 50%; margin-left: -800px; position: absolute; } .slideshow-nav a, .slideshow-indicator a { background-color: rgba(0, 0, 0, 0); /* for IE9 */ overflow: hidden; } .slideshow-nav a:before, .slideshow-indicator a:before { content: url(../img/sprites.png); display: inline-block; font-size: 0; line-height: 0; } .slideshow-nav a { position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; margin-top: -36px; } .slideshow-nav a.prev { margin-left: -480px; } .slideshow-nav a.prev:before { margin-top: -20px; } .slideshow-nav a.next { margin-left: 408px; } .slideshow-nav a.next:before { margin-left: -80px; margin-top: -20px; } .slideshow-nav a.disabled { display: none; } .slideshow-indicator { bottom: 30px; height: 16px; left: 0; position: absolute; right: 0; text-align: center; } .slideshow-indicator a { display: inline-block; width: 16px; height: 16px; margin-left: 3px; margin-right: 3px; } .slideshow-indicator a.active { cursor: default; } .slideshow-indicator a:before { margin-left: -110px; } .slideshow-indicator a.active:before { margin-left: -130px; } /* JavsScript 無効時 */ .no-js .slideshow { height: auto; } .no-js .slideshow-slides { height: auto; position: static; } .no-js .slideshow-slides .slide { display: block; height: auto; position: static; } .no-js .slideshow-slides .slide img { margin: auto; position: static; } .no-js .slideshow-nav, .no-js .slideshow-indicator { display: none; }
・jQuery
$(function () { $('.slideshow').each(function () { var $container = $(this), $slideGroup = $container.find('.slideshow-slides'), $slides = $slideGroup.find('.slide'), $nav = $container.find('.slideshow-nav'), $indicator = $container.find('.slideshow-indicator'), slideCount = $slides.length, // スライドの点数 indicatorHTML = '', // インジケーターのコンテンツ currentIndex = 0, // 現在のスライドのインデックス duration = 3500, // 次のスライドへのアニメーションの所要時間 easing = 'easeInOutExpo', // 次のスライドへのアニメーションのイージングの種類 interval = 1, // 自動で次のスライドに移るまでの時間 timer; // タイマーの入れ物 $slides.each(function (i) { $(this).css({ left: 100 * i + '%' }); indicatorHTML += '<a href="#">' + (i + 1) + '</a>'; }); $indicator.html(indicatorHTML); function goToSlide (index) { $slideGroup.animate({ left: - 100 * index + '%' }, duration, easing); currentIndex = index; updateNav(); } function updateNav () { var $navPrev = $nav.find('.prev'), $navNext = $nav.find('.next'); if (currentIndex === 0) { $navPrev.addClass('disabled'); } else { $navPrev.removeClass('disabled'); } if (currentIndex === slideCount - 1) { $navNext.addClass('disabled'); } else { $navNext.removeClass('disabled'); } $indicator.find('a').removeClass('active') .eq(currentIndex).addClass('active'); } function startTimer () { timer = setInterval(function () { var nextIndex = (currentIndex + 1) % slideCount; goToSlide(nextIndex); }, interval); } function stopTimer () { clearInterval(timer); } $nav.on('click', 'a', function (event) { event.preventDefault(); if ($(this).hasClass('prev')) { goToSlide(currentIndex - 1); } else { goToSlide(currentIndex + 1); } }); $indicator.on('click', 'a', function (event) { event.preventDefault(); if (!$(this).hasClass('active')) { goToSlide($(this).index()); } }); $container.on({ mouseenter: stopTimer, mouseleave: startTimer }); goToSlide(currentIndex); startTimer(); }); });
・エラー内容
jquery.min.js:5 Uncaught TypeError: b.easing[this.easing] is not a function at init.run (jquery.min.js:5) at u (jquery.min.js:5) at Function.b.fx.timer (jquery.min.js:5) at er (jquery.min.js:5) at HTMLDivElement.a (jquery.min.js:5) at Function.dequeue (jquery.min.js:3) at HTMLDivElement.<anonymous> (jquery.min.js:3) at Function.each (jquery.min.js:3) at init.each (jquery.min.js:3) at init.queue (jquery.min.js:3) run @ jquery.min.js:5 u @ jquery.min.js:5 b.fx.timer @ jquery.min.js:5 er @ jquery.min.js:5 a @ jquery.min.js:5 dequeue @ jquery.min.js:3 (anonymous) @ jquery.min.js:3 each @ jquery.min.js:3 each @ jquery.min.js:3 queue @ jquery.min.js:3 animate @ jquery.min.js:5 goToSlide @ application.self-374ee375c1912b572ebe31cb0f827bb8eeba5c8f7da59ef6d26acb41c4de6970.js?body=1:69 (anonymous) @ application.self-374ee375c1912b572ebe31cb0f827bb8eeba5c8f7da59ef6d26acb41c4de6970.js?body=1:123 each @ jquery.min.js:3 each @ jquery.min.js:3 (anonymous) @ application.self-374ee375c1912b572ebe31cb0f827bb8eeba5c8f7da59ef6d26acb41c4de6970.js?body=1:46 (anonymous) @ jquery.turbolinks.self-176b9819f30444d441e820bbccd3264fe57753aeafd54dec732b0dbc77129a2a.js?body=1:30 dispatch @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:5227 elemData.handle @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:4879 trigger @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:5131 (anonymous) @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:5861 each @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:371 each @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:138 trigger @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:5860 onLoad @ jquery.turbolinks.self-176b9819f30444d441e820bbccd3264fe57753aeafd54dec732b0dbc77129a2a.js?body=1:35 fire @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3233 fireWith @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3363 ready @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3583 completed @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3618 jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3734 GET http://localhost:3000/img/sprites.png 404 (Not Found)
あなたの回答
tips
プレビュー