Making a slider (carousel) whenever the picture is clicked

Question

I have a php file that calls the images from the db and creates the appropriate html code and displays them. I want to have it so that whenever the user clicks on an image a slider (carousel) appears. It should contain all the pictures called from the database.
Maybe the answer is using a modal instead of sliders, but I don't know how to "switch pages" between them, or if its even possible.

I tried using bootstrap's sliders but it didn't work (I wrapped the img in the correct bootstrap slider divs. I don't remember the exact code, but I followed the main bootstrap instruction for creating sliders).
So I think this idea of using sliders is completely wrong.

Here is my php code:

if (mysqli_num_rows($result) > 0) {
    echo "<div class='gallery-container'>";

    while ($row = mysqli_fetch_assoc($result)) {
        echo "<div class='gallery-item'>"; 
        if (!empty($row['gallery_image']) && file_exists(__DIR__ . '/../public/images/gallery/' . basename($row['gallery_image']))) {
            $imagePath = '/public/images/gallery/' . basename($row['gallery_image']);
            echo "<img src='" . htmlspecialchars($imagePath) . "' alt='" .$row['title'] . "' title='" . $row['title'] . "'>";
            // echo "<p>DEBUG: " . htmlspecialchars($imagePath) . "</p>"; //debug
        }
        echo "<form method='POST' action='/includes/gallery_delete.php' onsubmit='return confirm(\"Biztosan törli ezt a képet?\");'>";
        echo "<input type='hidden' name='gallery_id' value='{$row['id']}'>";
        echo "<button type='submit' class='btn btn-danger news-delete'>Törlés</button>";
        echo "</form>";
        echo "</div>";
    }
    echo "</div>";
} else {
    ErrorHandler::displayError("Nincs kép feltöltve az adatbázisba!");
}