【ニュースティッカー】トップページに新着記事を数件表示したい

2024/9/29

新着記事を数件かつ省スペース化で表示したいとの依頼を受け、ニュースティッカーをjQueryで実装しました。今回は工数削減のために、jQueryのプラグイン、「bxslider」を使用して作成いたしました。

実装が想像よりも容易だったため、紹介いたしました。

1 bxsliderとは
2 bxsliderの実装手順
3 bxsliderのデモ

bxsliderとは

jQuery Content Slider

stevenwanderski/bxslider-4: Responsive jQuery content slider

jQueryをベースにしたスライダーライブラリで、記事や画像、コンテンツをスライド形式で表示する機能を簡単に実装できます。レスポンシブ対応しており、カルーセル形式のスライド表示やフェードイン・フェードアウトのエフェクトも設定可能です。

bxsliderの実装手順

①ファイルの読み込み

モーダル実装に必要なファイルは3種類です。CDNで用意されているので、以下をHTMLの任意の箇所に記述しましょう。

<!-- CDN bxslider CSS --> 
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">

<!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- CDN bxslider jQuery --> 
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

②HTMLの特定の位置に記事を設置

表示させたい場所に、記事を設置

<!-- 設置したい箇所にhtmlを記述 --> 
<ul class="bxslider">
  <li>最新記事1</li>
  <li>最新記事2</li>
  <li>最新記事3</li>
</ul>

③JavaScriptファイルに記述

JavaScriptを記述します。

(function () {   
 $(".bxslider").bxSlider({
      mode: "vertical", // スライドの動き
      auto: "true", // 自動スライド
      controls: false,
      touchEnabled: false,
      pager: false,
    });
})();