カラーミーのスライダーをレスポンシブに対応する

カラーミーショップ では管理画面でスライドショーを設定できます。

レスポンシブ対応のテーマならば、ブラウザのサイズを変えると、スライダー内の画像も縮小、拡大するはず。

でも、これには2種類あって、スライドショーを表示した状態でブラウザの大きさを変えると、それに合わせてサイズが変わるもの(つまりは画像の縦横比率を保ったままリサイズする)、と、開いたブラウザのサイズに合わせてスライドショーの画像サイズを変更する、という感じ。

後者はブラウザを動かしても、画像サイズが変わりません。
ブラウザを更新した際には画像サイズが変わります。

まぁ、PCで見たときにブラウザサイズを変えなければ、これでもいいのかな・・とは思うのですが、ちょっと気持ち悪いので修正することにしました。

その作業の覚書になります。

というのも、今回、カラーミーショップ のテーマ「カラーミーショップ キット(2カラム)」をカスタマイズしていたのですが、同じスライドショーのコードでもテーマによって、スライドショーの見え方が違う、というのに気が付いたから。

カラーミーショップ で使っているスライダーの大本は、bxSliderという、よく使われいるJQueryです。

ちなみに、カラーミーショップ のテンプレートの入れたい箇所に、カラーミーショップ の「出力用HTMLタグ」を張り付けるわけですが、bxSliderにはいろんなオプションがあり、

 

<{if $slideshow_html}>
<div class="slider">
<{$slideshow_html}>
</div>
<script type="text/javascript">
//<![CDATA[
$(function(){
$('#slider').bxSlider({
auto: true,
pause: 2000,//静止時間
speed: 1000,//スライド速度
controls: false,//prev/nextを表示するかどうか
captions: true,//字幕を出すかどうか
mode: 'fade'//エフェクトを表示するかどうか
});
});
//]]>
</script>

この部分に

responsive: true

を追加するだけでレスポンシブに対応できるものも・・あるかもしれません。
(調べてないけど)

で、今回、カラーミーショップ キット2カラムに単純にスライドショーの出力用HTMLを張り付けましたが、可変にはならず。

で、またテーマを切り替えて確認して、可変になっているテンプレートのスタイルシートをチェック。

スライダーに関すると思われるスタイルシート(以下)をコピー。

/*
* slider
*/
.slider {
margin-top: 2em;
padding: 0 1.4%;
position: relative;
}
.bx-viewport {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
left: 0 !important;
border: none !important;
}
#slider div {
width: 100% !important;
}/*
* slider
*/
.slider {
margin-top: 2em;
padding: 0 1.4%;
position: relative;
}
.bx-viewport {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
left: 0 !important;
border: none !important;
}
#slider div {
width: 100% !important;
height:auto
}

をとりあえず、カラーミーショップ キットの共通CSSに張り付けたら行けました。

どうやら、最後の
#slider div {
width: 100% !important;
height:auto
}

これが重要っぽいです。

カラーミーショップ の機能を使ったスライドショーでレスポンシブに悩まされている方、お試しください。

タイトルとURLをコピーしました