Move Listing Grid Dots and Custom Nxt/Prv Button for Slider

listing-grid-slider-dot-and-button.js

<script>
/**
 * JetEngine/Slick: Move dots into #listing-dot-nav
 */
(function () {
  'use strict';
  if (typeof window.jQuery === 'undefined') return;
  var $ = window.jQuery;

  var DOTS = 'ul.jet-slick-dots';
  var TARGET = '#listing-dot-nav';
  var ROOT = '.jet-listing-grid'; // wrapper that Slick binds to

  function relocateDots() {
    var $dots = $(DOTS).first();
    var $target = $(TARGET);
    if ($dots.length && $target.length && !$dots.parent().is($target)) {
      $dots.appendTo($target);
    }
  }

  function debounce(fn, t){ var id; return function(){ clearTimeout(id); id=setTimeout(fn, t); }; }

  $(function () {
    setTimeout(relocateDots, 600); // first move
    $(ROOT).on('init.reloc reInit.reloc setPosition.reloc breakpoint.reloc afterChange.reloc', relocateDots);
    $(window).on('resize.reloc orientationchange.reloc', debounce(relocateDots, 120));
  });
})();
</script>

<script>
/**
 * JetEngine/Slick: Custom prev/next buttons
 */
(function () {
  'use strict';
  if (typeof window.jQuery === 'undefined') return;
  var $ = window.jQuery;

  $(function () {
    // Prev
    $('.listing-btn-prev').off('click.jetPrev').on('click.jetPrev', function (e) {
      e.preventDefault(); e.stopPropagation();
      var $prev = $('.jet-listing-grid__slider-icon.prev-arrow').first();
      if ($prev.length) $prev.trigger('click');
    });

    // Next
    $('.listing-btn-next').off('click.jetNext').on('click.jetNext', function (e) {
      e.preventDefault(); e.stopPropagation();
      var $next = $('.jet-listing-grid__slider-icon.next-arrow').first();
      if ($next.length) $next.trigger('click');
    });
  });
})();
</script>



<style>
    /* Elementor image widget overrides */
.elementor-widget-image .listing-btn-prev,
.elementor-widget-image .listing-btn-next {
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
}

/* Remove Elementor's default link styling */
.elementor-widget-image .listing-btn-prev:hover,
.elementor-widget-image .listing-btn-next:hover {
    text-decoration: none !important;
}

/* Prevent image dragging */
.listing-btn-prev .elementor-image img,
.listing-btn-next .elementor-image img,
.listing-btn-prev img,
.listing-btn-next img {
    user-select: none !important;
    -webkit-user-drag: none !important;
    pointer-events: none !important;
}

/* Ensure the container handles clicks */
.listing-btn-prev,
.listing-btn-next {
    pointer-events: auto !important;
}

/* Hide default Jet Engine navigation */
.jet-listing-grid__slider-icon.prev-arrow,
.jet-listing-grid__slider-icon.next-arrow {
    opacity: 0 !important;
    pointer-events: none !important;
    /* Alternative: hide completely */
    /* display: none !important; */
}

/* Hover effects for your custom buttons */
.listing-btn-prev:hover,
.listing-btn-next:hover {
    opacity: 0.8;
    transform: scale(1.05);
    transition: all 0.2s ease;
}

.listing-btn-prev:active,
.listing-btn-next:active {
    transform: scale(0.95);
}
/* Container that will receive the moved dots */
#listing-dot-nav {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

/* Dots list layout */
#listing-dot-nav .jet-slick-dots {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Each dot item */
#listing-dot-nav .jet-slick-dots li {
  display: inline-block;
}

/* The clickable “dot” – supports <button> or <span> */
#listing-dot-nav .jet-slick-dots li button,
#listing-dot-nav .jet-slick-dots li span {
  display: block;
  width: 12px;           /* adjust to taste */
  height: 12px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;

  /* Hide numeric labels */
  text-indent: -9999px;  /* or use font-size: 0; */
  overflow: hidden;

  /* Base appearance */
  background: #96A7B8;   /* inactive color */
}

/* Active/current slide dot */
#listing-dot-nav .jet-slick-dots li.slick-active button,
#listing-dot-nav .jet-slick-dots li.slick-active span {
  background: #71458C;      /* active color */
}

/* Optional: keyboard focus outline (applies if it ever renders as <button>) */
#listing-dot-nav .jet-slick-dots li button:focus {
  outline: 2px solid #555;
  outline-offset: 2px;
}

</style>