使っているプラグイン→ http://idangero.us/swiper/
上記のようなスライドを作りたいと思っています。
作る際はこちらの質問を参考にしました。https://teratail.com/questions/57296
html
1<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.min.css 2"> 3 <script type="text/javascript" src=“https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.min.js"></script> 4<div class="container"> 5<div class="swiper-container"> 6<div class="swiper-wrapper"> 7 <div class="swiper-slide"> 8 <a href="#a"><img src="https://placehold.jp/800x300.png" alt=""></a> 9 </div> 10 <div class="swiper-slide"> 11 <a href="#a"><img src="https://placehold.jp/800x300.png" alt=""></a> 12 </div> 13 <div class="swiper-slide"> 14 <a href="#a"><img src="https://placehold.jp/800x300.png" alt=""></a> 15 </div> 16</div> 17 <div class="swiper-button-prev"></div> 18 <div class="swiper-button-next"></div> 19</div> 20</div>
js
1var swiper = new Swiper('.swiper-container', { 2 3 slidesPerView: 3, 4 autoplay: 5000, 5 speed: 1000, 6 loop: true, 7 pagination: '.swiper-pagination', 8 9 // ナビゲーションボタン 10 nextButton: '.swiper-button-next', 11 prevButton: '.swiper-button-prev', 12 13 // 1スライドごとの余白 14 spaceBetween: 20 15 16});
css
1.container { 2 overflow: hidden; 3 width: 100%; 4} 5.swiper-container { 6 width: 150%; 7 margin: 0 -25%; 8} 9.swiper-button-prev { 10 left: calc(10px + 25%); 11} 12.swiper-button-next { 13 right: calc(10px + 25%); 14} 15.swiper-slide { 16 pointer-events: none; 17 opacity: .5; 18 -webkit-transition: opacity .5s; 19 -moz-transition: opacity .5s; 20 -ms-transition: opacity .5s; 21 -o-transition: opacity .5s; 22 transition: opacity .5s; 23} 24.swiper-slide-next { 25 pointer-events: auto; 26 opacity: 1; 27} 28.swiper-slide img { 29 width: 100%; 30}
やりたいこと --- ・中央に画像が来た際に右下に画像ロゴを表示させたい(ロゴをオーバーレイさせたい) ・レスポンシブに対応。 z-indexで最上面に表示することは出来ましたが、他のプラグインlity.jsを利用している為うまくできなかったこと。 position: absoluteで位置設定で表示は出来るがレスポンシブに出来なかった為こちらで相談させていただきました。 恐れ入りますが、ご教示の程よろしくお願いいたします。 追記:作ったソースになります。https://jsfiddle.net/gn333d67/2/
回答2件
あなたの回答
tips
プレビュー