前提・実現したいこと
Swiperでスライドショーを実装しようとしていますが、スライドしない状態で困っています。エラーメッセージは特に表示されていません。
CDNからSwiperを使おうとしています。
該当のソースコード
html
1<head> 2 <meta charset="utf-8"> 3 <title></title> 4 <meta name="description" content=""> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="shortcut icon" href="img/favicon.ico"> 7 <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/> 8 <link rel="stylesheet" href="css/style.css"> 9 10 <script src="js/jquery-3.6.0.min.js"></script> 11 <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script> 12 13 <script src="js/script.js"></script> 14 15 16 </head> 17
javascript
1 2$(function() { 3 4$('.open').css('display', 'block'); 5 6$('.qestion-answer-list-item').click(function() { 7 var $answer = $(this).find('.answer'); 8 9 if($answer.hasClass('open')) { 10 $answer.removeClass('open'); 11 $answer.slideUp(); 12 } else { 13 $answer.addClass('open'); 14 $answer.slideDown() 15 } 16}); 17}); 18 19const swiper = new Swiper('.swiper', { 20 // Optional parameters 21 direction: 'vertical', 22 loop: true, 23 24 // If we need pagination 25 pagination: { 26 el: '.swiper-pagination', 27 }, 28 29 // Navigation arrows 30 navigation: { 31 nextEl: '.swiper-button-next', 32 prevEl: '.swiper-button-prev', 33 }, 34 35 // And if we need scrollbar 36 scrollbar: { 37 el: '.swiper-scrollbar', 38 }, 39 }); 40
試したこと
swaiperの公式サイトでコードを間違えていないか何度も確認しました。
何度も確認しましたがスライドしません。
https://swiperjs.com/get-started#use-swiper-from-cdn
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/11/09 16:39