【jQuery】スライダー swiper.js が動かない

困っていること

swiper.jsを設定したのです、全く動かなくて困っています。
swiper.jsのサイトからv4.0.7をダウンロードして使っています。

記述は下記です。

html
1<!DOCTYPE HTML>
2<html>
3<head>
4<link href="/common/css/swiper.min.css" rel="stylesheet" type="text/css" />
5<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
6<script src="/common/js/swiper.min.js"></script>
7
8<script>
9var swiper = new Swiper('.swiper-container', {
10    direction: 'vertical',
11	speed: 600,
12    autoplay:200,
13    loop: true,
14});
15</script>
16</head>
17
18<body>
19<div class="slide">
20<div class="swiper-container">
21    <ul class="swiper-wrapper">
22        <li class="swiper-slide"><img src="common/images/slide_01.jpg" alt=""></li>
23        <li class="swiper-slide"><img src="common/images/slide_02.jpg" alt=""></li>
24        <li class="swiper-slide"><img src="common/images/slide_03.jpg" alt=""></li>
25    </ul>
26</div>
27</div>
28</body>

css
1.slide ul.swiper-wrapper{
2    width:100%;
3    height: 550px;
4}
5.slide ul.swiper-wrapper li.swiper-slide{
6    width:100%;
7    height: 100%;
8}

どこを直したら動くようになるのでしょうか？
どなたかご教授お願い致します。

追記

Tomak様に回答いただき修正してみましたので、追記いたします。

※loop: true,のカンマを削除
※コンソールで確認したところ、以下のエラーが出てました。

→ 'a[href^="#"]'に書き換えたところエラー表示は無くなりましたが、動きません。

※mac使用で確認したブラウザは下記の3つです。
・chrome　バージョン: 63.0.3239.84
・safari　バージョン10.0 (12602.1.50.0.10)
・firefox　最新バージョン

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

回答2件

ベストアンサー

js
1$( function() {
2    var swiper = new Swiper('.swiper-container', {
3        direction: 'vertical',
4        speed: 600,
5        autoplay:200,
6        loop: true,
7    } );
8} );

これで試してみてください。

追記：

autoplayの指定が動かない原因のようなので、微修正。

js
1$( function() {
2    var swiper = new Swiper('.swiper-container', {
3        direction: 'vertical',
4        speed: 600,
5        autoplay:true,
6        loop: true,
7    } );
8} );
9```**動くサンプル：**[https://jsfiddle.net/cyLft3np/](https://jsfiddle.net/cyLft3np/)

投稿2017/12/28 07:14

編集2017/12/28 08:01

kei344

総合スコア69643

korokorota

2017/12/28 08:10

ご丁寧に回答いただきありがとうございます！サンプルまで載せていただき恐縮です。追記していただいた記述でうまくいきました！！本当に助かりました、ありがとうございます！

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

jQueryは書き換えてはいけないので、修正したのであれば元に戻してください。

詳細なオプションはドキュメントを確認して欲しいのですが、画像要素をカルーセルのようにするにはLazy Loadingを使わなければならないそうです。HTMLの公式のサンプルは下記にありますので参考にしてください。
http://idangero.us/swiper/api/#lazy

また、私もちゃんとドキュメントを読んでいませんでしたが、vertical指定時はちょっと特殊なようです。試してないので何とも言えませんが下記のようにしてみてください。

js
1var swiper = new Swiper('.swiper-container', {
2    direction: 'vertical',
3    speed: 600,
4    autoplay: {delay : 200},     //trueかオブジェクトを指定します
5    //loop: true,                //← verticalには使えません
6    slidesPerView: 'auto',       //vertical指定時のloop
7    watchSlidesVisibility: true, //slidePerView指定時はこれも指定する
8    preloadImages: false,        //初期表示時にすべての画像を読み込まない
9    lazy: true
10});