スライドショーで最後のスライドから最初のスライドへの遷移をスムーズにしたい

1
2
3
4
とそれぞれスライドさせるための要素があります。
4→1へ遷移させるときにのみ動きが不自然な感じになります。
.activeを付与して、css3アニメーションで動いてる部分が機能しない、といった感じです。

これの解決策をご存知の方、いらっしゃいますでしょうか。
サンプルコードを貼ります。

lang
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title></title>
6<style>
7
8* {margin: 0; padding: 0;}
9body,html {width: 100%;height: 100%;}
10
11
12.container {width: 100%; height: 100%; overflow-x: hidden;}
13.slide_all {width: 800px; margin: 0 auto; height: 250px; position: relative;}
14.slide_wrap {width: 2400px; position: absolute; left: 50%; margin-left: -1200px;}
15.slide_body {width: 100%;}
16.slide {width: 800px; font-family: 'arial'; background: #000; color: #fff; font-size: 50px; line-height: 250px; text-align: center;}
17.slide img {width: 100%; vertical-align: bottom;}
18
19.bx-controls-direction,.bx-pager {text-align: center;height: 25px;}
20.bx-controls-direction a,.bx-pager-item {display: inline-block;}
21.bx-pager-item a{display: block; height: 10px; width: 10px; text-indent: -9999px; background: #fff; border-radius: 10px; margin:10px 2px 0 2px;}
22.bx-pager-item a.active {opacity: 0.3;}
23.bx-controls-direction a{text-decoration: none; color: #fff; padding:0 5px;}
24.bx-controls {position: absolute;bottom: 5px;z-index: 100;width: 100%;}
25
26.slide{transition:all .3s;opacity:.8;}
27.slide.active{ opacity:1;}
28</style>
29<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
30<script src="http://zxcvbnmnbvcxz.com/demonstration/js/jquery.bxslider.js"></script>
31<script>
32$(function(){
33var slideNum = $('.slide').size();
34$('.slide_body').bxSlider({
35slideWidth: 800,
36minSlides: 3,
37maxSlides: 3,
38moveSlides: 1,
39slideMargin: 0,
40onSliderLoad:function(currentIndex){
41$('.slide').removeClass('active');
42$('.slide_body > div:nth-child(3n-1)').addClass('active');
43},
44onSlideBefore: function($slideElement, oldIndex, newIndex){
45var new_i = newIndex%3 - 1;
46var nth = (new_i < 0) ? '3n-1' : '3n'+new_i;
47$('.slide').removeClass('active');
48$('.slide_body > div:nth-child('+nth+')').addClass('active');
49}
50});
51});
52</script>
53</head>
54<body>
55<div class="container">
56<div class="slide_all">
57<div class="slide_wrap">
58<div class="slide_body">
59<div class="slide">4</div>
60<div class="slide">1</div>
61<div class="slide">2</div>
62<div class="slide">3</div>
63</div>
64</div>
65</div>
66</div>
67</body>
68</html>

行動規範の内容に同意します

回答2件

ベストアンサー

Windows7 × chrome 49.0.2623.87 mです。

通常は

1.slideクラスのdivにactiveクラスを追加する
2.アニメーションでスライドインしてくる予定のdivからactiveクラスを削除する
3.アニメーションが開始され、次のスライドがスライドインする

となるようですが、私の環境でも4<==>1間の動きのみ1->3->2の順で動いているようです。

いろいろいじってみた結果、下記のように修正すると4<==>1間の動きも1->2->3の順で動くようになりましたが、理屈がついていかぬ。。。

onSliderLoad:function(currentIndex){
	$('.slide').removeClass('active');
	$('.slide_body > div:nth-child(4n+1)').addClass('active'); // <=
},
onSlideBefore: function($slideElement, oldIndex, newIndex){
	var new_i = newIndex%4;		// <=
	var nth = '4n+' + (new_i + 1);	// <=

。。。おそらくスライド4枚なのに3の倍数で処理しようとしていたのが問題だったのかなぁ。

投稿2016/03/29 05:09

編集2016/03/29 05:18

tkturbo

総合スコア5572

southern_flavor

2016/03/29 09:59

ご回答ありがとうございます。ばっちりできました！おっしゃる通り、nth-childの引数の指定に誤りがあったようですね。

行動規範の内容に同意します

僕のmac, chromeだと不自然な動きをせずに動いてます！
具体的にはどうなるのでしょうか！

投稿2016/03/29 03:36

MasakazuFukami

総合スコア1869

southern_flavor

2016/03/29 03:51 編集

ご返信ありがとうございます。説明不足で申し訳ないです。こちらもmac、Chromeでの確認ですが、、このスライドショーについてですが、アクティブになっていない周り二つの要素は不透明な状態になっていて、遷移させると同時に、通常の表示（アクティブ状態）→不透明の表示（非アクティブ状態）になります。この通常の表示から不透明になる過程でしっかりしたアニメーションにならないみたいです。それが、4→1に遷移する時のみですね。他の要素は問題なく綺麗にアニメーションされます。以上の説明でなんとなく、伝わりますでしょうか？

行動規範の内容に同意します

あなたの回答