COMBO SLIDERの設定

プラグインの使用方法

使用する場合はcomboslider.csscomboslider.jsを読み込み、ターゲットを指定して下さい。
$('要素を指定').comboslider();

オプションの使用方法

各種オプションを使用する場合は.comboslider()にオプションを指定して下さい。
$('要素を指定').comboslider({
	option名:,
	option名:
});
HTMLに直接記入することが可能なオプションもあります。

スライドさせるアイテムを囲う要素に設定

  • slide-type="スライドタイプを指定"
  • pager-type="ページャータイプを指定"
  • slide-delay="スライドの待機時間を指定"
  • slide-speed="スライドするスピードを指定"

スライドさせる要素に設定

  • cs-thumbnail="サムネイル表示の場合srcを記入"
  • slide-delay="アイテム毎の待機時間を指定"
  • slide-url="リンク先を指定"
  • slide-url-target="リンクtargetがある場合は指定"
  • slide-src="スライドアイテムのsrcを指定"
  • slide-alt="画像の場合はaltをここに記入"
  • video-thumbnail="動画の場合同じサイズのサムネイルのsrcを記入"

複数をまとめて起動する場合

$('要素を指定').each(function(){
	$(this).comboslider();
});

レスポンシブで切り替える場合

$('要素を指定').comboslider({
	responsive:[
	{
		breakpoints:'(min-width:1100px)',//切り替えるポイントを記入
		breakpointsettings:{
			option名:,
			option名:
		}
	},{
		breakpoints:'screen and (min-width:768px) and ( max-width:1099px)',//切り替えるポイントを記入
		breakpointsettings:{
			option名:,
			option名:
		}
	},{
		breakpoints:'screen and (max-width:767px)',//切り替えるポイントを記入
		breakpointsettings:{
			option名:,
			option名:
		}
	}]*/
});
default
  • //スライダーのタイプ'slide','slide-3d','slide-vertical','slide-vertical-3d','fade','fade-zoom','fade-circle'
    slideType:'slide'
  • //スライドアイテムのclass
    itemcode:'cs-'
  • //スライドアイテムの中央表示true=中央表示ON,false=中央表示OFF
    centermode:true
  • //自動再生true=自動再生ON,false=自動再生OFF
    autoplay:true
  • //スライドの繰り返しtrue=最終までスライドしたら最初のアイテムに戻る,false=最終までスライドして停止
    slideloop:true
  • //最後のアイテムの後に最初のアイテム、最初のアイテムの前に最後のアイテムが表示true=インフィニティON,false=インフィニティOFF
    infinite:true
  • //スライドアイテムの間隔半角数字で記入
    slidemargin:false
  • //スライダーの余白半角数字で記入
    sliderpadding:false
  • //最初に表示するアイテム半角数字で記入
    startposition:1
  • //一度に表示するアイテムの数半角数字で記入
    viewcount:1
  • //一度にスライドするアイテムの数半角数字で記入
    slidecount:1
  • //アイテム総数とアイテム位置の表示true=スライドカウントON,false=スライドカウントOFF
    slidecountview:true
  • //前後にスライドさせるボタンを使用するtrue=ボタンを使用,false=ボタンを不使用
    arrows:true
  • //前に戻るボタン
    prevArrow:'<div class="comboslider-prev"><div><span>Prev</span></div></div>'
  • //次に進むボタン
    nextArrow:'<div class="comboslider-next"><div><span>Next</span></div></div>'
  • //ページャーの使用true=ページャーを表示,false=ページャーを非表示
    pager:true
  • //ページャーアイテムのclass
    pagercode:'cs-'
  • //ページャーのタイプ'dots','timebar','number','thumbnail'
    pagerType:'dots'
  • //サムネイルのタイプ'box'=divの背景にサムネイル画像,'img'=イメージタグを使用
    thumbnailType:'box'
  • //サムネイルのサイズ元の大きさに対する%を半角数字で記入
    thumbnailSize:20
  • //サムネイルのスクエアモードサムネイルを正方形で表示する
    thumbnailsquare:false
  • //サムネイルの間隔半角数字で記入
    thumbnailmargin:false
  • //サムネイルの中央表示true=中央表示ON,false=中央表示OFF
    thumbnailcentermode:true
  • //サムネイルのインフィニティtrue=インフィニティON,false=インフィニティOFF
    thumbnailinfinite:true
  • //スライダーの再生停止ボタンの使用true=ボタンを表示,false=ボタンを非表示
    control:true
  • //再生ボタン
    controlplay:'<div class="comboslider-play"><span>Play</span></div>'
  • //停止ボタン
    controlpause:'<div class="comboslider-pause"><span>Pause</span></div>'
  • //マウスオーバーでストップtrue=使用する,false=使用しない
    hoverpause:false
  • //マウス及びスワイプでの操作true=使用する,false=使用しない
    swipe:true
  • //スライドするスピード半角数字で記入
    speed:500
  • //スライドの待機時間を指定半角数字で記入
    delay:6000
  • //easingのタイプ
    easing:'swing'
  • //レスポンシブの仕様
    responsive:null
slideTypeの設定/全7種
  • slide
    横にスライドし、高さが統一されます。

    jQueryのみ

    $('要素を指定').comboslider({
    	slideType:'slide'
    });

    example

    $('ul').comboslider();
    <ul slide-type="slide">...</ul>
  • slide-3d
    横に3Dスライドし、高さが統一されます。

    jQueryのみ

    $('要素を指定').comboslider({
    	slideType:'slide-3d'
    });

    example

    $('ul').comboslider();
    <ul slide-type="slide-3d">...</ul>
  • slide-vertical
    縦にスライドし、幅が統一されます。

    jQueryのみ

    $('要素を指定').comboslider({
    	slideType:'slide-vertical'
    });

    example

    $('ul').comboslider();
    <ul slide-type="slide-vertical">...</ul>
  • slide-vertical-3d
    縦に3Dスライドし、幅が統一されます。

    jQueryのみ

    $('要素を指定').comboslider({
    	slideType:'slide-vertical-3d'
    });

    example

    $('ul').comboslider();
    <ul slide-type="slide-vertical-3d">...</ul>
  • fade
    フェードし、一番小さいアイテムサイズに統一されます。

    jQueryのみ

    $('要素を指定').comboslider({
    	slideType:'fade'
    });

    example

    $('ul').comboslider();
    <ul slide-type="fade">...</ul>
  • fade-zoom
    ズームフェードし、一番小さいアイテムサイズに統一されます。

    jQueryのみ

    $('要素を指定').comboslider({
    	slideType:'fade-zoom'
    });

    example

    $('ul').comboslider();
    <ul slide-type="fade-zoom">...</ul>
  • fade-circle
    サークル状にアイテムが切り替わり、一番小さいアイテムサイズに統一されます。

    jQueryのみ

    $('要素を指定').comboslider({
    	slideType:'fade-circle'
    });

    example

    $('ul').comboslider();
    <ul slide-type="fade-circle">...</ul>

example

slideType:'slide'
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06
slideType:'slide-3d'
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06
slideType:'slide-vertical'
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06
slideType:'slide-vertical-3d'
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06
slideType:'fade'
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06
slideType:'fade-zoom'
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06
slideType:'fade-circle'
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06
pagerTypeの設定/全4種
  • dots
    dotで表示されます。

    jQueryのみ

    $('要素を指定').comboslider({
    	pagerType:'dots'
    });

    example

    $('ul').comboslider();
    <ul slide-type="dots">...</ul>
  • timebar
    待機時間をバーで表示します。

    jQueryのみ

    $('要素を指定').comboslider({
    	pagerType:'timebar'
    });

    example

    $('ul').comboslider();
    <ul slide-type="timebar">...</ul>
  • number
    スライドアイテムの番号が表示されます。

    jQueryのみ

    $('要素を指定').comboslider({
    	pagerType:'number'
    });

    example

    $('ul').comboslider();
    <ul slide-type="number">...</ul>
  • thumbnail
    指定されたサムネイルが表示されます。

    jQueryのみ

    $('要素を指定').comboslider({
    	pagerType:'thumbnail'
    });

    example

    $('ul').comboslider();
    <ul slide-type="thumbnail">...</ul>

example

pagerType:'dots'
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06
pagerType:'timebar'
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06
pagerType:'number'
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06
pagerType:'thumbnail'
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06
thumbnailの設定
  • thumbnailType
    [box],[img]の2種類があり、boxは背景で表示し、imgはimgタグにて表示します。※defaultはbox

    default

    $('要素を指定').comboslider({
    	thumbnailType:'box'
    });

    example

    $('要素を指定').comboslider({
    	slidecountview:false,
    	arrows:false,
    	control:false,
    	thumbnailType:'img'
    });
  • thumbnailSize
    サムネイルのサイズが指定でき、元のスライダーアイテムのサイズに対する%で設定します。※defaultは20

    default

    $('要素を指定').comboslider({
    	thumbnailSize:20
    });

    example

    $('要素を指定').comboslider({
    	slidecountview:false,
    	arrows:false,
    	control:false,
    	thumbnailSize:50
    });
  • thumbnailsquare
    サムネイルを正方形にて表示する事ができます。※defaultはfalse

    default

    $('要素を指定').comboslider({
    	thumbnailsquare:false
    });

    example

    $('要素を指定').comboslider({
    	slidecountview:false,
    	arrows:false,
    	control:false,
    	thumbnailSize:50,
    	thumbnailsquare:true
    });
  • thumbnailmargin
    サムネイルの左右の間隔を設定できます。※defaultはfalse

    default

    $('要素を指定').comboslider({
    	thumbnailmargin:false
    });

    example

    $('要素を指定').comboslider({
    	slidecountview:false,
    	arrows:false,
    	control:false,
    	thumbnailSize:50,
    	thumbnailmargin:5
    });
  • thumbnailcentermode
    サムネイルを中央表示にできます。※defaultはtrue

    default

    $('要素を指定').comboslider({
    	thumbnailcentermode:true
    });

    example

    $('要素を指定').comboslider({
    	slidecountview:false,
    	arrows:false,
    	control:false,
    	thumbnailSize:50,
    	thumbnailcentermode:false
    });
  • thumbnailinfinite
    最後のサムネイルの後に最初のサムネイル、最初のサムネイルの前に最後のサムネイルを表示する事がます。※defaultはtrue

    default

    $('要素を指定').comboslider({
    	thumbnailinfinite:true
    });

    example

    $('要素を指定').comboslider({
    	slidecountview:false,
    	arrows:false,
    	control:false,
    	thumbnailSize:50,
    	thumbnailinfinite:false
    });

example

thumbnailType:'box'
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06
thumbnailType:'img'
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06
thumbnailSize:50
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06
thumbnailsquare:true
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06
thumbnailmargin:5
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06
thumbnailcentermode:false
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06
thumbnailinfinite:false
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06
その他optionの設定
  • centermode
    スライダーの中央にアイテムを表示します。※defaultはtrue

    default

    $('要素を指定').comboslider({
    	centermode:true
    });

    example

    $('要素を指定').comboslider({
    	slidecountview:false,
    	arrows:false,
    	control:false,
    	pager:false,
    	centermode:false
    });
  • autoplay
    スライダーが自動でスライドします。※defaultはtrue

    default

    $('要素を指定').comboslider({
    	autoplay:true
    });

    example

    $('要素を指定').comboslider({
    	slidecountview:false,
    	arrows:false,
    	control:false,
    	pager:false,
    	autoplay:false
    });
  • slideloop
    最終のアイテム以降もスライドを繰り返します。※defaultはtrue

    default

    $('要素を指定').comboslider({
    	slideloop:true
    });

    example

    $('要素を指定').comboslider({
    	slidecountview:false,
    	arrows:false,
    	control:false,
    	pager:false,
    	slideloop:false
    });
  • infinite
    最後のアイテムの後に最初のアイテム、最初のアイテムの前に最後のアイテムが表示されます。※defaultはtrue

    default

    $('要素を指定').comboslider({
    	infinite:true
    });

    example

    $('要素を指定').comboslider({
    	slidecountview:false,
    	arrows:false,
    	control:false,
    	pager:false,
    	infinite:false
    });
  • slidemargin
    スライドアイテムの間隔を設定できます。※defaultはfalse

    default

    $('要素を指定').comboslider({
    	slidemargin:false
    });

    example

    $('要素を指定').comboslider({
    	slidecountview:false,
    	arrows:false,
    	control:false,
    	pager:false,
    	slidemargin:10
    });
  • startposition
    最初に表示するアイテムを指定できます。※defaultは1

    default

    $('要素を指定').comboslider({
    	startposition:1
    });

    example

    $('要素を指定').comboslider({
    	slidecountview:false,
    	arrows:false,
    	control:false,
    	thumbnailSize:50,
    	startposition:6
    });
  • viewcount/slidecount
    一度に表示するアイテムの数、一度にスライドするアイテムの数を指定する事がます。※defaultは1

    default

    $('要素を指定').comboslider({
    	viewcount:1,
    	slidecount:1
    });

    example

    $('要素を指定').comboslider({
    	slidecountview:false,
    	arrows:false,
    	control:false,
    	thumbnailSize:50,
    	viewcount:2,
    	slidecount:2
    });

example

centermode:false
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06
autoplay:false
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06
slideloop:false
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06
infinite:false
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06
slidemargin:10
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06
startposition:6
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06
viewcount:2/slidecount:2
  • slideritem-01
  • slideritem-02
  • slideritem-03
  • slideritem-04
  • slideritem-05
  • slideritem-06