我在我们的网站中实现了 bxslider,其中 slider 以动态方式出现,就像在 while 循环中一样。这里有 while 循环中的动态代码,如下所示:
$html_img = '<div class="sch_rel_img">';
if(count($node_img)>1)
{
$html_img .='<link href="'.base_path().drupal_get_path('module','demonz').'/css/jquery.bxslider.css" type="text/css" rel="stylesheet" media="screen" charset="utf-8"/>';
$html_img .='<script src="'.base_path().'sites/default/themes/demonz/js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>';
$html_img .='<script src="'.base_path().drupal_get_path('module','pubclub').'/js/jquery.searchres_bxslider.min.js" type="text/javascript" charset="utf-8"></script>';
$html_img .='<script type="text/javascript" src="'.base_path().drupal_get_path('module','pubclub').'/js/search_carousel.js" charset="utf-8"></script>';
//$html_img .="<input type='hidden' name='nid' id='nid' value='".$nid."' />";
//$car = 1;
//$html_img .='<div class="schnext" id="schnext_'.$nid.'"></div><ul class="carousel_'.$nid.'">';
$html_img .='<div class="schnext" id="schnext"></div><ul class="carousel" id="carousel_'.$nid.'">';
foreach($node_img as $img)
{
$image = $img['filepath'];
$html_img .="<li>";
$html_img .="<img src='".$image."' width='98%' height='96%' />";
$html_img .="</li>";
}
/*$html_img .= "<li><img src='".base_path()."sites/default/files/images/events/17b9e1fb62623361831924370675857fe73225b8/big-event.jpg' width='98%' height='96%' /></li>";
$html_img .= "<li><img src='".base_path()."sites/default/files/images/events/17b9e1fb62623361831924370675857fe73225b8/innquizitive_thursday_screen_ad.jpg' width='98%' height='96%' /></li>";*/
//$html_img .='</ul><div class="schprev" id="schprev_'.$nid.'"></div>';
$html_img .='</ul><div class="schprev" id="schprev"></div>';
}
$html_img .='</div>';
我的 bxslider 脚本是
<script type="text/javascript">
var slider = $(".carousel").bxSlider({
mode:'horizontal',
auto:false,
pager:false,
moveSlides:1,
nextSelector: '#schnext',
prevSelector: '#schprev'
/*nextText: 'Onward →',
prevText: '← Go back'*/
});
</script>
如何实现这个东西以在一个页面中获得多个轮播。我不明白如何以动态方式构建bxslider的js文件以及上面的php脚本代码。
我用 $('.carousel').each(function() { slidercode });
尝试了这个东西但不是想要的结果。
如果有人知道这种类型的解决方案,请帮助我。
谢谢
最佳答案
由于您有多个具有唯一 carousel_* ID 的 DIV,只需将它们用作选择器即可。
$('#carousel_1').bxslider({ ... });
$('#carousel_2').bxslider({ ... });
...
或者如果它们都有相同的选项:
$('.carousel').each(function(index,item) {
$(item).bxslider({ ... });
});
docs from bxslider 中还解释了多个幻灯片.
关于multiple-instances - 一页中多个轮播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17193860/