Tweet

Pocket

slickの基本設定コードになります。

javascript

$('.slick-slider').slick({
	// アクセシビリティ。左右ボタンで画像の切り替えをできるかどうか
	accessibility: true,

	// 自動再生。trueで自動再生される。
	autoplay: true,

	// 自動再生で切り替えをする時間
	autoplaySpeed: 6000,

	// 自動再生や左右の矢印でスライドするスピード
	speed: 400,

	// 自動再生時にスライドのエリアにマウスオンで一時停止するかどうか
	pauseOnHover: true,

	// 自動再生時にドットにマウスオンで一時停止するかどうか
	pauseOnDotsHover: true,

	// 画像下のドット（ページ送り）を表示
	dots: false,

	// ドラッグができるかどうか
	draggable: true,

	// 切り替え時のフェードイン設定。trueでon
	fade: false,

	// 左右の次へ、前へボタンを表示するかどうか
	arrows: true,

	// 無限スクロールにするかどうか。最後の画像の次は最初の画像が表示される。
	infinite: true,

	// 最初のスライダーの位置
	initialSlide: 2,

	// スライドのエリアにマウスオーバーしている間、自動再生を止めるかどうか。
	pauseOnHover: true,

	// スライドのエリアに画像がいくつ表示されるかを指定
	slidesToShow: 4,

	// 一度にスライドする数
	slidesToScroll: 1,

	// タッチスワイプに対応するかどうか
	swipe: true,

	// 表示中の画像を中央へ
	centerMode: true,

	centerPadding: '107px',

	// スライドの画像クリックで、アクティブのスライダーを切り替えるか
	focusOnSelect: true,

	// レスポンシブの設定
	responsive: [
		{
			breakpoint: 768,
				settings: {
					// 最初のスライダーの位置
					initialSlide: 1,

					// スライドのエリアに画像がいくつ表示されるかを指定
					slidesToShow: 2,

					centerPadding: '10%'
				}
		}
	]
});