XF 2.3 the logo slider does not appear in the thread view

[hakyangler]

what is the mistake here, I wonder?

<!-- /template: PAGE_CONTAINER or custom widget -->
<h3 style="text-align: center; font-weight: bold; margin-bottom: 5px; margin-top: 0px;">OM-Supporter</h3>
<ul id="logoSlider" class="light-slider"></ul>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightslider@1.1.6/dist/css/lightslider.min.css" />
<style>
.light-slider {
  list-style: none outside none;
  padding: 0;
  margin: 0;
  border-width: 0px !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  display: flex;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.light-slider li {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 100px;
  padding: 0 10px;
  box-sizing: border-box;
  user-select: none;
  scroll-snap-align: center;
  flex-shrink: 0;
}

.light-slider a.disable-click {
  pointer-events: none;
}

.light-slider img {
  max-height: 80px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  pointer-events: none;
  user-select: none;
}

@media screen and (max-width: 480px) {
  .light-slider li {
    padding: 0 5px;
    height: 80px;
  }

  .light-slider img {
    max-height: 60px;
  }
}
</style>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lightslider@1.1.6/dist/js/lightslider.min.js"></script>
<script>
$(document).ready(function() {
  const $slider = $('#logoSlider');

  $.getJSON('https://oltamisina.com/logo-list.php', function(logoUrls) {

    logoUrls = logoUrls.sort(() => Math.random() - 0.5);

    logoUrls.forEach((url, i) => {
      const slide = `<li><a href="${url}" target="_blank" rel="noopener"><img src="${url}" alt="Logo ${i + 1}" /></a></li>`;
      $slider.append(slide);
    });

    let isDragging = false;
    let dragStartX = 0;
    let dragDistance = 0;

    $slider.lightSlider({
      item: 6,
      loop: true,
      slideMove: 1,
      slideMargin: 10,
      auto: true,
      pause: 3000,
      speed: 600,
      controls: false,
      pager: false,
      swipeThreshold: 20,
      enableTouch: true,
      enableDrag: true,
      responsive: [
        {
          breakpoint: 768,
          settings: {
            item: 3,
            slideMove: 1
          }
        },
        {
          breakpoint: 480,
          settings: {
            item: 1,
            slideMove: 1
          }
        }
      ],
      onBeforeStart: function() {
        $slider.find('a').addClass('disable-click');
      },
      onAfterSlide: function() {
        setTimeout(function() {
          if (!isDragging) $slider.find('a').removeClass('disable-click');
        }, 100);
      },
      onDragStart: function() {
        isDragging = true;
        $slider.find('a').addClass('disable-click');
      },
      onDragEnd: function() {
        setTimeout(function() {
          isDragging = false;
          $slider.find('a').removeClass('disable-click');
        }, 200);
      }
    });

    // 🔧 Mouse ve touch sürüklemede imleç takılmasını önleyen yapı
    $slider.on('mousedown touchstart', function(e) {
      dragStartX = (e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX);
      dragDistance = 0;
    });

    $slider.on('mousemove touchmove', function(e) {
      const currentX = (e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX);
      dragDistance = Math.abs(currentX - dragStartX);
    });

    $slider.on('mouseup touchend', function(e) {
      if (dragDistance > 10) {
        // sadece sürükleme yapıldı, tıklama engellenmez
      }
    });
  });
});
</script>

 

[Mr Lucky]

what is the mistake here, I wonder?

Is it a trick question?

You have an unordered list tag with no list items?