###前提・実現したいこと
slickを使ったスライドショーで画像と文字も一緒に動かしたいです。
もう一つ現状左方向に向かってスライドしているのですがそれを右方向に向かってスライドするようにしたいです
イメージは下の画像のような感じです
html
1<div class="mainVisual"> 2 <div class="mainVisual__slide"> 3 <ul class="mainVisual__slide--item"> 4 <li><img src="img/slide1.jpg"><p class="img1">文化と確信を融合させた「農」の形</p></li> 5 <li><img src="img/slide2.jpg"><p class="img2">半世紀先まで続く「農」をつくり出す</p></li> 6 <li><img src="img/slide3.jpg"><p class="img3">文化と確信を融合させた「農」の形</p></li> 7 </ul> 8 </div> 9</div>
css
1.mainVisual__slide--item img { 2 width: 100%; 3 height: 100vh; 4 position: relative; 5} 6.mainVisual__slide--item p { 7 position: absolute; 8 top: 500px; 9 left: 1400px; 10 font-size: 6rem; 11 color: #fff; 12}
jQuery
1<script type="text/javascript"> 2 $(function() { 3 $('.mainVisual__slide--item').slick({ 4 infinite: true, 5 slidesToShow: 1, 6 centerMode: true, //要素を中央寄せ 7 centerPadding:'100px', //両サイドの見えている部分のサイズ 8 autoplay:true, //自動再生 9 responsive: [{ 10 breakpoint: 10000, 11 settings: { 12 centerMode: false, 13 } 14 }] 15 }); 16 }); 17 </script>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/18 08:02
2017/08/18 08:06
2017/08/18 09:16