Web制作 × AI

【jQuery】スライダー(slick)を扇形にしてループをさせる方法

コーディングテクニックの実装内容

今回はWeb制作でjQueryのプラグインを使用したスライダー(slick)の実装に関する内容です。スライダー(slick)を扇形に表示してループさせるテクニックをご紹介します。
jQueryスライダープラグイン : 「slick」を使用

コーディングテクニックの使いどころ

非常に目立つのでページアクセス時にメインビジュアルへ適用すると効果的です。

実装難易度・必要なスキル

実装所要時間:20分程度
難易度:初心者コーダーでも実装可能

CSS,JavaScriptの記述内容

実装に必要なスクリプトとスタイルはこちらになります。

$(function() {

  var count=0;
  if($('.slider').length){
    var list=$('.slider').html();
    for(i=0;i<10;i++){
      $('.slider').append(list)
    }
  $('.slider').slick({
    autoplay: true,
    autoplaySpeed:1500,
    dots: false,
    infinite: true,
    centerMode: true,
    variableWidth: true,
    pauseOnFocus: false,
    pauseOnHover: false,
    swipe: false,
    arrows:true,
    responsive: [{
      breakpoint: 768,
      settings: {
        slidesToShow: 1,
        centerPadding: 0,
        fade: true
      }
    }]
  });
  $('.slider').on('setPosition', function(){
    if(count==0){
    $('.slick-current').prev().addClass('left');
      $('.left').prev().addClass('left2');
    $('.slick-current').next().addClass('right');
      $('.right').next().addClass('right2');
    }
    count++;
  });
  $('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    next='[data-slick-index='+nextSlide+']';
    $('.slider li').removeClass('right left right2 left2');
    $(next).prev().addClass('left');
      $('.left').prev().addClass('left2');
    $(next).next().addClass('right');
      $('.right').next().addClass('right2');
  });
  }
});

$(window).on('load', function(){
  $(".block").addClass("active");
});
.block {
  opacity: 0;
  height: 500px;
  overflow: hidden;
  margin: 100px auto 0;
  transition: all 1.5s 1s;
}
.block.active {
  opacity: 1;
}
.slider img {
  width: 440px;
}
.slider li {
  margin: 0 70px;
  transition: all 0.4s;
}
.slider li.left {
  margin-top: 10px;
  transform-origin: top right;
  transform: rotate(-7deg);
}
.slider li.left2 {
  margin-top: 100px;
  margin-right: 100px;
  transform-origin: top right;
  transform: rotate(-20deg);
}
.slider li.right {
  margin-top: 10px;
  transform-origin: top left;
  transform: rotate(7deg);
}
.slider li.right2 {
  margin-top: 100px;
  margin-left: 100px;
  transform-origin: top left;
  transform: rotate(20deg);
}

実装のポイント

現在制作中

PR
[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

ChatGPT 120%活用術 [ ChatGPTビジネス研究会 ]
価格:1,390円(税込、送料無料) (2023/5/23時点)


この記事を書いた人(著者情報)

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。

著者画像

スポンサーリンク