次と前のボタンを使用してリストに画像を表示しています。
このjqueryをforループで使用して、複数できるようにしました。
list1:
Prev <ul><li> img1 img2 img3....</li></ul> Next
list2:
Prev <ul><li> img1 img2 img3....</li></ul> Next
同じページに 3 つの異なる画像リストがある場合、最初のリストの次または前をクリックすると、すべてのリストに適用されます。
その特定のリストに適用して、次と前に移動するにはどうすればよいですか。
リンクのコードを使用しました: http://css-plus.com/2010/09/create-your-own-jquery-image-slider/
私は次のコードを使用しました:Jquery:
$(document).ready(function(){
// Gallery
if(jQuery(".gallery").length){
// Declare variables
var totalImages = jQuery(".gallery > li").length,
imageWidth = jQuery(".gallery > li:first").outerWidth(true),
totalWidth = imageWidth * totalImages,
visibleImages = Math.round(jQuery(".gallery-wrap").width() / imageWidth),
visibleWidth = visibleImages * imageWidth,
stopPosition = (visibleWidth - totalWidth);
jQuery(".gallery").width(totalWidth);
jQuery("#gallery-prev").click(function(){
if(jQuery(".gallery").position().left < 0 && !jQuery(".gallery").is(":animated")){
jQuery(".gallery").animate({left : "+=" + imageWidth + "px"});
}
return false;
});
jQuery("#gallery-next").click(function(){
if(jQuery(".gallery").position().left > stopPosition && !jQuery(".gallery").is(":animated")){
jQuery(".gallery").animate({left : "-=" + imageWidth + "px"});
}
return false;
});
}
});
Html and php:
<?php foreach($records as $row) :?>
<div id="gallery-wrap">
<ul id="gallery" class="gallery">
<?php foreach($row['images'] as $image) :?>
<li>
<a href="#"><img src="<?php echo base_url();?>uploads/<?php echo $image['img']; ?> /></a>
</li>
<?php endforeach ;?>
</ul>
</div>
<div id="gallery-controls" class="gallery-controls">
<a href="#" id="gallery-prev" >Prev</a>
<a href="#" id="gallery-next" >Next</a>
</div>
<?php endforeach ;?>