私は現在、Sorgilla jquery jcarouselを使用するサイトで作業していますが、2つのスライダーが連携して動作しています。
var carousel_2;
jQuery(document).ready(function() {
jQuery('#right-carousel').jcarousel({
start: 1, // Configuration goes here
wrap: "circular",
scroll: 1,
auto:3,
vertical:true,
itemFirstInCallback: {
onBeforeAnimation: function(carousel, item, index, action) {
if (carousel_2) {
carousel_2[action]();
}
}
}
});
});
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
start: 3, // Configuration goes here
wrap: "circular",
scroll: 1,
auto:3,
vertical:false,
buttonNextHTML: null,
buttonPrevHTML: null,
initCallback: function(c) {
carousel_2 = c;
}
});
}）;
これは正常に機能しますが、使用しているセットアップで外部コントロールを追加できるのではないかと思います。残念ながら、私はjqueryにまったく慣れていないので、まだ学習しています。
私が探しているのは、カルーセルの下にページネーションのように動作するボタンを追加することです。ここに例を示します... http://truelogic.org/multicarousel.php またはhttp://www.skyports.com
これがhttp://hartyinternational.hailstormcommerce.com/で作業しているサイトです。
理想的には、これらのページ付けボタンを上記のように機能させることができれば、それは素晴らしいことです。
このcssをカルーセルの下に設定しています。
.jcarousel-pagination {
width:100px;
height:40px;
position:absolute;
right:100px;
bottom:0px;
background:#000;
}
.jcarousel-pagination a {
font-size: 75%;
text-decoration: none;
padding: 0 5px;
margin: 0 0 5px 0;
border: 1px solid #fff;
color: #eee;
background-color: #4088b8;
font-weight: bold;
}
ここにいくつかのドキュメントがあります... http：//sorgalla.com/projects/jcarousel/
このコードを内部の関数に追加することを検討していましたが、それを機能initCallback:させる方法や、どのボタンがどのスライドを表すかを伝える方法がわかりません...
jQuery('.jcarousel-pagination a').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
どんな助けでも素晴らしいでしょう、私はそれが少し一般的な質問であることを知っています、しかしどこから始めるべきかわかりませんありがとう。