information-system/application/views/mobile_first/jh-feedback-list.php

<div class="feedback_block" style="background: #eee; border-radius: 6px;padding: 50px 0;">
<h2 style="text-align: center; position: relative; display: inline-block; width: 100%;padding: 0; margin-top: 0;">
  Travelers <span class="review_heart">❤</span> Highlights Travel<span class="review-aggregate__info" aria-label="Open"><svg version="1.1"
      class="icon icon--vertical icon--size-1-5 icon--primary" role="presentation" width="20" height="20"
      viewBox="0 0 24 24">
      <path
        d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z">
      </path>
    </svg></span>
  <span class="popper__tooltip" data-cy="popper__tooltip" data-show="false" data-popper-placement="right"><span
      class="popper__content" data-cy="popper__content">Highlights Travel Reviews are updated monthly from Tripadvisor and Google.</span> <span
      class="review_close">&times;</span></span>
</h2>

<div class="slider swiper-container" id="reviews">
  <div class="swiper-wrapper">

    <div class="feedback_logo swiper-slide">
      <img
        src="https://images.japanhighlights.com/allpicture/2025/06/12df0464b8e246dfa78a0db9a91fc58a_cut_200x50_241_1750427275.png"
        class="img-responsive" alt="TripAdvisor logo" style="display: block; margin: 0 auto 20px auto;">
      <img alt="TripAdvisor Rating" class="img-responsive" width="310" height="186"
        src="https://images.japanhighlights.com/allpicture/2025/06/68427b8b4904419db87c80d69e93ee4b_cut_310x186_241_1750427943.jpg">
    </div>
    <?php foreach ($feedback_list as $index => $feedback) {?>
    <div class="tour_feedback feedback_content swiper-slide">
      <div class="review_name">
        <?php echo $feedback['customer'] ?>
      </div>
      <div class="review_nationality">
        <?php echo $feedback['nationality'] ?>
      </div> <img
        src="<?php if (strpos($feedback['url'], 'trustpilot.com') == true) { echo 'https://images.japanhighlights.com/allpicture/2024/04/eba8a46e43514b55bb4e1dd15d9b5712_cut_211x40_241.jpg'; } else if (strpos($feedback['url'], 'tripadvisor.com') == true) { echo 'https://images.chinahighlights.com/allpicture/2024/12/c81b67573a2d40d6922e95b33aeaf03d_cut_80x14_241_1733323252.png'; }  ?>"
        style="height: 15px; width: auto; filter: brightness(160%);" alt="tour rating">
      <strong>
        <?php echo $feedback['title'] ?>
      </strong>
      <p>
        <?php echo $feedback['content'] ?>
      </p>
      <a href="<?php echo $feedback['url'] ?>" target="_blank" rel="nofollow">More</a>
      <div class="customer_name">
        <strong>Date of Experience:</strong>:
        <?php echo $feedback['entranceDate'] ?>
      </div>
    </div>
    <?php }?>

  </div>
  <div class="swiper-button-next"> </div>

<div class="swiper-button-prev"> </div>

<div class="swiper-pagination"> </div>
</div>
<p style="text-align: center; margin-top: 20px;">Read our verified reviews on <a
  href="https://www.tripadvisor.com/Attraction_Review-g1066457-d32912770-Reviews-Asia_Highlights_Japan_Travel-Shinjuku_Tokyo_Tokyo_Prefecture_Kanto.html" target="blank" rel="nofollow">TripAdvisor</a>
<img style="height: 15px; width: auto; margin: 0 3px; filter: brightness(170%);" alt="Tour Review" loader="lazy"
  src="https://images.chinahighlights.com/allpicture/2024/12/c81b67573a2d40d6922e95b33aeaf03d_cut_80x14_241_1733323252.png">
</p>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const infoIcon = document.querySelector('.review-aggregate__info');
    const toolTip = document.querySelector('.popper__tooltip');
    const closeButton = document.querySelector('.review_close');

    infoIcon.addEventListener('click', function () {
      toolTip.style.display = "block";
    });

    closeButton.addEventListener('click', function (event) {
      toolTip.style.display = "none";
    });

  });
</script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
                                document.addEventListener('DOMContentLoaded', function() {
                                    var testimonialsSwiper = new Swiper('#reviews', { 
                                         pagination: { 
                                             el: ".swiper-pagination", 
                                             type: "fraction", 
                                         }, 
                                         navigation: { 
                                             nextEl: ".swiper-button-next", 
                                             prevEl: ".swiper-button-prev", 
                                         }, 
                                         loop: true, 
                                         slidesPerView: 3, 
                                         slidesPerGroup: 3, 
                                         spaceBetween: 30,
                                         autoplay: false//修改关闭自动轮播
                                     });
                                    var citiesSwiper = new Swiper('#citiesSlider', {
                                        autoplay: {
                                            delay: 3000,
                                            disableOnInteraction: false,
                                        },//修改（添加自动轮播）
                                        pagination: {
                                            el: ".swiper-pagination",
                                            type: "fraction",
                                        },
                                        navigation: {
                                            nextEl: ".swiper-button-next",
                                            prevEl: ".swiper-button-prev",
                                        },
                                        loop: true,// 添加循环播放功能
                                        slidesPerView: 1,
                                        centeredSlides: true
                                    });
                                });
                            </script>