2020/08/05 21:31

jQueryで軽量な自作のスライドを作る方法

スライドショーのライブラリは便利で、私もよくslickやswiperやbx等を使ってました。

ただ、やっぱ重いんじゃないかな？とか、ちょっと不安になったりもしますよね。

簡易なタイプのスライダーであれば自作でサクっと作ることもできるので、ぜひチャレンジしてみてください。

便利な機能をモリモリにしようとすると、やはり記述も増えて読込も重くなっていきますので、今回はフェードで切り替わる自作スライドの一例をご紹介します。

※取り合えずjQueryは忘れず読み込んでおきましょう

【html】


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 
<div class="p-top-mainvisual slider-1">
<div class="p-top-mainvisual-img slide" style="background-image: url('img_01.jpg');"></div>
<div class="p-top-mainvisual-img slide" style="background-image: url('img_02.jpg');"></div>
<div class="p-top-mainvisual-img slide" style="background-image: url('img_03.jpg');"></div>
</div>

【css】


<style>
 
.p-top-mainvisual-wrapper {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}
 
.p-top-mainvisual {
display: block;
position: relative;
width: 100%;
height: 100%;
}
 
.p-top-mainvisual-img {
  display: block;
  position: relative;
  padding-top: 56.25%;
  text-align: center;
  margin: 0 auto;
  width: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
position: absolute;
padding-top: 0;
width: 100%;
height: 100vh;
}
 
.slide {
display: none;
position: relative;
width: 100%;
transition: ease 0.3s;
backface-visibility: hidden;
overflow: hidden;
}
.slide.active {
display: block;
transition: ease .4s;
-webkit-animation: slide-anime 15s both 0s ease;
animation: slide-anime 15s both 0s ease;
}
 
@-webkit-keyframes slide-anime {
0% {
opacity: 0;
transform: scale3d(1,1,1) perspective(0);
}
10% {
opacity: 1;
}
100% {
transform: scale3d(1.1,1.1,1.1) perspective(0);
}
}
@keyframes slide-anime {
0% {
opacity: 0;
transform: scale3d(1,1,1) perspective(0);
}
10% {
opacity: 1;
}
100% {
transform: scale3d(1.1,1.1,1.1) perspective(0);
}
}
 
.slider-1 {
overflow: hidden;
}
</style>

【jQuery】


<script>
$(function(){
  var indexCount = $('.slider-1 .slide').length;
  var slideImg = $('.slider-1 .slide');
  var index = 0;
  $(slideImg[index]).addClass('active');
 
  var count = 0;
  var countup = function(){
    count++;
    var id = setTimeout(countup, 1000); //1秒で1カウント
    if(count > 5){ //5秒後処理
      count = 0;
      $(slideImg[index]).removeClass('active');
      index = index + 1;
      if(indexCount - 1 < index){
        index = 0;
      }
      $(slideImg[index]).addClass('active');
    }
  }
countup();
});
</script>