用途
新着
履歴
分類

jQuery カルーセル

jQuery カルーセル
画像を横にアニメーションさせて複数の画像を表示させるサンプルです。

カルーセルとは、直訳すると「回転木馬」でコンテンツや写真を、クリックやフリックでスライドさせる表現です。

いろいろな作者が作ったものがありますが、今回は slick というカルーセルの表現でかなり万能な機能を持ったjQueryプラグインをご紹介します。

実装のサンプルコードはこちら

<script type="text/javascript" src="/js/jquery/plugins/slick/slick.js"></script>
<link rel="stylesheet" type="text/css" href="/js/jquery/plugins/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/js/jquery/plugins/slick/slick-theme.css"/>

<div class="demo_stage">
<h1>クリックして次へ(スワイプ可能)</h1>
<div class="your-class none">
  <div class="demo_item color1">content 1</div>
  <div class="demo_item color2">content 2</div>
  <div class="demo_item color3">content 3</div>
</div>
</div>

<script>
$(document).ready(function(){
	$('.your-class').slick();
});
</script>

サンプルは以下のリンクから遷移します。

公開 2019-07-29 20:55:59
このページの二次元コード
jQuery カルーセル

人気のサンプル

search -  category -  about
© 2024 kipure
Top