Question

I have a application here: application

In the demo I am using a basic jquery slider which page is here: page info

Now the issue I am having is that it displays the images in question 1, but not in question 2. Now before I included the slider, it displayed the images in all questions. But since I included the slider, then it only displays images in first question only. How can I get images to be displayed in all questions?

CODE:

<form action='results.php' method='post' id='exam'>

<?php

foreach ($arrQuestionId as $key=>$question) {

?>

<div class='lt-container'>
<p><?php echo htmlspecialchars($arrQuestionNo[$key]) . ": " .  htmlspecialchars($arrQuestionContent[$key]); ?></p>

<?php

                //start:procedure image
        $img_result = '';
        if(empty($arrImageFile[$key])){
          $img_result = '&nbsp;';
        }else{

?>

 <div id="banner-slide">
 <ul class="bjqs">
<?php foreach ($arrImageFile[$key] as $i) { ?>
<li><img alt="<?php echo $i; ?>" height="200" width="200" src="<?php echo 'ImageFiles/'.$i; ?>"></li>
<?php } ?>
</ul>
</div>

         <script type="text/javascript">

jQuery(document).ready(function($) {

         $('#banner-slide').bjqs({
            animtype      : 'slide',
            height        : 200,
            width         : 200,
            responsive    : true,
            randomstart   : true
          });  
          });

          </script>

<?php

        }
        //end:procedure image
?>

</div>


<?php

}

?>
</form>

Answer 1

You have two divs on the page with the same ID. #1 that is a no no and bad HTML. You will need to initiate your slider on each div independently.

$('#banner-slide1').bjqs({ //ETC

$('#banner-slide2').bjqs({ //ETC

Is that enough to understand where you went wrong and why it’s not working. JQuery doesn’t know which banner-slide to use, or it’s actually only using the first one, because it knows there should only be one ID per page.

I don’t know how your slider plugin works, but you may be able to change the ids to classes in the divs, and then start the slider with:

$('.banner-slide').bjqs({ //ETC

OR

$('.banner-slide').each(function(){
    $(this).bjqs({ //ETC

It depends on how the plugin works.