2017-05-27 4 views
0

イムは私は文書の準備ができてdivを追加すると、私のdivのテキストは変更されません。変換、データ・インデックス、遷移期間などの準備が、私のデフォルトのスタイルだけthebirdスワイプ例では、静的なdiv要素を取り除く、thebirdスワイプ例を使用して、ドキュメントに動的なdiv要素を追加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Swiper demo</title> 
 
    
 
<link rel="stylesheet" href="http://idangero.us/swiper/dist/css/swiper.min.css"> 
 
<script src="js/jquery-1.11.2.min.js"></script> 
 

 
<style>body{background:#eee;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;color:#000;margin:0;padding:0;}.swiper-container{width:500px;height:300px;margin:20px auto;}.swiper-slide{text-align:center;font-size:18px;background:#fff;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;}</style> 
 
</head> 
 
<body> 
 
    
 
<div class="swiper-container"> 
 
<div class="swiper-wrapper"> 
 

 
</div> 
 
</div> 
 
    
 
<script src="http://idangero.us/swiper/dist/js/swiper.min.js"></script> 
 
    
 
\t <script> 
 
\t 
 
\t \t var swiper = new Swiper('.swiper-container'); 
 
\t \t \t \t 
 
\t \t $(document).ready(function(e){ 
 
\t \t \t for(var i=0; i<10; i++){ 
 
\t \t \t \t var element = document.createElement('div'); 
 
\t \t \t \t element.className = 'swiper-slide'; 
 
\t \t \t \t element.innerHTML = 'slide '+i; 
 
\t \t \t \t $('.swiper-wrapper').append(element); 
 
\t \t \t } 
 
\t \t \t var swiper = new Swiper('.swiper-container'); \t \t \t \t 
 
\t 
 
\t \t }); 
 
\t 
 
    </script> 
 
</body> 
 
</html>

を適用していません

ありがとうございました。ここで

+1

あなたのstyle.cssはどこですか?とswipe.js – HTCom

+0

@ HTCom返信ありがとうございます。私は私の質問にstyle.cssとswipe.jsコードを入れました。事前に感謝 –

+1

あなたはより簡単にテストするバージョンを作るためにstackoverflowコードスニペットを使用できますか?コードがいっぱいではありません。たとえば、htmlコードです。私はボディ、HTMLの閉じるタグを見ることができません... – HTCom

答えて

1

は前/次

$(document).ready(function(e){ 
    for (var i=0; i<10; i++) 
     $('.swiper-wrapper').append('<div class=\'swiper-slide\'><b>Abc '+i+'</b></div>'); 
    var swiper = new Swiper('.swiper-container'); 

    swiper.on('onSlideNextStart', function(e){ 
     alert('next'); 
    }); 
    swiper.on('onSlidePrevStart', function(e){ 
     alert('back'); 
    }); 
}); 

を検出するためにあなたは、このライブラリのドキュメントを読みましたでしょうか?慎重にお読みくださいhttp://idangero.us/swiper/api/#.WSlw5miGPSF

+0

私はswipeleft/swiperight私はその前/次のdivテキストの警告が必要なときにこのコードで。 –

+0

もし私が次のdivテキスト警告とswiperightを必要とするなら、前のdivテキストが必要です。 –

+1

前/次を検出するためのコードを読んでください – HTCom

関連する問題