JavaScript カルーセルスライダー 実装方法【基本と応用】

1年 ago
桜, 春樹
1 minute

jQueryプラグインSlick CarouselやOwl Carouselなどを使用すると、回転木馬のスライドショー効果を実現することができます。これらのプラグインには豊富な設定オプションやAPIメソッドが提供されており、簡単に回転木馬の効果を実現することができます。

Slick Carouselを使用して回転木馬のスライダーを実装したシンプルな例を以下に示します。

  1. jQueryとSlick CarouselのCSSとJSファイルを取り込む
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  1. HTMLの構造
<div class="carousel">
  <div><img src="image1.jpg" alt="Image 1"></div>
  <div><img src="image2.jpg" alt="Image 2"></div>
  <div><img src="image3.jpg" alt="Image 3"></div>
  <!-- 更多图片 -->
</div>
  1. Slick Carouselを初期化します。
$('.carousel').slick({
  slidesToShow: 3, // 显示图片数量
  centerMode: true, // 启用中心模式
  centerPadding: '60px', // 中心图片与边缘图片的间距
  autoplay: true, // 自动播放
  autoplaySpeed: 2000, // 自动播放间隔时间
  responsive: [
    {
      breakpoint: 768, // 响应式断点
      settings: {
        slidesToShow: 2 // 在小屏幕上显示图片数量
      }
    },
    {
      breakpoint: 480, // 响应式断点
      settings: {
        slidesToShow: 1 // 在更小屏幕上显示图片数量
      }
    }
  ]
});

上記の手順に従うことで、シンプルな回転木馬のカルーセル効果を実現することができます。Slick Carouselの設定オプションをカスタマイズして、自分のニーズやデザインに合わせたスライドショーの外観や機能を調整することができます。

bannerAds