#1 jQueryプラグインを実装してみる

プラグインを読み込んで使う

デメリット

① 複数のプラグインを使用している場合、競合（コンフリクト）して機能しない場合がある。
② 便利な半面、余計な機能がついていたりした場合、読み込みが重くなる。
③ 企業サイトの場合、いくら商用フリーだとしても、使わない事が多い。
以上の点から、簡単なサイトで大量なアクセスがない場合には使っても良いですが、そうでない場合に使用するときには注意が必要です。

ライセンスについて

注意しないといけないのは「商用不可」の場合です。この場合は実験用以外には積極的に使わないほうが良いでしょう。 無料の場合は以下のような方法があります。
① MITライセンス
　 かなり自由なライセンス。カスタマイズしたり自分のものにできます。
② GPLライセンス
　 無料ですがライセンスの継承があるため、完全に自分のものにはできません。

ちなみにjQueryはMITライセンスです。

スライダー機能をjQueryプラグインで実装してみる

<link rel="stylesheet" href="./css/slick.css"/>
<link rel="stylesheet" href="./css/slick-theme.css"/>

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="./js/slick.min.js"></script>

<ul class="news__list">
  <li>
    <a href="#">
      <div class="news__list-img">
        <img src="./img/news01.jpg" alt="">
      </div>
      <div class="news__list-txt">
        <dl>
          <dt>夏季休業のお知らせ</dt>
          <dd>Jul 18,2019</dd>
        </dl>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="news__list-img">
        <img src="./img/news02.jpg" alt="">
      </div>
      <div class="news__list-txt">
        <dl>
          <dt>夏季休業のお知らせ</dt>
          <dd>Jul 18,2019</dd>
        </dl>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="news__list-img">
        <img src="./img/news03.jpg" alt="">
      </div>
      <div class="news__list-txt">
        <dl>
          <dt>夏季休業のお知らせ</dt>
          <dd>Jul 18,2019</dd>
        </dl>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="news__list-img">
        <img src="./img/news01.jpg" alt="">
      </div>
      <div class="news__list-txt">
        <dl>
          <dt>夏季休業のお知らせ</dt>
          <dd>Jul 18,2019</dd>
        </dl>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="news__list-img">
        <img src="./img/news02.jpg" alt="">
      </div>
      <div class="news__list-txt">
        <dl>
          <dt>夏季休業のお知らせ</dt>
          <dd>Jul 18,2019</dd>
        </dl>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="news__list-img">
        <img src="./img/news03.jpg" alt="">
      </div>
      <div class="news__list-txt">
        <dl>
          <dt>夏季休業のお知らせ</dt>
          <dd>Jul 18,2019</dd>
        </dl>
      </div>
    </a>
  </li>
</ul>
<div class="news__button">
  <a href="#">MORE</a>
</div>

<ul class="news_list regular slider">

<script>
$(function() {
  $(".regular").slick({
    dots: true,
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 4
  });
});
</script>

.slider {
  width: 80%;
  margin: 100px auto;
}
.slick-slide {
  margin: 0px 20px;
  transition: all ease-in-out .3s;
  opacity: .2;
}
.slick-slide img {
  width: 100%;
}
.slick-prev:before,
.slick-next:before {
  color: black;
}
.slick-active {
  opacity: .5;
}
.slick-current {
  opacity: 1;
}

このような結果になります。

好きな機能をjQueryプラグインで実装してみよう