ぬえさぶろうのAnimate放送部

スライドショー

解説

slickというスライドショーを実現するJavaScriptライブラリを使い、HTML内の<li>にCSSで指定した背景画像を横にスライドさせる
slick
https:kenwheeler.github.io/slick/

HTML

//スライドショー
    <ul class="slider">
          <li class="slider-item slider-item01"></li>
          <li class="slider-item slider-item02"></li>
          <li class="slider-item slider-item03"></li>
          <li class="slider-item slider-item04"></li>
          <li class="slider-item slider-item05"></li>
          <li class="slider-item slider-item06"></li>
        </ul>

CSS

/* スライドショー07 */
.slider{
    height:50vh;
    position:relative;
    z-index:1;
}
.slider-item01{     
    background:url("../../images/news/slideshow/slide_image01.png");
}
.slider-item02{ 
    background:url("../../images/news/slideshow/slide_image02.png");
}
.slider-item03{ 
    background:url("../../images/news/slideshow/slide_image03.png");
}
.slider-item04{ 
    background:url("../../images/news/slideshow/slide_image04.png");
}
.slider-item05{ 
    background:url("../../images/news/slideshow/slide_image05.png");
}
.slider-item06{ 
    background:url("../../images/news/slideshow/slide_image06.png");
}
.slider-item{
    width:100%;
    height:50vh;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}
.slick-prev,
.slick-next{
    position:absolute;
    z-index:3;
    top:42%;
    cursor:pointer;
    outline:none;
    border-top:2px solid #fff;
    border-right:2px solid #fff;
    width:25px;
    height:25px;
}
.slick-prev{
    left:2.5%;
    transform:rotate(-135deg);
}
.slick-next{
    right:2.5%;
    transform:rotate(45deg);
}
.slick-dots{
    position:relative;
    z-index:3;
    text-align:center;
    margin:-50px 0 0 0;
}
.slick-dots li{
    display:inline-block;
    margin:0 5px;
}
.slick-dots button{
    display:block;
    width:8px;
    height:8px;
    color:transparent;
    outline:none;
    background:#fff;
    border-radius:50%;
}
.slick-dots .slick-active button{
    background:#333;
}

JS

/*スライドショー*/
$('.slider').slick({
    autoplaySpeed:3000,
    speed:1000,
    autoplay:true,
    infinite:true,
    slidesToShow:1,
    slidesToScroll:1,
    arrows:true,
    prevArrow:'<div class="slick-prev"></div>',
    nextArrow:'<div class="slick-next"></div>',
    dots:true,
    pauseOnFocus:false,
    pauseOnhover:false,
    pauseOnDotsHover: false,
});