Swiper.jsでスライダーを作りたい
Q&A
Closed
解決したいこと
Swiper.jsを使用したスライダーを作成しようとしたところ、
"next""prev"のボタン及び自動スライドが動作しないトラブルが発生してしまいました。
cssファイルとjsファイルはそれぞれSwiper APIサイトからダウンロードしてきたものを使用しております。
GitHub上に各ファイルをアップロードしております。CSSとJSは改変無しです。
https://github.com/hassin-tomo/swiper_js_test.git
怪しいと思われる箇所
var swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
...
pagination: {
el: '.swiper-pagination',
type: 'bullets',//設定は全3種（type: 'franction'）（type: 'progressbar'）
clickable: true,
},
...
...
}
swiper-bundle.js
var Navigation$1 = {
name: 'navigation',
params: {
navigation: {
nextEl: null,
prevEl: null,
hideOnClick: false,
disabledClass: 'swiper-button-disabled',
hiddenClass: 'swiper-button-hidden',
lockClass: 'swiper-button-lock'
}
},
}
/*----------------------------------------------*/
var Pagination$1 = {
name: 'pagination',
params: {
pagination: {
el: null,
bulletElement: 'span',
clickable: false,
hideOnClick: false,
renderBullet: null,
renderProgressbar: null,
renderFraction: null,
renderCustom: null,
progressbarOpposite: false,
type: 'bullets',
},
},
}
試したこと
不要な要素が原因かと思い、HTML内の画像4・5（高さ不揃い画像・動画）を隠してみましたが、やはり動きませんでした。
HTML内でswiper-bundle.jsと被った書き方（上書きにならない？）をしているのが原因なのでしょうか？
0
