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

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>

 

 

後は自分好みにカスタムしてオリジナルのスライドショーを作ってみてください。

 

現場から以上です!

1141