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

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

ただいまの
回答率

90.53%

  • jQuery

    7997questions

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

  • jQueryプラグイン

    610questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

【jQuery】[Swiper.js] ループした際に最後のスライドが一枚目に表示されてしまう

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 5,873

miyoshi_work

score 59

お世話になっております。

[Swiper.js]
を使用したスライドショーを作成しております。

発生している問題・エラーメッセージ

オプションを、”effect: 'cube'” かつ ”loop: true” を指定すると、
自動再生・手動でのスライドともに、
一巡目は問題ないのですが、
二巡目のループの一枚目のスライドを表示させると、
一番最後(下記動作サンプルでいう「最後のスライド」のスライド)が一番手前に来てしまいます。

動作サンプル(codepen)

これをきちんと一巡目と同じように

最初のスライド → テキスト02 → 最後のスライド

と、動くようにしたいです。

該当のソースコード

$(window).load(function(){
      var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            speed: 1000,
            autoplay: 6000,
            autoplayDisableOnInteraction: true,
            loop: true,
            effect: 'cube',
            cube: {
              slideShadows: false,
              shadow: false,
            }
        });
    });
<head>
    <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>

</head>

    <body>
        <div class="swiper-container" id="slide">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="http://placehold.jp/480x360.png" alt=""/>
            <div class="slide_info">
                <a href="#">最初のスライド  (テキストテキスト)</a><a href="#">テキストテキスト</a> 
            </div>
            </div>
            <div class="swiper-slide">
            <img src="http://placehold.jp/480x360.png" alt=""/>
            <div class="slide_info">
                <a href="#">テキスト02 (テキスト)</a><a href="#">テキストテキスト</a> 
            </div>
            </div>
            <div class="swiper-slide">
            <img src="http://placehold.jp/480x360.png" alt=""/>
                <div class="slide_info">
                    <a href="#">最後のスライド (テキスト)</a><a href="#">テキストテキスト</a> 
                </div>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</body>
#slide {
  padding: 0;
  max-width: 495px;
  margin: 0px auto;
  text-align: center;
}
#slide img {
  width: 100%;
  max-width: 480px;
}
.slide_info {
  padding: 10px 0;
  overflow: hidden;
  background-image: url(../img/bg.png);
  background-color:#fff;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  max-width: 495px;
  margin-bottom: 40px;
}
.slide_info a {
  display: block;
}

試したこと

https://www.marineroad.com/staff-blog/14482.html

上記を参考に、$(document).ready(function(){から、$(window).load(function(){
変更したのですが、動作は変わりませんでした。

また、optionでeffectを指定してない時には
きちんとループするのを確認しております。

追記 15:55

動作サンプル02(codepen)

スクリプトの読み込みを一番最後に、
変更して、
オプションを

cube: {
  shadow: true,
  slideShadows: false,
}


に変更したところ、希望の動作になりました。
しかしshadow: false に変えると
またおかしな動作になってしまいます…

補足情報

firefoxで見た際には特に問題なさそうなのですが、
最初のスライドから、最後のスライドに移動しようと手動でスライドさせると
最後のスライドが表示されて欲しいのに、最初のスライドが表示されてしまいます。

また、この問題と関係あるかはわからないのですが、問題点として、
クロームのデベロッパーでデバイスを指定して確認すると
スライドが全体的に小さくなってしまっています。(実機で確認した際には問題なし)

この件に関してはまた新規で質問を立てるかもしれません。

補足追記 18:27

イメージ説明

(http://htmledit.squarefree.com/)に、下記でいただいた
コードを貼り付けた際の動作をキャプチャしたものです。
(画像は時間でのループですが手動で動かしても同じように動作します。)

動作環境
iPhone6S iOS 10.2.1

MAC ver10.11.3  
・Googlechrome   ver 56.0.2924.87
・FireFox        ver 51.0.1

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

こちらの環境で質問文のコードを試したのですが、2巡目のループの1枚目のスライドが表示されたときに1番最後の画像が手前に来る挙動は確認できませんでした。また、補足の最初のスライドから、最後のスライドに移動しようと手動でスライドさせると最初のスライドが表示される挙動も確認できませんでした。
もう一度質問者さんの手元にあるコードや動作を確認してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
    <style type="text/css">
        #slide {
            padding: 0;
            max-width: 495px;
            margin: 0px auto;
            text-align: center;
        }

        #slide img {
            width: 100%;
            max-width: 480px;
        }

        .slide_info {
            padding: 10px 0;
            overflow: hidden;
            background-image: url(test.png);
            background-color: #fff;
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center bottom;
            max-width: 495px;
            margin-bottom: 40px;
        }

        .slide_info a {
            display: block;
        }
    </style>
</head>

<body>
<div class="swiper-container" id="slide">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="http://placehold.jp/480x360.png?text=image1" alt=""/>
            <div class="slide_info">
                <a href="#">最初のスライド (テキストテキスト)</a><a href="#">テキストテキスト</a>
            </div>
        </div>
        <div class="swiper-slide">
            <img src="http://placehold.jp/480x360.png?text=image2" alt=""/>
            <div class="slide_info">
                <a href="#">テキスト02 (テキスト)</a><a href="#">テキストテキスト</a>
            </div>
        </div>
        <div class="swiper-slide">
            <img src="http://placehold.jp/480x360.png?text=image3" alt=""/>
            <div class="slide_info">
                <a href="#">最後のスライド (テキスト)</a><a href="#">テキストテキスト</a>
            </div>
        </div>
    </div>
    <div class="swiper-pagination"></div>
</div>
<script>
    $(document).ready(function () {
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            speed: 500,
            autoplay: 1000,
            autoplayDisableOnInteraction: true,
            loop: true,
            effect: 'cube',
            cube: {
                slideShadows: false,
                shadow: false,
            }
        });
    });
</script>
</body>
</html>

(動作確認環境)
OS: windows 10

  • firefox 51.0.1,
  • google chrome 56.0.2924.87,
  • opera 43.0.2442.991

こちらの環境では以下のような動作になっています(キャプチャでは2巡させています)。
!![動作確認

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/02/22 16:24

    ご回答ありがとうございます。

    ご提示いただいたソースコードをそのまま貼り付けてサーバーへのアップ等も試してみたのですがやはり綺麗に動作致しませんでした…
    firefoxでの挙動も同様に起こってしまいます。

    MAC ver10.11.3 の chrome ver56.0.2924.87 (64-bit) を使用しているのですが
    何か目立った相違はありますでしょうか?

    キャンセル

  • 2017/02/22 16:44

    動作確認した環境について回答文に追記させていただきました。
    回答文のコードをここ(http://htmledit.squarefree.com/)で実行した場合も発生している問題は解決しませんか?

    キャンセル

  • 2017/02/22 17:17 編集

    動作環境の追記ありがとうございました。

    そちらに貼り付けを行ってみましたが同様に
    問題が発生してしまいました…

    キャンセル

  • 2017/02/22 17:25

    確認していただきありがとうございます。
    発生している問題についてもう少し詳細に教えていただけませんか?

    キャンセル

  • 2017/02/22 18:50 編集

    補足にてキャプチャを追記いたしました。
    書いてある通りコードはご提示いただいたものになります。

    また、追加で確認しましたがiphone6sでも同じような動作になります…

    キャンセル

  • 2017/02/22 19:16

    こちらでの動作のキャプチャを追記し、コードを少し修正させていただきました。
    ブラウザのキャッシュ履歴を消去してから実行してみてください。
    キャッシュ履歴の消去方法(https://support.google.com/accounts/answer/32050?hl=ja)

    キャンセル

  • 2017/02/22 19:55

    ご丁寧にありがとうございます。
    キャッシュのクリアを試し、確認したのですが、やはり私の方で提示したキャプチャのような動作になってしまいました。

    ただ、windows7で確認したところs8_chu様のキャプチャのようにキレイに動いたので、
    MAC OSの問題のようです…

    関係があるのかないのかわかりかねるのですが、
    MAC OSでも、スライダーの数を2,4と偶数にしたところ問題なく動作しました。

    またもう少し調べて何も進展ないようでしたらBAとさせていただきます。
    ありがとうございました!

    キャンセル

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

  • jQuery

    7997questions

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

  • jQueryプラグイン

    610questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。