Fluid-Right Elementor Wrapper for JetEngine / Slick Sliders This snippet creates a full-width band that stretches with the viewport (e.g. 1920px) but keeps its right edge aligned with Elementor’s content box width. It’s useful for carousels, sliders, or listing grids where you want content to “bleed” left but still snap to Elementor’s grid on th…

listing-grid-slider-fluid-right.html

/*Fluid-Right Elementor Wrapper for JetEngine / Slick Sliders

This snippet creates a full-width band that stretches with the viewport (e.g. 1920px) but keeps its right edge aligned with Elementor’s content box width.
It’s useful for carousels, sliders, or listing grids where you want content to “bleed” left but still snap to Elementor’s grid on the right side.

Use Case
	•	Showcase sliders (JetEngine, Slick, Elementor widgets) that need to look full-bleed while respecting Elementor’s content alignment.
	•	Aligns the right edge with Elementor’s boxed content while allowing the left edge to expand (fluid-right).
	•	Keeps navigation dots and arrows centered neatly under the cards.
*/

<!-- Full‑bleed band -->
<div id="listing-grid-band">
  <!-- Right‑aligned boxed content area -->
  <div id="listing-grid-wrapper">
    <!-- your slider / listing grid -->
    <div id="listing-dot-nav"></div>
    <div class="listing-arrows">
      <button class="listing-btn-prev" aria-label="Previous">←</button>
      <button class="listing-btn-next" aria-label="Next">→</button>
    </div>
  </div>
</div>

<style>
/* ===== Variables (uses Elementor's global width if available) ===== */
:root{
  /* Elementor → Site Settings → Layout → Content Width */
  --content-max: var(--e-global-content-width, 1140px);

  /* Left gutter equals half of leftover viewport width; never negative */
  --left-gutter: max(calc((100vw - var(--content-max)) / 2), 0px);

  /* Spacing you can tweak */
  --band-padding-y: clamp(24px, 6vw, 80px);
  --inner-pad-x: clamp(12px, 3vw, 24px);
}

/* ===== Full‑width band that stretches with screen ===== */
#listing-grid-band{
  width: 100%;
  padding-block: var(--band-padding-y);
  /* optional background for the band area */
  /* background: var(--your-band-bg, transparent); */
}

/* ===== Right‑aligned, boxed content area ===== */
#listing-grid-wrapper{
  box-sizing: border-box;
  width: 100%;
  /* Recreate the left gutter so the RIGHT edge lines up with Elementor’s content */
  padding-left: var(--left-gutter);
  padding-right: var(--inner-pad-x);
  margin: 0;
}

/* Keep media fluid inside */
#listing-grid-wrapper img{
  max-width: 100%;
  height: auto;
}

/* ===== Dots centered under the cards ===== */
#listing-dot-nav{
  display: flex;
  justify-content: center;
  margin-top: clamp(16px, 3vw, 28px);
}

/* Support dot markup rendered as <button> or <span> */
#listing-dot-nav .jet-slick-dots{
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
#listing-dot-nav .jet-slick-dots li{ display: inline-block; }
#listing-dot-nav .jet-slick-dots li button,
#listing-dot-nav .jet-slick-dots li span{
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  /* hide numeric labels when markup is <span>1</span> etc. */
  font-size: 0; line-height: 0;
  background: #c9c9c9;
}
#listing-dot-nav .jet-slick-dots li.slick-active button,
#listing-dot-nav .jet-slick-dots li.slick-active span{
  background: #111;
}

/* ===== Custom arrows living in the same right‑aligned box ===== */
.listing-arrows{
  display: flex;
  gap: 12px;
  justify-content: center;          /* center under dots/cards */
  margin-top: clamp(12px, 2.5vw, 20px);
}
.listing-arrows .listing-btn-prev,
.listing-arrows .listing-btn-next{
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid #cfd3d8;
  background: #fff;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}

/* ===== Responsive: when viewport <= content width, remove the gutter ===== */
@media (max-width: 1200px){
  #listing-grid-wrapper{ padding-left: 0; }
}

/* ===== RTL support (optional) ===== */
/* Swap inline start/end to keep "fluid-right" in RTL locales */
html[dir="rtl"] #listing-grid-wrapper{
  padding-left: var(--inner-pad-x);
  padding-right: var(--left-gutter);
}</style>