swiper.jsでのスライド遷移がie10で次スライドへ遷移しない

Question

いつもお世話になっています。

swiper.jsを使用して、
スライド型のコンテンツを作成しています。
http://idangero.us/swiper/#.V-JBEqKLSdQ
クイズ型のコンテンツです。

win7のie10でのみでの現象ですが、次のスライドへ遷移が出来ないです。

次スライドへの遷移ボタン
（<div class="swiper-button-next2">~</div）
を複数設置しているのですが、
下記コードで

<!--問題選択-->

次ページへの遷移ボタン箇所はクリックできず機能しないですが

<!--ページ移動ボタン-->

でのボタンはクリックができて機能する状態です。

考えられる原因が分かればご教示頂きたいです。

<div class="swiper-slide">
           <img src="./common/images/02.png" alt="スライドタイトル" />
 <!--問題文-->
           <div class="q_list">
                <div class="swiper-button-next2"><img src="./common/images/02_1.png" alt="問題1" /></div>
                  <div class="swiper-button-next2"><img src="./common/images/02_2.png" alt="問題2" /></div>
                    <div class="swiper-button-next2"><img src="./common/images/02_3.png" alt="問題3" /></div>
           </div>
     <!--問題文-->
<!--ページ移動ボタン-->
           <div class="btn_box_area anser2">
           <div class="btn_box">
              <div class="swiper-button-prev2"><img src="./common/images/back.png" alt="戻る" /></div>
             <div class="swiper-button-next2"><img src="./common/images/answer.png" alt="正解" /></div>
           </div>
           </div>
      <!--ページ移動ボタン-->
         </div>

またカスタマイズしているjsは下記です。

var swiper = new Swiper('.swiper-container', {
  nextButton: '.swiper-button-next2',
  prevButton: '.swiper-button-prev2',
  speed: 800,
  simulateTouch: true,
  paginationClickable: true,
  watchActiveIndex: true,
      loop: true,
  effect: 'fade',
  fade: {
crossFade: true

※気になるのが、
ie10の場合

swiper-slider-active
のタグが
常に一番始めのスライドに付いてる点です。
通常では、
表示されているスライドにのみ
swiper-slider-active
の表記が付くはずです

Answer 1

どういう仕上がりなのか分かりませんが、こういう感じなのではないですか？

<div class="swiper-container">
	<img src="./common/images/02.png" alt="スライドタイトル" />
	<!--問題文-->
	<div class="q_list">
		<div class="swiper-slide"><img src="./common/images/02_1.png" alt="問題1" /></div>
		<div class="swiper-slide"><img src="./common/images/02_2.png" alt="問題2" /></div>
		<div class="swiper-slide"><img src="./common/images/02_3.png" alt="問題3" /></div>
	</div>
	<!--問題文-->
	<!--ページ移動ボタン-->
	<div class="btn_box_area anser2">
		<div class="btn_box">
			<div class="swiper-button-prev2"><img src="./common/images/back.png" alt="戻る" /></div>
			<div class="swiper-button-next2"><img src="./common/images/answer.png" alt="正解" /></div>
		</div>
	</div>
	<!--ページ移動ボタン-->
</div>

Answer 2

<img src="./common/images/02.png" alt="スライドタイトル />
```↓
```HTML
<img src="./common/images/02.png" alt="スライドタイトル" />

とか？

Comments

[joe_tomo]

ご指摘ありがとうございます！失礼しました！
altのクウォーテーションを修正したですが、機能しませんでした。
お手数をおかけいたしますが、よろしくお願いします。

[kei344]

.swiper-container内の全てのこういうミスのチェックと、エラーが出ていないかの確認をされてはいかがでしょうか。エラーは開発者ツールの「コンソール」に出ると思います。

【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

Answer 3

<img src="./common/images/02.png" alt="スライドタイトル />

のalt属性の閉じのクウォーテーションがないので、
ここを追加して再度試していただいても良いですか？

Comments

[joe_tomo]

ご指摘ありがとうございます！失礼しました！
altのクウォーテーションを修正したですが、機能しませんでした。
お手数をおかけいたしますが、よろしくお願いします。