Q&A
いつもお世話になります。よろしくお願いします。
■お手本サイト：https://rinn.co.jp/meow/
■やりたいこと：
①画面読み込み直後の左右のスライド（Journal/products)に対して、
opacity:0.5をかけたい。
試した事⇨ scriptにて以下記載してるものの、反応なし。
（スライド時のopacityは動く様になっており、画面読み込み直後が効かない。）
②お手本サイトの様に、左右のスライドをやや見切れさせたい。
slideperviewの設定を3以下（例えば2.5）にすると見切れるものの、
センター位置がずれてしまう、、センター位置はズレず、左右を同じ比率で見切れさせたい。
＊headerは割愛
html
1<body> 2<main> 3<!-- Swiper START --> 4<div class="swiper-container tittle_slider"> 5<!-- メイン表示部分 --> 6<div class="swiper-wrapper"> 7<!-- 各スライド --> 8<div class="swiper-slide" data-slideno="journal" id="t01">JOURNAL</div> 9<div class="swiper-slide" data-slideno="woof" id="t02">WOOF</div> 10<div class="swiper-slide" data-slideno="aa" id="t03">PRODUCTS</div> 11</div> 12 13</div> 14<!-- Swiper END --> 15<ul id="slide-contents"> 16 <li class="journal">Journalのコンテンツ</li> 17 <li class="woof">WOOFのコンテンツ</li> 18 <li class="aa">Productsのコンテンツ</li> 19</ul> 20 21</main> 22<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 23<script> 24$(document).ready(function(){ 25 $('.t01').css('opacity','0.5'); 26 $('.t03').css('opacity','0.5'); 27}); 28 29var mySwiper = new Swiper('.swiper-container', { 30slidesPerView: 3, 31loop:true, 32pagination: { 33el: '.swiper-pagination', 34type: 'bullets', 35//clickable: true 36} 37}); 38mySwiper.on('transitionEnd', function () { 39 console.log('slide changed'); 40 $(".swiper-slide").addClass("opa"); 41 $(".swiper-slide-next").removeClass("opa"); 42 var slideNo = $(".swiper-slide-next").attr("data-slideno"); 43 console.log(slideNo); 44 $("#slide-contents li").fadeOut(); 45 $("."+slideNo).fadeIn(); 46 }); 47</script> 48</body> 49 50ーーCSSーー 51/* swiperのスタイル */ 52.swiper-wrapper { 53width: 100%; 54height: 250px; 55margin-top: 76px; 56font-size: 3.5em; 57letter-spacing: 10px; 58} 59/* 全スライド共通スタイル */ 60.swiper-slide { 61color: #ffffff; 62width: 100%; 63height: 100%; 64text-align: center; 65line-height: 250px; 66color: black; 67} 68 69#slide-contents li{ 70 display: none; 71} 72.opa{ 73 opacity: 0.4; 74}
回答1件
0
ベストアンサー
とりあえず前後の透明度については。
CSS
1.swiper-slide { 2 opacity: 0.5; 3} 4.swiper-slide.swiper-slide-active { 5 opacity: 1; 6}
中央については、centeredSlides: true,というパラメータがあるのでそれを利用する形になると思います。
【Swiper API】
https://idangero.us/swiper/api/
【Swiper demo】
https://idangero.us/swiper/demos/410-virtual-slides.html
【swiper/410-virtual-slides.html at master · nolimits4web/swiper · GitHub】
https://github.com/nolimits4web/Swiper/blob/master/demos/410-virtual-slides.html
投稿2018/10/29 05:42
総合スコア69400
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/29 07:20