コンテンツスライダー、カルーセルスライダーにもなるjQueryプラグイン「bxSlider」

コンテンツスライダー、カルーセルスライダーにもなるjQueryプラグイン「bxSlider」

2013.03.27
新しいverがいつの間にか公開されていたようで、新しく記事にしました。
jQueryプラグイン「bxSlider」がレスポンシブ対応になってた

webサイトのメインビジュアルやバナーの箇所で使われる便利なプラグインを紹介します。

プラグインのダウンロードはこちらから

こちらのいいところはカルーセルスライダーになったり、コンテンツスライダーになったり、どちらでも使用できる所です。

まずはDEMOをご覧下さい

基本的な使い方としては、


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.bxSlider.js'></script>

1 2	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type='text/javascript' src='js/jquery.bxSlider.js'></script>

を読み込み、head部分の箇所に


<script type="text/javascript">
  $(document).ready(function(){
    $('#slider').bxSlider();
  });
</script>

$(document).ready(function(){

$('#slider').bxSlider();

後ほどでてきますが、イージング効果を使用したい場合、
さらに、


<script type="text/javascript" src="js/jquery.easing.1.3.js">
</script>

1 2	<script type="text/javascript" src="js/jquery.easing.1.3.js"> </script>

を読み込む必要があります。


<ul id="slider1">
  <li>Slide one content</li>
  <li>Slide two content</li>
  <li>Slide three content</li>
  <li>And so on...</li>
</ul>

<li>Slide one content</li>

<li>Slide two content</li>

<li>Slide three content</li>

div要素でも可能なので、
コンテンツ毎動かすことができます。

DEMOの説明をさせていただきます。

1.ページャー、戻る・次へボタン付き
まず、head部分、

2.サムネイルのページャー付き,イージング効果

イージング効果については、 http://gsgd.co.uk/sandbox/jquery/easing/で動きが見れます。

3.カルーセルスライダー

Author Profile

SassのMixinを使って、単位、幅の値を自動的に計算

Webアクセシビリティの義務化について調べてみました

ZenStack を使用してデータベーススキーマを作成する

認証が必要な Cloud Run サービスにアクセスする方法まとめ

Company

Our Solutions

Support

News

Blog

コンテンツスライダー、カルーセルスライダーにもなるjQueryプラグイン「bxSlider」

1.ページャー、戻る・次へボタン付き
まず、head部分、

2.サムネイルのページャー付き,イージング効果

3.カルーセルスライダー

合わせて読みたい

カテゴリーから探す

年別から見る

コンテンツスライダー、カルーセルスライダーにもなるjQueryプラグイン「bxSlider」

1.ページャー、戻る・次へボタン付き まず、head部分、

2.サムネイルのページャー付き,イージング効果

3.カルーセルスライダー

合わせて読みたい

2024/05/02

2024/04/19

2024/04/05

2024/03/15

1.ページャー、戻る・次へボタン付き
まず、head部分、