3枚セットスライダー

  • スティッククリーナースタンド メインカラー:オークホワイト スティッククリーナースタンド STANNA short スタンナショート
  • リクライニングソファー/ローソファー 【ブラウン タスク生地】 肘付き ポケットコイル入り コンパクト 『coroli』
  • カントリー調 マガジンラック 【オープン収納タイプ】 シャビーホワイト 天然木 軽量 Rural ルーラル 【完成品】
  • 吸音パネル/防音フェルトボード 【40×40cm /ブルー同色30枚セット】布貼りタイプ/45度カット Felmenon EXceed
  • クロスフォーニューヨーク Dancing Stoneシリーズ Fairy Drop ペンダント NYP-602
  • A&D(エーアンドデイ)口鼻両用 超音波温熱吸入器 ホットシャワー5 UN-135-P (ピンク)

シングルスライダー

  • image01
  • image02
  • image03
3枚セットでは、もしもの商品画像の幅300pxの画像をそのまま、シングルスライダーでは、幅600pxの商品説明画像を高さ200pxにトリミングして使用しています。

準備

スライダープラグイン「slick」の公式サイトよりダウンロードします。

http://kenwheeler.github.io/slick/#go-get-it

ダウンロードしたZIPファイルを解凍(展開)します。

その中からフォルダ「slick」にある以下のファイルを利用します。
ajax-loader.gif
slick-theme.css
slick.css
slick.js
slick.min.js

CSSファイル

ショップできすぎくんでは、slickそのままでは様々な不具合が生じます。
ちょうど良く表示されるようにカスタマイズしたCSSファイルを用意します。
 
my-slick.cssなどの名前をつけて作ります。
 
◆CSSの記述◆
@charset "UTF-8";
.slider{
	margin:  30px auto;
	width: 88%;
}
.slider img{
	height: auto;
	width: 100%;
	padding: 0 5px;
	box-sizing: border-box;
}
/*slick setting*/
.slick-prev:before,
.slick-next:before{
	color: #000;
	font-weight: bold;
}
.slick-prev:before {/*前へボタン*/
	content: "<";
}
.slick-next:before{/*次へボタン*/
	content: ">";
}
.slick-dots li button:before {/*ドットインジケーター*/
	content: "・";
	font-size:48px !important;
}

JavaScriptファイル

スライドスピードや画像下の黒丸ボタンを表示させるなどを指定するJavaScriptを作ります。
 画像が入れ替わるスピードは「autoplaySpeed」で指定します。

ここでは5000ミリ秒(5秒)と指定しました。好みのスピードに変更してもOKです。

my-slick.jsなどの名前をつけます。

◆JavaScriptの記述◆
3枚セットスリック用
$(function() {
	$('.multiple-items').slick({
		infinite: true,
		slidesToShow: 3,
		slidesToScroll: 3,
		autoplay:true,
		autoplaySpeed:5000,
		dots:true,
	});
});

シングルスリック用
$(function() {
	$('.single-item').slick({
		autoplay:true,
		autoplaySpeed:5000,
		dots:true,
	});	
});	

必要ファイルをサーバーにアップロードする

「slick」の公式サイトよりダウンロードしたファイルと、ショップできすぎくん用にカスタマイズしたCSSとJavaScriptファイルを以下の階層構造になるようアップロードします。

アップロードファイル構成図

HTMLを記述

ショップできすぎくんでスライダーを表示させたいページで、「ドラッグ&ドロップで要素を追加」機能から「自由ボックス」を追加。

HTMLソースの編集モードで、以下の構文を入力します。

3枚セットでは、3の倍数枚を使いましょう。シングルスライダーでは、枚数に制限はありません。
3枚セットスライダーとシングルスライダーでは<ul>タグに指定するclass名(赤文字の部分)が異なります。


◆3枚セットスライダー◆
<ul class="multiple-items slider">
<li><a href="リンク先URL"><img src="画像URL" alt="商品名"></a></li>
<li><a href="リンク先URL"><img src="画像URL" alt="商品名"></a></li>
<li><a href="リンク先URL"><img src="画像URL" alt="商品名"></a></li>
<li><a href="リンク先URL"><img src="画像URL" alt="商品名"></a></li>
<li><a href="リンク先URL"><img src="画像URL" alt="商品名"></a></li>
<li><a href="リンク先URL"><img src="画像URL" alt="商品名"></a></li>
</ul>

◆シングルスライダー◆
<ul class="single-items slider">
<li><a href="リンク先URL"><img src="画像URL" alt="商品名"></a></li>
<li><a href="リンク先URL"><img src="画像URL" alt="商品名"></a></li>
<li><a href="リンク先URL"><img src="画像URL" alt="商品名"></a></li>
<li><a href="リンク先URL"><img src="画像URL" alt="商品名"></a></li>
<li><a href="リンク先URL"><img src="画像URL" alt="商品名"></a></li>
</ul>

ショップデザイン設定

ショップできすぎくんのショップデザイン設定で、アップロードしたCSSファイル・JavaScriptファイルを読み込ませます。併せて、基本となるjQueryも読み込ませる必要があります。

指定する順番は以下の順で行うこと!


◆ショップデザイン設定>拡張設定タブ>オリジナルCSS URL 欄で指定

アップロード先URL/slick/slick-theme.css
アップロード先URL/slick/slick.css
アップロード先URL/my-slick.css


ショップデザイン設定>拡張設定タブ>オリジナルJavaScriptURL

https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
アップロード先URL/slick/slick.min.js
アップロード先URL/my-slick.js

完成

これで完成です。
公開して表示をみてみましょう。

カートに入れる

画像ボックスで設定

自由ボックスで設定

自由ボックス html・css調整

画像を左に配置指定


支払い方法
領収書について

お支払い方法により異なります。

詳しくは「支払い方法について」

配送
配送料について
配送料は一回のご注文につき、一律540円となっております。
ご注文合計金額が税込8,000円以上の場合および送料無料商品を含む場合は、送料無料でお届けいたします。
ただし、沖縄、離島など一部の地域は別途送料が必要となる場合があります。
その際は、ご注文確認画面に注意書きが表示されます。
※一部直送商品はご注文後にメールで連絡させていただく場合がございます。
>> 詳しくは「配送について」

支払い方法について

領収書について

お支払い方法により異なります。

詳しくは「支払い方法について」をご覧ください。

配送について

配送料について
配送料は一回のご注文につき、一律540円となっております。ご注文商品代金8,000円以上、および送料無料商品を含む場合は、株式会社もしもが送料を負担いたします。
ただし、沖縄、離島など一部の地域は別途送料が必要となる場合があります。その際は、ご注文確認画面に注意書きが表示されます。
※一部直送商品はご注文後にメールで連絡させていただく場合がございます。
配送業者について
商品の配送は、佐川急便に委託しております。一部の直送商品につきましてはヤマト運輸等、他の配送業者がお届けする場合がございます。
商品は「株式会社もしも」名義でのお届けとなります。一部の直送商品につきましては、「株式会社もしも」名義ではなく、卸業者名、メーカー名になっている場合がございます。あらかじめご了承ください。
配送業者の都合上、お届けができない地域がございます。その際はご注文をキャンセルさせていただきますのでご了承ください。
※ただいま海外への出荷は承っておりません。
出荷目安について
出荷目安はご注文から出荷手配が完了するまでの期間となります。こちらは、土日祝日や年末年始、お盆休みを含まない営業日で計算しております。
※出荷目安が「即日出荷」の商品は、平日・土曜日の14:00までの注文分を当日中に出荷いたします。日曜・祝日・年末年始・お盆の場合は翌営業日に出荷いたします。