使用一个 div 获取多个值（动态）时，jssor 滑块出现问题

Question

这里我使用 jssor 滑块，我需要在 php 中使用一个 div(slider1_container) 动态获取值，

有可能吗？

我试过代码如下，

while($row = $result->fetch_assoc()) {
                        ?>
                        <div class="category-box1">
                                <div id="slider1_container" class="common" style="position: relative; top: 0px; left: 0px; width:220px; height: 147px;">
                                    <!-- Slides Container -->
                                    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width:220px; height:147px; cursor:pointer">
                                        <div class="imagecommon">
                                            <img class="img-responsive  center-block" alt="tour" src="<?php echo $this->getBaseUrl() ?>media/images/category/thumbs/<?php echo $row['thumbnail']?>" />
                                        </div>
                                        <div class="imagecommon">
                                            <img class="img-responsive  center-block" alt="tour1" src="<?php echo $this->getBaseUrl() ?>media/images/category/thumbs/<?php echo $row['image']?>" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 letter"><?php echo $row['title']?> </div>

                        </div>
                  <?php  }
                } ?>

<script>
     $(window).bind("load", function() {
 $(document).ready(function ($) {
    var options = { $AutoPlay: true };
    var jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
});
</script>

注意：在这段代码中获取值很好，但问题是只有一个滑块在工作， 我需要所有滑块才能工作， 有没有可能如何获得？ 提前致谢

Answer 1

不同的滑块使用不同的名称，如果您将第一个滑块命名为'slider1'，请将第二个命名为'slider2'。

while($row = $result->fetch_assoc()) {
                    ?>
                    <div class="category-box1">
                            <div id="slider2_container" class="common" style="position: relative; top: 0px; left: 0px; width:220px; height: 147px;">
                                <!-- Slides Container -->
                                <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width:220px; height:147px; cursor:pointer">
                                    <div class="imagecommon">
                                        <img class="img-responsive  center-block" alt="tour" src="<?php echo $this->getBaseUrl() ?>media/images/category/thumbs/<?php echo $row['thumbnail']?>" />
                                    </div>
                                    <div class="imagecommon">
                                        <img class="img-responsive  center-block" alt="tour1" src="<?php echo $this->getBaseUrl() ?>media/images/category/thumbs/<?php echo $row['image']?>" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 letter"><?php echo $row['title']?> </div>

                    </div>
              <?php  }
            } ?>

<script>
 $(window).bind("load", function() {
 $(document).ready(function ($) {
var options = { $AutoPlay: true };
var jssor_slider2 = new $JssorSlider$('slider2_container', options);
});
});
</script>