質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

1131閲覧

slickで初めと終わりの矢印ナビを調整したい

hkozuru

総合スコア0

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/12/17 06:09

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
お世話になります。
現在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/ツールのバージョンなど) 特になし

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問