つらい・・・

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

解決済

質問者：MAMOOOO
質問日時：2016/09/01 15:12
回答数：2件

▼こちらのサイト
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()
}
})
}

```

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2016/09/01 18:26

こんにちは

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

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

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

- 0
- 件

通報する

この回答へのお礼

助かりました

ご返信が遅くなってしまいました…！とても親切に教えていただき、勉強になりました！お忙しい中ありがとうございます…>_<…

通報する

お礼日時：2016/09/14 15:38

No.2

回答者： fujillin
回答日時：2016/09/02 11:31

ANo1です。

たまたま手元にあったbxSliderというライブラリが、縦スライドに対応していましたので、試しに作ってみました。
http://bxslider.com/

横に並べて、autoで逆方向に動かしているだけなので、それぞれは独立して動作しています。
長時間経過したりすると動きがずれてくる可能性がないとは言えないので、ちゃんと連動させるなら、一方の動作のcallbackを利用して他方を動かすようにすればよいですね。
http://bxslider.com/options

以下、ご参考まで。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
#hoge * { margin:0 !important; padding:0 !important; }
#hoge * { border-width:0 !important; }
#hoge>div { float:left; width:50%; }
#hoge img{ width:100%; }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9. …
<script type="text/javascript" src="../js/jquery.bxSlider/jquery.bxslider.js"></script>
<link type="text/css" href="../js/jquery.bxSlider/jquery.bxslider.css" rel="stylesheet">

<script type="text/javascript">
$(function(){
var opt = {
mode: "vertical",
infiniteLoop: true,
pager: false,
controls: false,
auto: true
};
$("#hoge ul").eq(0).bxSlider(opt);
opt.autoDirection = "prev";
$("#hoge ul").eq(1).bxSlider(opt);
});
</script>
</head>

<body>
<div id="hoge">
<div>
<ul>
<li><img src="./img/photo01.jpg" alt=""></li>
<li><img src="./img/photo02.jpg" alt=""></li>
<li><img src="./img/photo03.jpg" alt=""></li>
<li><img src="./img/photo04.jpg" alt=""></li>
</ul>
</div>

<div>
<ul>
<li><img src="./img/photo05.jpg" alt=""></li>
<li><img src="./img/photo06.jpg" alt=""></li>
<li><img src="./img/photo07.jpg" alt=""></li>
<li><img src="./img/photo08.jpg" alt=""></li>
</ul>
</div>
</div>
</body>
</html>