Simple Timezone carousel with next and previous button to show different times of countries, using jQuery, php and css: WordPress or php based sites

<div id="time-carousel" class="time-carousel">
  <?php 
    $timezone_identifiers = DateTimeZone::listIdentifiers(DateTimeZone::AMERICA | DateTimeZone::EUROPE);
    foreach($timezone_identifiers as $timezone) {
        $date = new DateTime('now', new DateTimeZone($timezone));
        echo '<div class="time-carousel-item">';
        echo '<h3>'.$timezone.'</h3>';
        echo '<p>' . $date->format('H:i') . '</p>';
        echo '</div>';
    }
  ?>
</div>
<a href="#" id="prev">Previous</a>
<a href="#" id="next">Next</a>

<script>
jQuery(document).ready(function(){
    var slideIndex = 0;
    showSlides();

    function showSlides() {
        var i;
        var slides = jQuery(".time-carousel-item");
        for (i = 0; i < slides.length; i++) {
            if(i < slideIndex || i >= slideIndex + 4) {
                slides.eq(i).hide();  
            } else {
                slides.eq(i).show();
            }
        }
    }

   jQuery("#prev").click(function(event){
    event.preventDefault();
    var slides = jQuery(".time-carousel-item");
    slideIndex = Math.max(0, slideIndex - 4);
    showSlides();
});

jQuery("#next").click(function(event){
    event.preventDefault();
    var slides = jQuery(".time-carousel-item");
    slideIndex = Math.min(slides.length - 4, slideIndex + 4);
    showSlides();
});
});
</script>
<style>
	.time-carousel {
  display: flex;
  flex-wrap: wrap;
}
.time-carousel {
    display: flex;
    flex-wrap: wrap;
}
.time-carousel-item {
    width: 25%;
    padding: 10px;
    text-align: center;
}
	.time-carousel-item h3 {
    font-size: 18px;
    font-weight: bold !IMPORTANT;
}
</style>