Javascript 我如何管理光滑的导航？当我在本节中包含Php代码时，Slick Nav会产生问题

**如何在代码中管理光滑的导航？当我在本节中包含PHP代码时，Slick Nav会产生问题。我想把光滑的导航按剖面分开。如图所示，所有导航都相互连接：

我的代码：

<?php
include("Admin/includes/db.php");

$query = "SELECT * FROM products ORDER BY RAND() LIMIT 3;";
$run = mysqli_query($conn, $query);

while ($row = mysqli_fetch_array($run)) {
    $ProId          = $row['id'];
    $ProTitle       = $row['title'];
    $ProPrice       = $row['price'];
    $ProImage       = $row['img'];
    $Category       = $row['category'];
?>
<div class="col-md-4 col-xs-6">
  <div class="section-title">
    <h4 class="title">Top selling</h4>
    <div class="section-nav">
      <div id="slick-nav-3" class="products-slick-nav"></div>
    </div>
  </div>

  <div class="products-widget-slick" data-nav="#slick-nav-3">
    <div>
      <div class="product-widget">
        <div class="product-img">
          <img src="./img/product07.png" alt="" />
        </div>
        <div class="product-body">
          <p class="product-category">Category</p>
          <h3 class="product-name"><a href="#">product name goes here</a></h3>
          <h4 class="product-price">
            $980.00 <del class="product-old-price">$990.00</del>
          </h4>
        </div>
      </div>

      <div class="product-widget">
        <div class="product-img">
          <img src="./img/product08.png" alt="" />
        </div>
        <div class="product-body">
          <p class="product-category">Category</p>
          <h3 class="product-name"><a href="#">product name goes here</a></h3>
          <h4 class="product-price">
            $980.00 <del class="product-old-price">$990.00</del>
          </h4>
        </div>
      </div>
      <div class="product-widget">
        <div class="product-img">
          <img src="./img/product09.png" alt="" />
        </div>
        <div class="product-body">
          <p class="product-category">Category</p>
          <h3 class="product-name"><a href="#">product name goes here</a></h3>
          <h4 class="product-price">
            $980.00 <del class="product-old-price">$990.00</del>
          </h4>
        </div>
      </div>
      <!-- product widget -->
    </div>

    <div>
      <!-- product widget -->
      <div class="product-widget">
        <div class="product-img">
          <img src="./img/product01.png" alt="" />
        </div>
        <div class="product-body">
          <p class="product-category">Category</p>
          <h3 class="product-name"><a href="#">product name goes here</a></h3>
          <h4 class="product-price">
            $980.00 <del class="product-old-price">$990.00</del>
          </h4>
        </div>
      </div>
      <div class="product-widget">
        <div class="product-img">
          <img src="./img/product02.png" alt="" />
        </div>
        <div class="product-body">
          <p class="product-category">Category</p>
          <h3 class="product-name"><a href="#">product name goes here</a></h3>
          <h4 class="product-price">
            $980.00 <del class="product-old-price">$990.00</del>
          </h4>
        </div>
      </div>
      <div class="product-widget">
        <div class="product-img">
          <img src="./img/product03.png" alt="" />
        </div>
        <div class="product-body">
          <p class="product-category">Category</p>
          <h3 class="product-name"><a href="#">product name goes here</a></h3>
          <h4 class="product-price">
            $980.00 <del class="product-old-price">$990.00</del>
          </h4>
        </div>
      </div>
    </div>
  </div>
</div>
<?php } ?>

畅销书
类别
$980.00 $990.00
类别
$980.00 $990.00
类别
$980.00 $990.00
类别
$980.00 $990.00
类别
$980.00 $990.00
类别
$980.00 $990.00

我看不到php代码的开头，但可能您将所有流畅的导航代码都放在了一个循环中。父级

应该在循环之外。

是，

而
是循环。因此，它为每个产品重复使用
…
容器。这就是为什么你会得到额外的箭。您应该将parent div元素放在循环之外。问题仍然存在：（用修改过的代码（包括php部分）编辑您的问题，这样我就可以检查错误了是的，所有html代码仍然在循环中。在开始
之前移动
最畅销的
。