jQuery Slickスライダーの活用例コピペ可能サンプル

Posted on by

jQuery Slickスライダーは、レスポンシブで柔軟なウェブサイトのスライダーを簡単に実装できる人気のプラグインです。この記事では、Slickスライダーを活用したさまざまなサンプルを紹介し、ウェブサイトに動的な要素を加えるインスピレーションを提供します。

実際のスライダー

1枚表示（スライド）

HTML

<div class="represent_slick01">
    <div class="slick-img">
      <img
        src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg"
        alt=""
      />
    </div>
    <div class="slick-img">
      <img
        src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg"
        alt=""
      />
    </div>
    <div class="slick-img">
      <img
        src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg"
        alt=""
      />
    </div>
</div>

javascript


$(function () {
  $(".represent_slick01").slick({
    autoplay: true,
    dots: true,
  });
});

実際のサンプル

無限ループスライダー

HTML

<div class="represent_slick02">
    <div class="slick-img">
      <img
        src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg"
        alt=""
      />
    </div>
    <div class="slick-img">
      <img
        src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg"
        alt=""
      />
    </div>
    <div class="slick-img">
      <img
        src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg"
        alt=""
      />
    </div>
<div class="slick-img">
      <img
        src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg"
        alt=""
      />
    </div>
<div class="slick-img">
      <img
        src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg"
        alt=""
      />
    </div>
<div class="slick-img">
      <img
        src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg"
        alt=""
      />
    </div>
</div>

javascript

$(function () {
    $(".represent_slick02").slick({
        autoplay: true,
        autoplaySpeed: 0,
        speed: 5000,
        cssEase: 'linear',
        slidesToShow: 3,
        swipe: false,
        pauseOnFocus: false, 
        pauseOnHover: false,
        arrows: false,
    });
});

実際のサンプル

左右の画像を「透過」

HTML


<div class="represent_slick03">
    <div class="represent_slick03__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg" alt="スリックスライダーサンプル"></div>
    <div class="represent_slick03__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg" alt="スリックスライダーサンプル"></div>
    <div class="represent_slick03__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg" alt="スリックスライダーサンプル"></div>
    <div class="represent_slick03__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg" alt="スリックスライダーサンプル"></div>
</div>

css


  
  .represent_slick03 {
    width: 100%;
    max-width: 800px;
    margin: 30px auto;
  }
  @media screen and (max-width: 800px) {
    .represent_slick03 {
      margin: 5% auto;
    }
  }
  
  .represent_slick03__item {
    margin-right: 5px;
    margin-left: 5px;
  }
  
  .represent_slick03__item img {
    height: auto;
    width: 100%;
    opacity: 0.4;
    transition: opacity 0.5s;
  }
  
  .represent_slick03__item.slick-center img {
    opacity: 1;
  }

javascript

$(function () {
    $(".represent_slick03").slick({
        autoplay: true,
        centerMode: true, 
        centerPadding: '0px',
        slidesToShow: 3,
        dots: true,
        arrows: false,
    });
});

実際のサンプル

スリックスライダーサンプル
スリックスライダーサンプル
スリックスライダーサンプル
スリックスライダーサンプル

左右の画像縮小

HTML


<div class="represent_slick04">
    <div class="represent_slick04__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg" alt="スリックスライダーサンプル"></div>
    <div class="represent_slick04__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg" alt="スリックスライダーサンプル"></div>
    <div class="represent_slick04__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg" alt="スリックスライダーサンプル"></div>
    <div class="represent_slick04__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg" alt="スリックスライダーサンプル"></div>
</div>

css

.represent_slick04 {
  width: 100%;
  max-width: 800px;
  margin: 30px auto;
}
@media screen and (max-width: 800px) {
  .represent_slick04 {
    margin: 5% auto;
  }
}

.represent_slick04__item {
  margin-right: 5px;
  margin-left: 5px;
}

.represent_slick04__item img {
    height: auto;
    width: 100%;
    transform: scale(.7);
    transition: transform .5s; 
}

.represent_slick04__item.slick-center img {
    transform: scale(1);
}

javascript

$(function () {
    $(".represent_slick04").slick({
        autoplay: true,
        centerMode: true, 
        centerPadding: '0px',
        slidesToShow: 3,
        dots: true,
        arrows: false,
    });
});

実際のサンプル

スリックスライダーサンプル
スリックスライダーサンプル
スリックスライダーサンプル
スリックスライダーサンプル

2つのスライダーを連動

HTML

<div class="represent_slick05">
    <div class="represent_slick05__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg" alt="スリックスライダーサンプル"></div>
    <div class="represent_slick05__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg" alt="スリックスライダーサンプル"></div>
    <div class="represent_slick05__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg" alt="スリックスライダーサンプル"></div>
    <div class="represent_slick05__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg" alt="スリックスライダーサンプル"></div>
</div>
<div class="represent_slick05_2">
    <div class="represent_slick052__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg" alt="スリックスライダーサンプル"></div>
    <div class="represent_slick052__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg" alt="スリックスライダーサンプル"></div>
    <div class="represent_slick052__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg" alt="スリックスライダーサンプル"></div>
    <div class="represent_slick052__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg" alt="スリックスライダーサンプル"></div>
</div>

css

.represent_slick05 {
    width: 100%;
    max-width: 500px;
    margin: 15px auto;
    @include breakpoint(500px) {
        margin: 5% auto;
    }
}

.represent_slick05__item {
    margin-right: 5px;
    margin-left: 5px;
}

.represent_slick05__item img {
    height: auto;
    width: 100%;
}

.represent_slick052 {
    width: 100%;
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
    @include breakpoint(500px) {
        margin: 5% auto;
    }
}

.represent_slick052__item {
    margin-right: 5px;
    margin-left: 5px;
}

.represent_slick052__item img {
    height: auto;
    width: 100%;
}

.slick-prev:before, .slick-next:before {
    color: #000066;
}

javascript

$(function () {
    $(".represent_slick05").slick({
        autoplay: true, 
        arrows: false, 
        asNavFor: ".represent_slick05_2",
    });
});

$(function () {
    $(".represent_slick05_2").slick({
        slidesToShow: 3,
        asNavFor: ".represent_slick05",
        focusOnSelect: true,
    });
});

実際のサンプル

スリックスライダーサンプル
スリックスライダーサンプル
スリックスライダーサンプル
スリックスライダーサンプル
スリックスライダーサンプル
スリックスライダーサンプル
スリックスライダーサンプル
スリックスライダーサンプル

左右が少し見えるスライド

HTML

<div class="represent_slick06">
    <div class="represent_slick06__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg" alt="スリックスライダーサンプル"></div>
    <div class="represent_slick06__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg" alt="スリックスライダーサンプル"></div>
    <div class="represent_slick06__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg" alt="スリックスライダーサンプル"></div>
    <div class="represent_slick06__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg" alt="スリックスライダーサンプル"></div>
</div>

css

.represent_slick06 {
    width: 100%;
    max-width: 500px;
    margin: 15px auto;
    position: relative;
    @include breakpoint(500px) {
        margin: 5% auto;
    }
}

.represent_slick06__item {
    margin-right: 5px;
    margin-left: 5px;
}

.represent_slick06__item img {
    height: auto;
    width: 100%;
}


.represent_slick06 button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}

javascript

$(function () {
    $(".represent_slick06").slick({
        arrows: false,
        autoplay: true,
        centerMode: true,
        centerPadding: "20%",
        dots: true,
    });
});

実際のサンプル

スリックスライダーサンプル
スリックスライダーサンプル
スリックスライダーサンプル
スリックスライダーサンプル

ズームしながらフェード切り替え

HTML

<div class="represent_slick07">
    <div class="represent_slick07__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg" alt="スリックスライダーサンプル"></div>
    <div class="represent_slick07__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg" alt="スリックスライダーサンプル"></div>
    <div class="represent_slick07__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg" alt="スリックスライダーサンプル"></div>
    <div class="represent_slick07__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample.jpg" alt="スリックスライダーサンプル"></div>
</div>

css

.represent_slick07 {
    width: 100%;
    max-width: 500px;
    margin: 15px auto;
    overflow: hidden; 
    @include breakpoint(500px) {
        margin: 5% auto;
    }
}

.represent_slick07__item {
    margin-right: 5px;
    margin-left: 5px;
}

.represent_slick07__item img {
    height: auto;
    width: 100%;
}


.add-anime {
    animation: zoom-anime 10s linear 0s normal both;
}

@keyframes zoom-anime {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.5); 
    }
}

javascript

$(function () {
    $(".represent_slick07")
    .on("init", function () {
        $('.slick-slide[data-slick-index="0"]').addClass("add-anime");
    })
    .slick({
        fade: true,
        arrows: false,
        autoplay: true,
        speed: 2000,
        autoplaySpeed: 3000,
        pauseOnFocus: false,
        pauseOnHover: false,
    })
    .on({
        beforeChange: function (event, slick, currentSlide, nextSlide) {
            $(".slick-slide", this).eq(nextSlide).addClass("add-anime");
            $(".slick-slide", this).eq(currentSlide).addClass("remove-anime");
        },
        afterChange: function () {
            $(".remove-anime", this).removeClass(
                "remove-anime add-anime"
            );
        },
    });
});

実際のサンプル

スリックスライダーサンプル
スリックスライダーサンプル
スリックスライダーサンプル
スリックスライダーサンプル

最後のボックス