Comparison Sliderをスライダーの中に組み込んで、ハンドルを左右に振って動くよアピールする

タイトルの意味がわからない

よくあるサイトトップにあるスライダーにComparison Sliderを組み込む。
でもって、Comparison Sliderの場合、スライダーを左右に振って”動くよ？”アピールしたい。

要は、スライダーの中に混ぜたいw

ちらつきテスト。 pic.twitter.com/t63gIKpUQZ

— marushu (@marushu) 2016年9月26日

jQueryのライブラリとかで入れ込むのって嫌だなぁと思いつつ、ググってみると、

5 Free Image Comparison Slider Scripts – Hongkiat http://www.hongkiat.com/blog/js-image-comparison-sliders/

というサイトを発見。Comparison Sliderっていうんすねー。Before Afterじゃ確かにわかんないかも。

その中でも、”Here are 3 more:”で紹介されていた、Before Afterが良い感じ。
ライブラリ使いたくないとか言っといて…^^;
ありがとうございます m(_ _)m

Comparison Slider( Before After )の仕組み

非常にシンプルだった。1枚目は普通に置いて、2枚目はdivなどの中に置き、そのdivをresizeでwidthを変えてdiv > imgはoverflow: hidden;にする感じ。

管理画面に画像アップローダーで準備するのも便利そうだな 🙂

Sliderはbxsliderを使った

いろんなありがたいライブラリがあるけど、callbackが分かり易く豊富で細かいことしたくなってもできちゃう、というのが好きでこればっかり使わせてもらってるかも…。

[javascript]
$(window).on(‘load’, function(){
var slider = $(‘.bxslider’).bxSlider({
auto: true,
autoHover: true,
adaptiveHeight: true,
tickerHover: true,
useCSS: false,
onSliderLoad: function ( currentIndex ) {
$(‘.ba-slider’).css({
display: ‘block’
});
},
onSlideAfter: function ( $slideElement, oldIndex, newIndex ) {
if( $slideElement.find(‘ba-slider’) ) {
var base = $slideElement.find(‘.ba-slider’);
var resize = base.find(‘.resize’);
var handle = base.find(‘.handle’);
resize.not(‘:animated’).animate({
width: ‘55%’
}, 50, ‘linear’, function(){
$(this).not(‘:animated’).animate({
width: ‘45%’
});
recovery($(this));
});
handle.not(‘:animated’).animate({
left: ‘55%’
}, 50, ‘linear’, function(){
$(this).not(‘:animated’).animate({
left: ‘45%’
});
recovery($(this));
});
}
slider.stopAuto();
slider.startAuto();
}
});
$(‘.ba-slider’).beforeAfter();
});

function recovery ( elm ) {
var checkClass = elm.attr(‘class’);
if ( checkClass === ‘resize’ ) {
elm.not(‘:animated’).animate({
width: ‘50%’
});
} else {
elm.not(‘:animated’).animate({
left: ‘50%’
});
}
}
[/javascript]

こんな感じ。

[code]

<div class="slider-area">

<ul class="bxslider">

<li><img src="images/img_4081_6090680276_o.jpg" /></li>

<li><img src="images/_mg_7906_11709806865_o.jpg" /></li>

<li>

<div class="ba-slider">
<img src="images/IMG_0709.JPG" alt="">

<div class="resize">
<img src="images/IMG_5400.JPG" alt="">
</div>

<span class="handle"></span>
</div>

</li>

</ul>

</div>

<!– / .slider-area –>
[/code]

htmlはこれ。
スライドがComparisonを含んでたら、Comparison Sliderを左右に振って”動くよアピール”をするイメージ。
毎度うるさかったら、1回目だけ左右に振るようにすれば良いかもなぁと思う。

ってなワケでメモ。

参考

• Before After http://www.hongkiat.com/blog/js-image-comparison-sliders/
• GitHub – jotform/before-after.js: An Image Comparision Slider: See an example demo here: http://www.jotform.com/formscentral/ https://github.com/jotform/before-after.js
• jQuery Content Slider | Responsive jQuery Slider | bxSlider http://bxslider.com/
• bxslider.com/options http://bxslider.com/options
• javascript – bxSlider background-image flickers in chrome – Stack Overflow http://stackoverflow.com/questions/34363001/bxslider-background-image-flickers-in-chrome