javascript スライドカルーセル表示

Posted 2021-05-03

<ul class="slick-box">
    <li><img src="images/img_main01.jpg" alt="の画像"></li>
    <li><img src="images/img_main02.jpg" alt="の画像"></li>
    <li><img src="images/img_main03.jpg" alt="の画像"></li>
    <li><img src="images/img_main04.jpg" alt="の画像"></li>
</ul>

.slider-arrow {
  font-size: 5rem !important;
  opacity: 0.7;
  position: absolute;
  top: 50%;
  height: 36px;
  margin-top: -18px;  /* 高さの半分だけネガティブマージン */
  color: #fff;
  line-height: 36px;
  font-size: 28px;
  cursor: pointer;
  z-index: 10;  /* 重要 */
}

.slider-arrow:hover {
	opacity: 1;
} 

.slider-prev {
  left: 30px;
}
.slider-next {
  right: 30px;
}

// トップメイン画像スクロール
$(function() {
    $('.slick-box').slick({
          infinite: true,
          slidesToShow: 1,
          centerMode: true, //要素を中央寄せ
          centerPadding:'10vw', //両サイドの見えている部分のサイズ
		  variableWidth:true,
          autoplay:true, //自動再生
		  autoplaySpeed: 3000,
		  speed: 1000,
		  arrows: true,
  prevArrow: '<div class="slider-arrow slider-prev fa fa-angle-left"></div>',
  nextArrow: '<div class="slider-arrow slider-next fa fa-angle-right"></div>',
		  responsive: [{
               breakpoint: 480,
                    settings: {
                         centerPadding:'10vw',
               }
          }
		]
	});
});