【jQuery】2分割レイアウトで、上下にスライドするお洒落なスライダー実装

Question

▼こちらのサイト
http://www.haluta.jp/

こちらのサイトのメインビジュアルで使われているスライダーを実際したいのですが、
プラグインなしでjqueryを記述していて、なかなか理解できません。

コードを参照してみると、下記のコードが該当部分になると思うのですが、
これを自分のローカルで試してみても動きません。。

どなたかお分かりになる方いたら教えていただけると嬉しいです！

```
function i() {
n(function() {
0 !== c && (c = 0,
p = 0,
f.removeClass("now"),
f.removeClass("next"),
u.removeClass("now"),
u.removeClass("next"),
r.html(w),
l = r.children(".left"),
d = r.children(".right"),
f = l.children("li"),
u = d.children("li"),
h = f.length,
m = u.length,
f.eq(p).addClass("now"),
u.eq(p).addClass("now"),
t())
}, function() {
var n;
if (1 !== c) {
for (c = 1,
p = 0,
f.removeClass("now"),
f.removeClass("next"),
u.removeClass("now"),
u.removeClass("next"),
n = 0; m > n; n++)
l.append(f.eq(n)),
l.append(u.eq(n));
f = l.children("li"),
u = d.children("li"),
h = f.length,
m = u.length,
f.eq(p).addClass("now"),
t()
}
})
}

```

fujillin · Accepted Answer

こんにちは

ご提示の部分は部分なので、それだけで動作するものとは思えません。

＞プラグインなしでjqueryを記述していて、なかなか理解できません。
ご提示のサイトのサンプルを見ると、1枚の画像を分割してスライドしているわけではなさそうなので、スライダーを横に2つ並べても実現できるものと想像します。

フラグインであればＯＫなのでしたら、verticalスライドの画像スライダーで、autoやcarouselの機能があるもの（連動を確実にするならスライドのメソッドapiが公開されているもの）を利用して、二つ並べてしまえばよろしいのではないでしょうか？

fujillin · Answer

ANo1です。たまたま手元にあったbxSliderというライブラリが、縦スライドに対応していましたので、試しに作ってみました。 http://bxslider.com/ 横に並べて、autoで逆方向に動かしているだけなので、それぞれは独立して動作しています。長時間経過したりすると動きがずれてくる可能性がないとは言えないので、ちゃんと連動させるなら、一方の動作のcallbackを利用して他方を動かすようにすればよいですね。 http://bxslider.com/options 以下、ご参考まで。 Sample

【jQuery】2分割レイアウトで、上下にスライドするお洒落なスライダー実装

こんにちは

ANo1です。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング