自動生成ページ(CMS)にスライドショーを実装する方法を解説!②~jQuery編~

こんにちは、ワニエです。
前回に引き続き、今回の記事ではスライドショー機能をjQueryと呼ばれるJavaScriptのプラグインを使ったスライドショー機能の実装方法を解説いたします。

※本記事に関しては、e-shopsカートSのサポート窓口にお問い合わせいただきましてもご回答出来ませんので、予めご了承のうえ、ショップ様の自己責任のもとご利用くださいm(_ _)m

jQueryを使ったスライドショーは、ある程度のHTMLやCSS、JavaScriptの知識があればWebサイトのイメージにあわせてデザインを調整が可能です。

ちなみに導入するとこんな感じで表示されます↓

スライドショーの実装方法

jQueryを使ったスライドショーは、あいにくHTMLだけで実装することは出来ません・・・
「bxSlider」というjQuery プラグインを利用しますが、初心者でも比較的簡単に設置していただくことができます。


まずは、「bxSlider」の本体ファイルを以下サイトからダウンロードします。

bxSlider:ダウンロード

「jquery.bxslider.zip」というzipフォルダをダウンロードしたら解凍してください。
解凍したフォルダの中にはいくつかのファイルがありますが、今回はその中の「jquery.bxslider.css」と「jquery.bxslider.js」と「imagesフォルダ」 の3つを使用します。

この3つをレンタルサーバ上の任意の場所(パス)にそのままアップロードします。

※e-shopsカートSでご提供しているレンタルサーバの場合には「httpsdocs」というフォルダの中に上記3つをアップしてください


次にe-shopsカートS管理画面を開き、「ページ自動生成」>「その他」タブを開き、PCサイトの入力欄にスライドショーを読み込むための記述を行います。今回は「自動でスライド」「コンテンツの横幅は640px」をオプションを追加しました。

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=”js/jquery.bxslider.js”></script>
<link href=”css/jquery.bxslider.css” rel=”stylesheet” />
<script type=”text/javascript”>
jQuery(document).ready(function($){
$(‘.bxslider’).bxSlider({
auto: true,
});
});
</script>

※上のコード2,3行目の「jquery.bxslider.js」と「jquery.bxslider.css」のパスは、ご自身がファイルを置いた場所のパスと同じにしてください。ここが正しくない場合、スライドショーは動作しません。e-shopsカートSでご提供のレンタルサーバの場合は、「httpdocs」の中に直接アップしていれば上記と同じ記述で大丈夫です。
※『パス』とはファイルを置いた場所を指定する文字列のことです。


これでスライドショー機能を表示するためのJQueryの呼び出しが完了です。


次は、メインとなるスライドショーで画像を表示する部分の記述です。

e-shopsカートS管理画面「ページ自動生成」>「PC設定」>「コンテンツ設定」を開き、画面最下部にある「自由項目」にて「自由項目追加」ボタンをクリックします。

項目名・見出し設定・配置位置を適宜入力、選択し「内容」には以下のように記述して「設定する」をクリックします。

<ul class=”bxslider”>
<li><img src=”/images/image01.jpg”></li>
<li><img src=”/images/image02.jpg”></li>
<li><img src=”/images/image02.jpg”></li>
</ul>

※ここで読み込む画像については、管理画面にアップロードした画像URLや前述のレンタルサーバにアップロードしたimagesフォルダにスライドさせたい画像をアップロードし、そのパスを指定する形でもOKです。(今回は後者のレンタルサーバにアップした画像を使います)

また、スライドさせたい画像はご自由に追加したり減らしてもOKです。

最後に自由項目に登録したスライドショーを表示させるために、「コンテンツ配置」タブを開きます。

今回は、メインコンテンツのトップ部分に表示したいので”メイン(上部)”の「追加」ボタンをクリックしてから、右側に表示された配置可能なコンテンツから「スライドショー」をクリックして「コンテンツ設置を保存する」ボタンをクリックします。



以上でJQueryを利用したスライドショーの実装が完了です!
どうですか?少しHTMLやCSSの知識はいるものの思ったよりも簡単ですよね☆

こちらのサンプルショップでも実際にJQueryを利用したスライドショーの表示例をご確認いただけます。

https://shop.kanmi-ya.com/(CMSサンプルショップ)

bxsliderでは、細かいデザイン部分は全て「jquery.bxslider.css」で制御されていますので、微調整を行いたい場合には、ブラウザの「要素を検証」機能で各スタイルのクラス名を確認し、調整してみてくださいね。

※本記事に関しては、e-shopsカートSのサポート窓口にお問い合わせいただきましてもご回答出来ませんので、予めご了承のうえ、ショップ様の自己責任のもとご利用くださいm(_ _)m

カテゴリー: 自動生成ページ構築