[jQuery]Slickで自動スライドショー

jQuery

2019.02.18

jQuery
HTML

jQuery

<script src="slick-1.8.1/slick/slick.min.js"></script>
<script>
$(function(){
  $('.slide').slick({
    arrows: false,
    autoplay: true,
    dots: false,
    infinite: true,
    speed: 4000,
    slidesToShow: 5,
    slidesToScroll: 1,
    centerMode: false,
    variableWidth: true,
    cssEase:'linear',
    swipe: false,
    draggable: false,
  });
});
</script>

$(function(){

$('.slide').slick({

arrows: false,

autoplay: true,

dots: false,

infinite: true,

speed: 4000,

slidesToShow: 5,

slidesToScroll: 1,

centerMode: false,

variableWidth: true,

cssEase:'linear',

swipe: false,

draggable: false,

});

</script>

HTML

<link rel="stylesheet" href="slick-1.8.1/slick/slick-theme.css">
<link rel="stylesheet" href="slick-1.8.1/slick/slick.css">

<div class="slide">
  <div class="slide_img" style="background-image:url('slide1.jpg')"></div>
  <div class="slide_img" style="background-image:url('slide2.jpg')"></div>
  <div class="slide_img" style="background-image:url('slide3.jpg')"></div>
  <div class="slide_img" style="background-image:url('slide4.jpg')"></div>
  <div class="slide_img" style="background-image:url('slide5.jpg')"></div>
</div>