javascript - 使用一个 div 获取多个值(动态)时，jssor slider 会出现问题

Question

这里我使用jssor slider，我需要在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>

注意:在此代码中获取值很好，但问题是只有一个 slider 正在工作，我需要所有 slider 才能工作，可以的话如何获得呢？提前致谢

Answer 1

不同的 slider 使用不同的名称，如果您将第一个 slider 命名为“slider1”，请将第二个 slider 命名为“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>