より正確なのは、より多くのスライドショー間で変化するカルーセルを作成することです。クラスごとにいくつかの画像をグループ化しました(クラスproject1の3つの画像のグループ、クラスproject2の別の3つの画像のグループなど)。私のカルーセルでは、1つのグループが自動スライドショーを作成しますが、[次へ/戻る]ボタンをクリックすると、同じコンテナー内で表示されるグループを変更する必要があります。例として、ライオンの画像が次々と表示されるグループがあり、[次へ]をクリックすると、たとえば猫の写真のグループでそれらを変更したいと思います。それをよりよく理解するための大まかな説明です。
今のところ私のJquery:
function slideswitch() {
var $active = $("#project img.project1.active");
$active.hide();
if ( $active.length == 0 ) $active = $('#project IMG.project1:last');
var $next = $active.next(":has(.project1)").length ? $active.next()
: $('#project IMG.project1:first');
$active.addClass('last-active').show();
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
};
$(document).ready(function() {
setInterval(slideswitch, 2000 );
});
私もここにあるフィドルを持っています。