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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

Q&A

解決済

1回答

2287閲覧

【Slick】左右に見える画像に墨かけをしたい

hisakiitou

総合スコア16

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

0グッド

0クリップ

投稿2019/03/10 18:50

現在スライダーのslickを導入してのページを作っているのですが、下記画像の様に、左右に見える画像に墨かけをしたく考えています。

イメージ説明

他の方の質問で、網掛けをするというものがあったのですが、回答のやりとりの工程に理解が追いつけず、参照できませんでした。
https://teratail.com/questions/88589

どなたか御知恵をお貸しいただけませんでしょうか?お願いいたします。

html

1 <div id="menu"> 2 <ul class="menucontent"> 3 <li> 4 <div class="slider_sc1pic"> 5 <img src="img/slider/ebi-trapanese.jpg" width="100%" height="auto" style=""> 6 </div> 7 <div class="slider_sc1txt"> 8 <h1></h1> 9 <h2></h2> 10 <a href="#">詳しくはコチラ</a> 11 </div> 12 </li> 13 <li> 14 <div class="slider_sc2pic"> 15 <img src="img/slider/agnello-asparagi.jpg" width="100%" height="auto"> 16 </div> 17 <div class="slider_sc2txt"> 18 <h1></h1> 19 <h2></h2> 20 <a href="#">詳しくはコチラ</a> 21 </div> 22 </li> 23 <li> 24 <div class="slider_sc3pic"> 25 <img src="img/slider/bruno-martins-442161-unsplash.jpg" width="100%" height="auto"> 26 </div> 27 <div class="slider_sc3txt"> 28 <h1></h1> 29 <h2>B</h2> 30 <a href="#"></a> 31</li> 32 </ul> 33 </div> 34 </div> 35 36 37<script src="js/slick.js"></script> 38<script> 39$('.menucontent').slick({ 40 accessibility : true, 41 arrow : true, 42 autoplay: true, 43 infinite: true, 44 draggable: true, 45 touchMove: true, 46 centerMode:true, 47 variableWidth:true, 48 autoplaySpeed:10000, 49 prevArrow: '<img src="img/prev_arrow.svg" button class="slide-arrow prev-arrow"></button>', 50 nextArrow: '<img src="img/next_arrow.svg" button class="slide-arrow next-arrow"></button>', 51 responsive:[{ 52 breakpoint: 1920,settings: { //601px~1024pxでは3画像表示 53 slidesToShow: 1, 54 slidesToScroll: 1, 55 centerPadding: '15%', 56 } 57 }, 58 { 59 breakpoint: 1280,settings: { //481px~600pxでは2画像表示 60 slidesToShow: 1, 61 slidesToScroll: 1, 62 centerPadding: '20%', 63 } 64 }, 65 { 66 breakpoint: 600,settings: { //481px~600pxでは2画像表示 67 slidesToShow: 1, 68 slidesToScroll: 1, 69 centerPadding: '20%', 70 } 71 }, 72 { 73 breakpoint: 480,settings: {//480px以下では1画像表示 74 slidesToShow: 1, 75 slidesToScroll: 1, 76 centerPadding: '15%', 77 } 78 }] 79}); 80</script> 81 82 83

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

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

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

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

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

guest

回答1

0

ベストアンサー

中央の要素に.slick-centerクラスが付く(全体には.slick-slideが付く)ので、それを利用して処理すればよいです。

【slick - the last carousel you'll ever need】
http://kenwheeler.github.io/slick/

ちなみにslick はul/li要素での利用を想定されていないため、HTMLの文法的におかしな構造になるのでdiv要素で処理するほうがよいと思います。

投稿2019/03/10 18:58

kei344

総合スコア69366

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

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

hisakiitou

2019/03/11 01:37

返信遅れました。お忙しい中ご返答頂きありがとうございます。 .slick-centerがつく、という事が初めて知りました。 その上で、質問の中に入れた網掛けの方のやり方で試したところ、うまくいきました!ありがとうございます!! bxsliderを使っていた名残から、<li>で構成していました。<div>に書き換え直しも致しました。細かくご指摘いただきありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問