質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

  • PHP

    21278questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    17481questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    7097questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 4,397

korokorota

score 29

困っていること

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

記述は下記です。

<!DOCTYPE HTML>
<html>
<head>
<link href="/common/css/swiper.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="/common/js/swiper.min.js"></script>

<script>
var swiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    speed: 600,
    autoplay:200,
    loop: true,
});
</script>
</head>

<body>
<div class="slide">
<div class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide"><img src="common/images/slide_01.jpg" alt=""></li>
        <li class="swiper-slide"><img src="common/images/slide_02.jpg" alt=""></li>
        <li class="swiper-slide"><img src="common/images/slide_03.jpg" alt=""></li>
    </ul>
</div>
</div>
</body>
.slide ul.swiper-wrapper{
    width:100%;
    height: 550px;
}
.slide ul.swiper-wrapper li.swiper-slide{
    width:100%;
    height: 100%;
}


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

追記

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

※loop: true,のカンマを削除
※コンソールで確認したところ、以下のエラーが出てました。
イメージ説明
→ 'a[href^="#"]'に書き換えたところエラー表示は無くなりましたが、動きません。

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

$( function() {
    var swiper = new Swiper('.swiper-container', {
        direction: 'vertical',
        speed: 600,
        autoplay:200,
        loop: true,
    } );
} );

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


追記:

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

$( function() {
    var swiper = new Swiper('.swiper-container', {
        direction: 'vertical',
        speed: 600,
        autoplay:true,
        loop: true,
    } );
} );

動くサンプル:https://jsfiddle.net/cyLft3np/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/28 17:10

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

    キャンセル

0

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

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

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

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

ご存知かもしれませんが、Swiper公式デモとサンプルソースは下記にあります。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/28 16:07

    Tomak様
    回答くださりありがとうございます。早速最後のカンマを削除、コンソールでの確認をしてみました。
    コンソール確認後の対応などを質問文にまとめて追記させていただいております。
    結果、まだ動きません・・・修正した記述に問題がありますでしょうか?

    キャンセル

  • 2017/12/28 17:16

    Tomak様
    修正に改めて丁寧な回答くださりありがとうございます!参照リンクもつけていただきありがとうございます!今回はkei344様にいただいた記述で無事解決することができましたが、ちゃんと見て勉強します。
    ご丁寧に回答いただき、本当にありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • PHP

    21278questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    17481questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    7097questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。