Блог

У меня на сайте есть карусель, которая отлично работает при ее жестком кодировании. Вот как выглядит код:

 <div class="w-full flex justify-center">
   <div class="gallery js-flickity"
       data-flickity-options='{ "wrapAround": true }'
   >
     <div class="gallery-cell">
       <div class="w-full flex justify-center">
           <img src="./img/sidenav-1/clients-01.png" class="client-image"/>
       </div>
     </div>
     <div class="gallery-cell">
       <div class="w-full flex justify-center">
          <img src="./img/sidenav-1/clients-02.jpeg" class="client-image" />
       </div>
     </div>                  
 </div>
 

Я должен использовать эту карусель из-за определенных ограничений в кодировании, поэтому я не могу ее изменить. Теперь мне нужно подключить эту веб-страницу к панели администратора, в которой я использую PHP для извлечения значений из базы данных и повторения всего того же кода и использую jQuery для его установки. Но если я сделаю это вместо карусели, изображения будут отображаться одно под другим.

Код jQuery:

 <script>
  $.ajax({url: "API/clients.php", success: function(result){
     $("#append_clients").html(result);
  }});
</script>
 

PHP:

 $resultee = '<div class="gallery js-flickity" data-flickity-options='{ "wrapAround": true }'>';

$sql = "SELECT * FROM Clients;";
$result = $conn->query($sql);

$conn->close();

if ($result->num_rows > 0) {
  // output data of each row
  while($row = $result->fetch_assoc()) {
      $image_path = $row["image_address"];
      $client_name = $row["client_name"];
      $client_desc = $row["client_desc"];
    $resultee .= '<div class="gallery-cell"><div class="w-full flex justify-center"><img src="'.$image_path.'" class="client-image" /></div></div>';
  }
} 

$resultee .= '</div>';
 

CSS и JS:

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.css" />
<style>
.gallery {
  width: 93vw;
  background: #e5e5e5;
  margin-left: -5%;
}

.gallery-cell {
  width: 93vw;
  margin-right: 10px;
}
    
   
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.pkgd.js"><script>
 

Кто-нибудь может, пожалуйста, помочь, я не уверен, что делать