کانتینر اسلایدر و پس زمینه/کابینت یاشیل - فراغیب

<html>

<!-- =========================
     اسلایدر کابینت یاشیل
========================= -->
<section class="yasheel-slider" aria-label="خدمات و محصولات کابینت یاشیل">

  <div class="yasheel-hero">

    <div class="yasheel-overlay"></div>

    <div class="yasheel-heading">
      <span>طراحی و اجرای کابینت</span>
      <h2>کابینت یاشیل</h2>
      <p>
        طراحی مدرن، ساخت کابینت آشپزخانه و اجرای تخصصی با متریال باکیفیت
      </p>
    </div>

    <div class="yasheel-slider-box">

      <button class="yasheel-btn yasheel-prev"
              type="button"
              aria-label="اسلاید قبلی">‹</button>

      <div class="yasheel-track">

        <!-- کارت 1 -->
        <article class="yasheel-card">
          <a href="#" aria-label="کابینت مدرن یاشیل">
            <img
              src="https://dl.faraghaib.ir/m/260015-01/260015-01-44.jpg"
              alt="طراحی و اجرای کابینت مدرن یاشیل"
              loading="lazy">
            <div class="yasheel-card-content">
              <h3>کابینت مدرن</h3>
            </div>
          </a>
        </article>

        <!-- کارت 2 -->
        <article class="yasheel-card">
          <a href="#" aria-label="کابینت اکریلیک یاشیل">
            <img
              src="https://dl.faraghaib.ir/m/260015-01/260015-01-15.jpg"
              alt="کابینت اکریلیک یاشیل"
              loading="lazy">
            <div class="yasheel-card-content">
              <h3>کابینت اکریلیک</h3>
            </div>
          </a>
        </article>

        <!-- کارت 3 -->
        <article class="yasheel-card">
          <a href="#" aria-label="کابینت کلاسیک یاشیل">
            <img
              src="https://dl.faraghaib.ir/m/260015-01/260015-01-33.jpg"
              alt="طراحی کابینت کلاسیک یاشیل"
              loading="lazy">
            <div class="yasheel-card-content">
              <h3>کابینت کلاسیک</h3>
            </div>
          </a>
        </article>

        <!-- کارت 4 -->
        <article class="yasheel-card">
          <a href="#" aria-label="کابینت آشپزخانه یاشیل">
            <img
              src="https://dl.faraghaib.ir/m/260015-01/260015-01-35.jpg"
              alt="اجرای کابینت آشپزخانه یاشیل"
              loading="lazy">
            <div class="yasheel-card-content">
              <h3>کابینت آشپزخانه</h3>
            </div>
          </a>
        </article>

        <!-- کارت 5 -->
        <article class="yasheel-card">
          <a href="#" aria-label="طراحی اختصاصی کابینت یاشیل">
            <img
              src="https://dl.faraghaib.ir/m/260015-01/260015-01-17.jpg"
              alt="طراحی اختصاصی کابینت یاشیل"
              loading="lazy">
            <div class="yasheel-card-content">
              <h3>طراحی اختصاصی</h3>
            </div>
          </a>
        </article>

        <!-- کارت 6 -->
        <article class="yasheel-card">
          <a href="#" aria-label="طراحی اختصاصی کابینت یاشیل">
            <img
              src="https://dl.faraghaib.ir/m/260015-01/260015-01-28.jpg"
              alt="طراحی اختصاصی کابینت یاشیل"
              loading="lazy">
            <div class="yasheel-card-content">
              <h3>طراحی اختصاصی</h3>
            </div>
          </a>
        </article>

        <!-- کارت 7 -->
        <article class="yasheel-card">
          <a href="#" aria-label="طراحی اختصاصی کابینت یاشیل">
            <img
              src="https://dl.faraghaib.ir/m/260015-01/260015-01-49.jpg"
              alt="طراحی اختصاصی کابینت یاشیل"
              loading="lazy">
            <div class="yasheel-card-content">
              <h3>طراحی اختصاصی</h3>
            </div>
          </a>
        </article>

      </div>

      <button class="yasheel-btn yasheel-next"
              type="button"
              aria-label="اسلاید بعدی">›</button>

    </div>

    <div class="yasheel-dots" aria-label="انتخاب اسلاید"></div>

  </div>
</section>


<style>

/* =====================================
   YASHEEL CABINET SLIDER
   Mobile First
===================================== */

.yasheel-slider{
  width:100%;
  margin:0;
  direction:rtl;
  font-family:IRANSans,Tahoma,Arial,sans-serif;
}

.yasheel-hero{
  position:relative;
  min-height:520px;

  background-image:url("https://dl.faraghaib.ir/m/260015-01/260015-01-42.jpg");
  background-position:top;
  background-repeat:no-repeat;
  border-radius:2%;

  padding:70px 10px 25px;
  overflow:hidden;
}

/* لایه روی عکس */
.yasheel-overlay{
  position:absolute;
  inset:0;

  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.18),
    rgba(0,0,0,.30)
  );

  z-index:1;
  border-radius:2%;
}

/* عنوان */
.yasheel-heading{
  position:relative;
  z-index:2;

  max-width:900px;
  margin:0 auto 35px;

  text-align:center;
  color:#fff;
}

.yasheel-heading span{
  display:inline-block;
  font-size:13px;
  margin-bottom:7px;
  opacity:.95;
}

.yasheel-heading h2{
  margin:0 0 8px;
  font-size:28px;
  font-weight:800;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}

.yasheel-heading p{
  margin:0;
  font-size:14px;
  line-height:1.9;
}


/* =====================================
   Slider
===================================== */

.yasheel-slider-box{
  position:relative;
  z-index:3;

  max-width:1200px;
  margin:auto;

  padding:0 25px;
}

.yasheel-track{
  display:flex;
  gap:12px;

  overflow:hidden;

  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;

  direction:rtl;

  scrollbar-width:none;
}

.yasheel-track::-webkit-scrollbar{
  display:none;
}

.yasheel-card{
  /* موبایل: یک کارت */
  flex:0 0 100%;

  scroll-snap-align:start;

  background:#7F7F7F;

  border-radius:10px;
  overflow:hidden;

  transition:transform .25s ease;
}

.yasheel-card a{
  display:block;
  height:100%;

  color:#fff;
  text-decoration:none;
}

.yasheel-card img{
  display:block;

  width:100%;
  aspect-ratio:1 / 2;

  object-fit:cover;
}

.yasheel-card-content{
  text-align:center;
}

.yasheel-card h3{
  margin:0 0 6px;

  color:#fff;

  font-size:18px;
  font-weight:700;
}

.yasheel-card p{
  margin:0;

  color:#666;

  font-size:11px;
  line-height:1.8;
}


/* =====================================
   دکمه های اسلایدر
===================================== */

.yasheel-btn{
  position:absolute;
  top:42%;
  z-index:5;

  width:36px;
  height:36px;

  border:0;
  border-radius:50%;

  background:rgba(255,255,255,.92);
  color:#333;

  font-size:27px;
  line-height:30px;

  cursor:pointer;

  box-shadow:0 3px 12px rgba(0,0,0,.2);

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0;
}

.yasheel-prev{
  right:0;
}

.yasheel-next{
  left:0;
}


/* =====================================
   نقاط
===================================== */

.yasheel-dots{
  position:relative;
  z-index:4;

  display:flex;
  justify-content:center;
  gap:6px;

  margin-top:18px;
}

.yasheel-dot{
  width:7px;
  height:7px;

  border:0;
  padding:0;

  border-radius:50%;

  background:#fff;

  opacity:.55;

  cursor:pointer;
}

.yasheel-dot.active{
  width:22px;
  border-radius:10px;
  opacity:1;
}


/* =====================================
   Tablet
===================================== */

@media (min-width:600px){

  .yasheel-hero{
    padding:80px 25px 35px;
  }

  .yasheel-card{
    flex-basis:calc((100% - 24px) / 3);
  }

  .yasheel-heading h2{
    font-size:34px;
  }

  .yasheel-heading p{
    font-size:15px;
  }
}


/* =====================================
   Desktop
===================================== */

@media (min-width:900px){

  .yasheel-hero{
    min-height:610px;
    padding-top:90px;
  }

  .yasheel-card{
    flex-basis:calc((100% - 36px) / 4);
  }

  .yasheel-card-content{
    padding:2px 0 2px;
  }

  .yasheel-card h3{
    font-size:17px;
  }

  .yasheel-card p{
    font-size:12px;
  }

  .yasheel-btn{
    width:42px;
    height:42px;
  }
}

</style>


<script>
(function(){

  const track = document.querySelector('.yasheel-track');
  const cards = document.querySelectorAll('.yasheel-card');
  const next = document.querySelector('.yasheel-next');
  const prev = document.querySelector('.yasheel-prev');
  const dotsBox = document.querySelector('.yasheel-dots');

  if(!track || !cards.length || !next || !prev) return;

  let index = 0;


  /* =====================================
     تعداد کارت های قابل نمایش
  ===================================== */

  function visibleCards(){

    /* موبایل: یک کارت */
    if(window.innerWidth < 600){
      return 1;
    }

    if(window.innerWidth < 900){
      return 3;
    }

    return 4;
  }


  /* =====================================
     حداکثر موقعیت اسلایدر
  ===================================== */

  function maxIndex(){

    return Math.max(
      0,
      cards.length - visibleCards()
    );

  }


  /* =====================================
     فاصله و اندازه هر کارت
  ===================================== */

  function getMove(){

    if(!cards[0]) return 0;

    const gap =
      parseFloat(
        getComputedStyle(track).gap
      ) || 0;

    return cards[0].getBoundingClientRect().width + gap;

  }


  /* =====================================
     حرکت اسلایدر
     اصلاح شده برای RTL
  ===================================== */

  function goToSlide(i){

    const max = maxIndex();

    index = Math.max(
      0,
      Math.min(i,max)
    );

    const move = getMove();

    track.scrollTo({
      left: -(move * index),
      behavior:'smooth'
    });


    /* فعال کردن نقطه */
    document
      .querySelectorAll('.yasheel-dot')
      .forEach(function(dot,n){

        dot.classList.toggle(
          'active',
          n === index
        );

      });

  }


  /* =====================================
     ساخت نقاط
  ===================================== */

  function createDots(){

    dotsBox.innerHTML = '';

    const total =
      maxIndex() + 1;

    for(let i=0; i<total; i++){

      const dot =
        document.createElement('button');

      dot.type = 'button';

      dot.className =
        'yasheel-dot' +
        (i === 0 ? ' active' : '');

      dot.setAttribute(
        'aria-label',
        'نمایش اسلاید ' + (i + 1)
      );

      dot.addEventListener(
        'click',
        function(){

          goToSlide(i);

        }
      );

      dotsBox.appendChild(dot);

    }

  }


  /* =====================================
     دکمه اسلاید بعدی
  ===================================== */

  next.addEventListener(
    'click',
    function(){

      const max = maxIndex();

      if(index < max){

        goToSlide(index + 1);

      }else{

        goToSlide(0);

      }

    }
  );


  /* =====================================
     دکمه اسلاید قبلی
  ===================================== */

  prev.addEventListener(
    'click',
    function(){

      const max = maxIndex();

      if(index > 0){

        goToSlide(index - 1);

      }else{

        goToSlide(max);

      }

    }
  );


  /* =====================================
     حرکت خودکار هر 3 ثانیه
  ===================================== */

  setInterval(function(){

    const max = maxIndex();

    if(index < max){

      goToSlide(index + 1);

    }else{

      goToSlide(0);

    }

  },3000);


  /* =====================================
     پشتیبانی از Swipe موبایل
  ===================================== */

  let startX = 0;
  let endX = 0;

  track.addEventListener(
    'touchstart',
    function(e){

      startX =
        e.touches[0].clientX;

    },
    {passive:true}
  );

  track.addEventListener(
    'touchend',
    function(e){

      endX =
        e.changedTouches[0].clientX;

      const difference =
        startX - endX;

      if(Math.abs(difference) < 40){
        return;
      }

      /* در حالت RTL */
      if(difference > 0){

        goToSlide(
          Math.min(index + 1,maxIndex())
        );

      }else{

        goToSlide(
          Math.max(index - 1,0)
        );

      }

    },
    {passive:true}
  );


  /* =====================================
     تغییر اندازه صفحه
  ===================================== */

  let resizeTimer;

  window.addEventListener(
    'resize',
    function(){

      clearTimeout(resizeTimer);

      resizeTimer =
        setTimeout(function(){

          index = 0;

          createDots();

          goToSlide(0);

        },150);

    }
  );


  /* =====================================
     اجرای اولیه
  ===================================== */

  createDots();
  goToSlide(0);


})();
</script>

</html>