お世話になっております。
jQueryプラグイン【swiper.js】を使用したスライドショーを作成しております。
既存のスライダーから、画像とテキストのエフェクトをバラバラにしたいと思い、上記サンプルを作成いたしました。
このサンプルのアニメーションで、
上の画像をフリック(動かす)したら、テキストが同時に動くようにしたいです。
コードは上記サンプルのものと同様です
html
1 2<head> 3 <meta charset="utf-8" /> 4 <meta name="viewport" content="width=device-width, initial-scale=1"> 5 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 6 7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.css"> 8<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css"> 9 10<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.js"></script> 11<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script> 12 13</head> 14 15 <body> 16 <div class="swiper-container" id="slide"> 17 <div class="swiper-wrapper"> 18 <div class="swiper-slide"><img src="http://placehold.jp/480x360.png" alt=""/></div> 19 <div class="swiper-slide"><img src="http://placehold.jp/480x360.png" alt=""/></div> 20 <div class="swiper-slide"><img src="http://placehold.jp/480x360.png" alt=""/></div> 21 </div> 22 <div class="slide_info"> 23 <div class="swiper-wrapper"> 24 <p class="swiper-slide"> 25 <a href="#" class="text01">テキスト上</a> 26 <a href="#" class="text02">テキスト下</a> 27 </p> 28 <p class="swiper-slide"> 29 <a href="#" class="text01">テキスト上</a> 30 <a href="#" class="text02">テキスト下</a> 31 </p> 32 <p class="swiper-slide"> 33 <a href="#" class="text01">テキスト上</a> 34 <a href="#" class="text02">テキスト下</a> 35 </p> 36 </div> 37 <div class="swiper-pagination"></div> 38 </div> 39 </div> 40</body> 41 42
css
1#slide { 2 padding: 0; 3 background: none repeat scroll 0 0 #fff; 4 max-width: 495px; 5 margin: 0 auto; 6 text-align: center; 7} 8#slide img { 9 width: 100%; 10 max-width: 480px; 11} 12 13.slide_info { 14 padding: 10px 0 30px; 15} 16.slide_info a{ 17 display: block; 18}
javascript
1 $(document).ready(function() { 2 3 var swiper = new Swiper('.swiper-container', { 4 pagination: '.swiper-pagination', 5 paginationClickable: true, 6 parallax: true, 7 speed: 900, 8 autoplay: 6000, 9 effect: 'flip', 10 updateOnImagesReady:true, 11 loop: true, 12 autoplay: 2500, 13 autoplayDisableOnInteraction: false 14 }); 15 16 var swiper = new Swiper('.slide_info', { 17 parallax: true, 18 speed: 900, 19 autoplay: 6000, 20 loop: true, 21 autoplay: 2500, 22 autoplayDisableOnInteraction: false 23 }); 24 25 });
時間ができた際に自分で試したサンプルあげようと思います
ご教授頂けますと幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。