カラーミーテンプレートの画像スライダーをカスタマイズする

Pocket

スライダーのカスタマイズ

カラーミーテンプレートのスライダーについて

こちらで購入できるテンプレートにはBootstrapのカルーセルが使用されています。なので使い方に関してはBootstrapのドキュメントや以下の記事を参考にしてください。

関連記事:Bootstrap3 スライダーとCarouselの簡単な使い方

このページではカラーミーショップのテンプレートで使用する場合のカスタマイズ方法をまとめます。

スライダーに画像をセットする

カラーミーショップテンプレートではBootstrapのスライダーが使われているので、そのまま画像のパスを入力するだけでセット完了です。やり方は以下の通り。

まず、スライダーに表示したい画像をアップロードします。その際に画像のURLをコピーしておきます。
カラーミーショップテンプレートでBootstrapのカルーセルを使う

コピーしたURLをテンプレート内のスライダーコンテンツにペーストします。

<!-- スライダー -->
<div id="main_slider" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#main_slider" data-slide-to="0" class="active"></li>
    <li data-target="#main_slider" data-slide-to="1"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">

      <!-- ここに画像のURLをペースト -->
      <img src="http://img11.shop-pro.jp/........jpg" alt="">
    </div>
    <div class="item">
      <img src="#" alt="">
    </div>
    
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#main_slider" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#main_slider" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<!-- /スライダー -->

これで画像のセットは完了です。あとは画像の数に合わせて、carousel-indicatorsの部分を増やせばスライダーのセット完了です。