前提・実現したいこと
ここに質問の内容を詳しく書いてください。
お世話になります。
現在slickのライブラリを使用した、カルーセルを作成しております。
やりたいことですが、infinite:false;で、始点と終点の
矢印ナビを調整したいです。
お手数ですが、どなたかご教授よろしくお願いいたします。
発生している問題・エラーメッセージ
ループ無しでcenterModeにした場合、1枚目の左隣が空くので、
initialSlide:1;に設定すると、初めの矢印ナビのopacityが効きません。
エラーメッセージ
### 該当のソースコード ```ここに言語名を入力: ソースコード -html- <div class="slider"> <div class="slider-img"> <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog03.jpg" /> </div> <div class="slider-img"> <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog02.jpg" /> </div> <div class="slider-img"> <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog03.jpg" /> </div> <div class="slider-img"> <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog02.jpg" /> </div> <div class="slider-img"> <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog03.jpg" /> </div> <div class="slider-img"> <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog02.jpg" /> </div> <div class="slider-img"> <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog03.jpg" /> </div> <div class="slider-img"> <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog02.jpg" /> </div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> -css- .slider { position:relative; margin: 30px auto; max-width: 800px; width: 100%; height:250px; } .slider-img { margin: 0 5px; } .slider-img img { height: auto; width: 100%; } .swiper-button-next { position: absolute; top:1%; right:5%; } .swiper-button-prev { position: absolute; top:1%; right:12%; } .swiper-button-next, .swiper-button-prev { background: rgba(0, 0, 0, 1); width: 50px; height: 50px; border-radius:25px; cursor:pointer; z-index: 2; } .swiper-button-next:hover, .swiper-button-prev:hover { background: rgba(0, 0, 0, 0.8); } .swiper-button-next:after, .swiper-button-prev:after { display: none; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { background-image: url("data:image/svg+xml,%0A%3Csvg width='9px' height='16px' viewBox='0 0 9 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='chevron-right' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cpath d='M8.674805,7.066406 L1.924805,0.316406 C1.696288,0.105468 1.432619,0 1.133789,0 C0.834959,0 0.57129,0.105468 0.342773,0.316406 C0.114257,0.544923 0,0.808592 0,1.107422 C0,1.406251 0.114257,1.669921 0.342773,1.898438 L6.301758,7.857422 L0.342773,13.816406 C0.114257,14.044923 0,14.308592 0,14.607422 C0,14.906251 0.114257,15.169921 0.342773,15.398438 C0.465821,15.521485 0.584472,15.609375 0.69873,15.662109 C0.812989,15.714844 0.958007,15.741211 1.133789,15.741211 C1.309571,15.741211 1.454589,15.714844 1.568848,15.662109 C1.683106,15.609375 1.801757,15.521485 1.924805,15.398438 L8.674805,8.648438 C8.903321,8.419921 9.017578,8.156251 9.017578,7.857422 C9.017578,7.558592 8.903321,7.294923 8.674805,7.066406 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center center !important; width: 50px !important; height: 50px !important; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { background-image: url("data:image/svg+xml,%0A%3Csvg width='9px' height='16px' viewBox='0 0 9 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='chevron-right' transform='translate(4.508789, 7.870605) rotate(-180.000000) translate(-4.508789, -7.870605) translate(-0.000000, -0.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cpath d='M8.674805,7.066406 L1.924805,0.316406 C1.696288,0.105468 1.432619,0 1.133789,0 C0.834959,0 0.57129,0.105468 0.342773,0.316406 C0.114257,0.544923 0,0.808592 0,1.107422 C0,1.406251 0.114257,1.669921 0.342773,1.898438 L6.301758,7.857422 L0.342773,13.816406 C0.114257,14.044923 0,14.308592 0,14.607422 C0,14.906251 0.114257,15.169921 0.342773,15.398438 C0.465821,15.521485 0.584472,15.609375 0.69873,15.662109 C0.812989,15.714844 0.958007,15.741211 1.133789,15.741211 C1.309571,15.741211 1.454589,15.714844 1.568848,15.662109 C1.683106,15.609375 1.801757,15.521485 1.924805,15.398438 L8.674805,8.648438 C8.903321,8.419921 9.017578,8.156251 9.017578,7.857422 C9.017578,7.558592 8.903321,7.294923 8.674805,7.066406 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center center !important; width: 50px !important; height: 50px !important; } /*矢印ナビのループ無し調整*/ .swiper-button-prev.slick-disabled, .swiper-button-next.slick-disabled { opacity:0.3; } .swiper-button-prev.slick-disabled:before, .swiper-button-next.slick-disabled:before { opacity:1; } -js- $(function () { $(".slider").slick({ autoplay: false, adaptiveHeight: true, centerMode: true, centerPadding: "8%", dots: false, slidesToShow: 3, infinite:false, initialSlide: 1, prevArrow: $('.swiper-button-prev'), nextArrow: $('.swiper-button-next'), }); }); ### 試したこと 特になし ### 補足情報(FW/ツールのバージョンなど) 特になし
あなたの回答
tips
プレビュー