Несколько каруселей на одной странице

Question

Я реализовал bxslider на нашем сайте, где слайдер идет динамически, как в цикле 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> 

как реализовать эту вещь, чтобы получить несколько карусели на одной странице. Я не могу понять, как создать js-файл bxslider в динамическом режиме, а также над кодом PHP-скрипта.

Я пробовал эту вещь с $('.carousel').each(function() { slidercode });, но не желаемый результат.

Если кто-нибудь знает об этом типе решения, пожалуйста, помогите мне.

Спасибо

Answer 1

Как вы уже muiltiple DIVs с уникальным carousel_ * ID просто использовать их для выбора.

$('#carousel_1').bxslider({ ... }); 
$('#carousel_2').bxslider({ ... }); 
... 

Или, если все они имеют те же параметры:

$('.carousel').each(function(index,item) { 
    $(item).bxslider({ ... }); 
}); 

Несколько слайд-шоу также объяснены в docs from bxslider.