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

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

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

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

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

動作サンプル（codepen）

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

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

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

###該当のソースコード

javascript
1$(window).load(function(){
2	  var swiper = new Swiper('.swiper-container', {
3	        pagination: '.swiper-pagination',
4	        paginationClickable: true,
5	        speed: 1000,
6	        autoplay: 6000,
7	        autoplayDisableOnInteraction: true,
8	        loop: true,
9	        effect: 'cube',
10	        cube: {
11	          slideShadows: false,
12	          shadow: false,
13	        }
14	    });
15	});

html
1<head>
2	<meta charset="utf-8" />
3  <meta name="viewport" content="width=device-width, initial-scale=1">
4 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
5
6  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.css">
7<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
8
9<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.js"></script>
10<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
11  
12</head>
13  
14	<body>
15		<div class="swiper-container" id="slide">
16		<div class="swiper-wrapper">
17			<div class="swiper-slide">
18				<img src="http://placehold.jp/480x360.png" alt=""/>
19			<div class="slide_info">
20				<a href="#">最初のスライド  (テキストテキスト)</a><a href="#">テキストテキスト</a> 
21			</div>
22			</div>
23			<div class="swiper-slide">
24			<img src="http://placehold.jp/480x360.png" alt=""/>
25			<div class="slide_info">
26				<a href="#">テキスト02 (テキスト)</a><a href="#">テキストテキスト</a> 
27			</div>
28			</div>
29			<div class="swiper-slide">
30			<img src="http://placehold.jp/480x360.png" alt=""/>
31				<div class="slide_info">
32					<a href="#">最後のスライド (テキスト)</a><a href="#">テキストテキスト</a> 
33				</div>
34			</div>
35		</div>
36		<div class="swiper-pagination"></div>
37	</div>
38</body>
39

css
1#slide {
2  padding: 0;
3  max-width: 495px;
4  margin: 0px auto;
5  text-align: center;
6}
7#slide img {
8  width: 100%;
9  max-width: 480px;
10}
11.slide_info {
12  padding: 10px 0;
13  overflow: hidden;
14  background-image: url(../img/bg.png);
15  background-color:#fff;
16  background-size: 100%;
17  background-repeat: no-repeat;
18  background-position: center bottom;
19  max-width: 495px;
20  margin-bottom: 40px;
21}
22.slide_info a {
23  display: block;
24}

###試したこと

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

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

回答1件

ベストアンサー

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

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8"/>
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
7
8    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.css">
9    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
10
11    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.js"></script>
12    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
13    <style type="text/css">
14        #slide {
15            padding: 0;
16            max-width: 495px;
17            margin: 0px auto;
18            text-align: center;
19        }
20
21        #slide img {
22            width: 100%;
23            max-width: 480px;
24        }
25
26        .slide_info {
27            padding: 10px 0;
28            overflow: hidden;
29            background-image: url(test.png);
30            background-color: #fff;
31            background-size: 100%;
32            background-repeat: no-repeat;
33            background-position: center bottom;
34            max-width: 495px;
35            margin-bottom: 40px;
36        }
37
38        .slide_info a {
39            display: block;
40        }
41    </style>
42</head>
43
44<body>
45<div class="swiper-container" id="slide">
46    <div class="swiper-wrapper">
47        <div class="swiper-slide">
48            <img src="http://placehold.jp/480x360.png?text=image1" alt=""/>
49            <div class="slide_info">
50                <a href="#">最初のスライド (テキストテキスト)</a><a href="#">テキストテキスト</a>
51            </div>
52        </div>
53        <div class="swiper-slide">
54            <img src="http://placehold.jp/480x360.png?text=image2" alt=""/>
55            <div class="slide_info">
56                <a href="#">テキスト02 (テキスト)</a><a href="#">テキストテキスト</a>
57            </div>
58        </div>
59        <div class="swiper-slide">
60            <img src="http://placehold.jp/480x360.png?text=image3" alt=""/>
61            <div class="slide_info">
62                <a href="#">最後のスライド (テキスト)</a><a href="#">テキストテキスト</a>
63            </div>
64        </div>
65    </div>
66    <div class="swiper-pagination"></div>
67</div>
68<script>
69    $(document).ready(function () {
70        var swiper = new Swiper('.swiper-container', {
71            pagination: '.swiper-pagination',
72            paginationClickable: true,
73            speed: 500,
74            autoplay: 1000,
75            autoplayDisableOnInteraction: true,
76            loop: true,
77            effect: 'cube',
78            cube: {
79                slideShadows: false,
80                shadow: false,
81            }
82        });
83    });
84</script>
85</body>
86</html>

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

firefox 51.0.1,
google chrome 56.0.2924.87,
opera 43.0.2442.991

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

投稿2017/02/22 07:06

編集2017/02/22 10:16

s8_chu

総合スコア14731

miyoshi_work

2017/02/22 07:24

ご回答ありがとうございます。ご提示いただいたソースコードをそのまま貼り付けてサーバーへのアップ等も試してみたのですがやはり綺麗に動作致しませんでした… firefoxでの挙動も同様に起こってしまいます。 MAC　ver10.11.3 の chrome ver56.0.2924.87 (64-bit) を使用しているのですが何か目立った相違はありますでしょうか？

s8_chu

2017/02/22 07:44

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

miyoshi_work

2017/02/22 08:17 編集

動作環境の追記ありがとうございました。そちらに貼り付けを行ってみましたが同様に問題が発生してしまいました…

s8_chu

2017/02/22 08:25

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

miyoshi_work

2017/02/22 09:55 編集

補足にてキャプチャを追記いたしました。書いてある通りコードはご提示いただいたものになります。また、追加で確認しましたがiphone6sでも同じような動作になります…

s8_chu

2017/02/22 10:16

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

miyoshi_work

2017/02/22 10:55

ご丁寧にありがとうございます。キャッシュのクリアを試し、確認したのですが、やはり私の方で提示したキャプチャのような動作になってしまいました。ただ、windows7で確認したところs8_chu様のキャプチャのようにキレイに動いたので、 MAC OSの問題のようです… 関係があるのかないのかわかりかねるのですが、 MAC OSでも、スライダーの数を2,4と偶数にしたところ問題なく動作しました。またもう少し調べて何も進展ないようでしたらBAとさせていただきます。ありがとうございました！

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