実現したいこと
画像ではないスライドを2枚をslickでレスポンシブに対応するように2枚ずつスライドできるように実装したい
発生している問題・分からないこと
PCサイズだと問題ないが、画面サイズを880px以下した際にスライドが途中で切れてしまう形になってしまう。
880px以下の画面でもスライドサイズが自動で縮小して、2スライド分が収まっているようにコーディングしたい。
該当のソースコード
HTML
1 <section class="introductionExample"> 2 <div class="introductionInner"> 3 <h2>導入事例</h2> 4 <div class="exampleInner"> 5 <div class="slider"> 6 <div class="slider-item slider-item01"> 7 <h3> 8 慢性的な介護士不足が解決し、 9 <span>優秀な人材</span>が確保できるように! 10 </h3> 11 <p> 12 「CareSend」の登場で、慢性的な介護士不足に頭を抱える問題が解消しました。優秀な介護スタッフが手軽に利用できるため、施設の運営が安定し、利用者のケアに集中できるようになりました。登録型派遣と紹介予定派遣の両方が選択肢として用意され、利用者のニーズに応えることができるのが素晴らしいです。<br> 13 またプラットフォーム上の登録介護士は、私達が普通に採用していたら絶対に巡り会えなかったであろうリーダー人材にも巡り会えましたので、とても満足しています。 14 </p> 15 <img class="case01" src="img/case01.png" alt=""> 16 </div> 17 <div class="slider-item slider-item02"> 18 <h3> 19 急な欠員補充から<span>正社員雇用</span>に繋がり、大変助かっています。 20 </h3> 21 <p> 22 「CareSend」に急なニーズでも対応可能な介護士さんが登録されていることは、本当に心強かったです。その中でも、派遣していただいた介護士さんはとても素晴らしく、紹介予定派遣を経て正社員として採用することになりました。当該介護士の存在は施設全体にとって大きな価値を持っています。<br> 23 今後も積極的に正社員登用を考えておりますので、良い介護士に恵まれることを祈りつつ、利用をさせていただきます。 24 </p> 25 <img class="case02" src="img/case02.png" alt=""> 26 </div> 27 <div class="slider-item slider-item03"> 28 <h3> 29 <span>ケアの質が向上!</span> CareSendで利用者満足度も上昇! 30 </h3> 31 <p> 32 当施設では、長らく介護士不足に悩まされてきました。ある日、急な欠員が発生し、<br> 33 困り果てていた時に、CareSendを利用することにしました。登録型派遣で急遽派遣してもらった介護士は、驚くほどのプロ意識と思いやりを持ち、施設内での業務をスムーズにこなしてくれました。その後、彼女は紹介予定派遣を経て正式に採用され、施設の一員として活躍しています。彼女の尽力により、施設の雰囲気は一変し、利用者の満足度も大幅に向上しました。 34 </p> 35 <img class="case03" src="img/case03.png" alt=""> 36 </div> 37 <div class="slider-item slider-item04"> 38 <h3> 39 <span>派遣介護士の質</span>が高く、とても驚きました。 40 </h3> 41 <p> 42 私たちの施設は、長年にわたり正社員だけで運営してきました。派遣の利用は考えたこともありませんでしたが、ある日、急な人手不足に悩まされ、"CareSend"を試してみることにしました。派遣された介護士は、私たちの期待をはるかに超える素晴らしい仕事ぶりでした。プロ意識や親切さに感動し、施設内の雰囲気が一変しました。<br> 43 私たちは派遣介護士の活用に新たな可能性を見出し、今後は更にその先の「採用」につなげていきたく思っています。 44 </p> 45 <img class="case04" src="img/case04.png" alt=""> 46 </div> 47 </div> 48 </div> 49 </div> 50 </section>
CSS
1.introductionExample { 2 width: 100%; 3 background-color: #FFFFFF; 4 .introductionInner { 5 max-width: 1024px; 6 height: 664px; 7 margin: 0 auto; 8 h2 { 9 font-size: clamp(1.5rem, 1.312rem + 0.72vw, 2rem); 10 text-align: center; 11 margin-top: 96px; 12 } 13 .exampleInner { 14 width: 100%; 15 margin: 73px 0 49px; 16 .slider { 17 width: 100%; 18 height: auto; 19 padding: 0 72px; 20 display: flex; 21 .slick-list { 22 padding: 20px; 23 width: 950px; 24 margin: -20px; 25 } 26 .slider-item { 27 width: 405px; 28 height: 488px; 29 margin: 0 35px; 30 padding: 32px 20px 0; 31 border-radius: 30px 0px 30px 0px; 32 box-shadow: 0px 5px 8px 3px #33333340; 33 position: relative; 34 h3 { 35 font-size: clamp(1.125rem, 0.984rem + 0.54vw, 1.5rem); 36 line-height: 1.8; 37 span { 38 color: #007FC6; 39 } 40 } 41 p { 42 font-size: clamp(0.75rem, 0.703rem + 0.18vw, 0.875rem); 43 line-height: 1.8; 44 font-weight: 400; 45 padding: 24px 0 119px; 46 } 47 .case01 { 48 width: 164px; 49 height: 64px; 50 } 51 .case02 { 52 width: 64px; 53 height: 64px; 54 } 55 .case03 { 56 width: 81px; 57 height: 81px; 58 } 59 .case04 { 60 width: 164px; 61 height: 65px; 62 } 63 img { 64 position: absolute; 65 left: 20px; 66 bottom: 20px; 67 } 68 } 69 .slick-prev,.slick-next { 70 position: absolute;/*絶対配置にする*/ 71 z-index: 3; 72 top: 46.5%; 73 height: 34px; 74 width: 34px; 75 } 76 .slick-prev { 77 left:1.8%; 78 img { 79 width: 34px; 80 height: 34px; 81 } 82 } 83 .slick-next { 84 right:1.8%; 85 img { 86 width: 34px; 87 height: 34px; 88 } 89 } 90 } 91 } 92 } 93}
JQuery
1 $('.slider').slick({ 2 autoplay:false, 3 infinite: true, 4 variableWidth: true, 5 slidesToShow: 2, 6 slidesToScroll: 2, 7 prevArrow: '<div class="slick-prev"><img src="img/arrow-01.png"></div>',//矢印部分PreviewのHTMLを変更 8 nextArrow: '<div class="slick-next"><img src="img/arrow-02.png"></div>',//矢印部分NextのHTMLを変更 9 });
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
スライドが切れる現象を解消できませんでした。
補足
特になし
![guest](/img/icon/icnUserSample.jpg)
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。