فراغیب

الگو:کانتینر اسلایدر و پس زمینه: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
```html
<html>
<html>
<!-- =========================
<!-- =========================
     اسلایدر کابینت یاشیل
     اسلایدر کابینت یاشیل
خط ۵: خط ۷:
<section class="yasheel-slider" aria-label="خدمات و محصولات کابینت یاشیل">
<section class="yasheel-slider" aria-label="خدمات و محصولات کابینت یاشیل">


  <!-- تصویر بزرگ پس زمینه -->
   <div class="yasheel-hero">
   <div class="yasheel-hero">


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


    <!-- عنوان سئو -->
     <div class="yasheel-heading">
     <div class="yasheel-heading">
       <span>طراحی و اجرای کابینت</span>
       <span>طراحی و اجرای کابینت</span>
خط ۱۹: خط ۱۹:
     </div>
     </div>


    <!-- اسلایدر -->
     <div class="yasheel-slider-box">
     <div class="yasheel-slider-box">


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


خط ۳۱: خط ۳۱:
           <a href="#" aria-label="کابینت مدرن یاشیل">
           <a href="#" aria-label="کابینت مدرن یاشیل">
             <img
             <img
               src="https://dl.faraghaib.ir/m/260015-01/260015-01-15.jpg"
               src="https://dl.faraghaib.ir/m/260015-01/260015-01-44.jpg"
               alt="طراحی و اجرای کابینت مدرن یاشیل"
               alt="طراحی و اجرای کابینت مدرن یاشیل"
               loading="lazy">
               loading="lazy">
             <div class="yasheel-card-content">
             <div class="yasheel-card-content">
               <h3>کابینت مدرن</h3>
               <h3>کابینت مدرن</h3>
             
             </div>
             </div>
           </a>
           </a>
خط ۴۳: خط ۴۲:
         <!-- کارت 2 -->
         <!-- کارت 2 -->
         <article class="yasheel-card">
         <article class="yasheel-card">
           <a href="#" aria-label="کابینت نئوکلاسیک یاشیل">
           <a href="#" aria-label="کابینت اکریلیک یاشیل">
             <img
             <img
               src="https://dl.faraghaib.ir/m/260015-01/260015-01-13.jpg"
               src="https://dl.faraghaib.ir/m/260015-01/260015-01-15.jpg"
               alt="کابینت نئوکلاسیک یاشیل"
               alt="کابینت اکریلیک یاشیل"
               loading="lazy">
               loading="lazy">
             <div class="yasheel-card-content">
             <div class="yasheel-card-content">
خط ۵۸: خط ۵۷:
           <a href="#" aria-label="کابینت کلاسیک یاشیل">
           <a href="#" aria-label="کابینت کلاسیک یاشیل">
             <img
             <img
               src="https://dl.faraghaib.ir/m/260015-01/260015-01-14.jpg"
               src="https://dl.faraghaib.ir/m/260015-01/260015-01-33.jpg"
               alt="طراحی کابینت کلاسیک یاشیل"
               alt="طراحی کابینت کلاسیک یاشیل"
               loading="lazy">
               loading="lazy">
خط ۷۱: خط ۷۰:
           <a href="#" aria-label="کابینت آشپزخانه یاشیل">
           <a href="#" aria-label="کابینت آشپزخانه یاشیل">
             <img
             <img
               src="https://dl.faraghaib.ir/m/260015-01/260015-01-16.jpg"
               src="https://dl.faraghaib.ir/m/260015-01/260015-01-35.jpg"
               alt="اجرای کابینت آشپزخانه یاشیل"
               alt="اجرای کابینت آشپزخانه یاشیل"
               loading="lazy">
               loading="lazy">
خط ۹۶: خط ۹۵:


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


     </div>
     </div>


    <!-- نقطه‌های اسلایدر -->
     <div class="yasheel-dots" aria-label="انتخاب اسلاید"></div>
     <div class="yasheel-dots" aria-label="انتخاب اسلاید"></div>


خط ۱۰۸: خط ۱۰۷:


<style>
<style>
/* =====================================
/* =====================================
   YASHEEL CABINET SLIDER
   YASHEEL CABINET SLIDER
خط ۱۲۴: خط ۱۲۴:
   min-height:520px;
   min-height:520px;


  /* تصویر اصلی بزرگ */
   background-image:url("https://dl.faraghaib.ir/m/260015-01/260015-01-42.jpg");
   background-image:url("https://dl.faraghaib.ir/m/260015-01/260015-01-42.jpg");
  //background-size:cover;
   background-position:top;
   background-position:top;
   background-repeat:no-repeat;
   background-repeat:no-repeat;
   border-radius:2%;
   border-radius:2%;
   padding:70px 10px 25px;
   padding:70px 10px 25px;
   overflow:hidden;
   overflow:hidden;
خط ۱۳۸: خط ۱۳۷:
   position:absolute;
   position:absolute;
   inset:0;
   inset:0;
   background:linear-gradient(
   background:linear-gradient(
     to bottom,
     to bottom,
خط ۱۴۳: خط ۱۴۳:
     rgba(0,0,0,.30)
     rgba(0,0,0,.30)
   );
   );
   z-index:1;
   z-index:1;
   border-radius:2%;
   border-radius:2%;
}
}


/* عنوان روی تصویر */
/* عنوان */
.yasheel-heading{
.yasheel-heading{
   position:relative;
   position:relative;
   z-index:2;
   z-index:2;
   max-width:900px;
   max-width:900px;
   margin:0 auto 35px;
   margin:0 auto 35px;
   text-align:center;
   text-align:center;
   color:#fff;
   color:#fff;
خط ۱۶۴: خط ۱۶۷:
}
}


.yasheel-heading h2 h3{
.yasheel-heading h2{
   margin:0 0 8px;
   margin:0 0 8px;
   font-size:28px;
   font-size:28px;
خط ۱۸۵: خط ۱۸۸:
   position:relative;
   position:relative;
   z-index:3;
   z-index:3;
   max-width:1200px;
   max-width:1200px;
   margin:auto;
   margin:auto;
   padding:0 25px;
   padding:0 25px;
}
}
خط ۱۹۳: خط ۱۹۸:
   display:flex;
   display:flex;
   gap:12px;
   gap:12px;
   overflow:hidden;
   overflow:hidden;
   scroll-behavior:smooth;
   scroll-behavior:smooth;
   scroll-snap-type:x mandatory;
   scroll-snap-type:x mandatory;
   direction:rtl;
   direction:rtl;
  scrollbar-width:none;
}
.yasheel-track::-webkit-scrollbar{
  display:none;
}
}


.yasheel-card{
.yasheel-card{
   flex:0 0 calc((100% - 12px) / 2);
   flex:0 0 calc((100% - 12px) / 2);
   scroll-snap-align:start;
   scroll-snap-align:start;
   background:#fff;
 
   background:#7F7F7F;
 
   border-radius:10px;
   border-radius:10px;
   overflow:hidden;
   overflow:hidden;
   transition:transform .25s ease;
   transition:transform .25s ease;
}
}
خط ۲۱۱: خط ۲۲۹:
   display:block;
   display:block;
   height:100%;
   height:100%;
   color:#222;
 
   color:#fff;
   text-decoration:none;
   text-decoration:none;
}
}
خط ۲۱۷: خط ۲۳۶:
.yasheel-card img{
.yasheel-card img{
   display:block;
   display:block;
   width:100%;
   width:100%;
   aspect-ratio:1 / 2;
   aspect-ratio:1 / 2;
   object-fit:cover;
   object-fit:cover;
}
}


.yasheel-card-content{
.yasheel-card-content{
 
   text-align:center;
   text-align:center;
}
}
خط ۲۲۹: خط ۲۴۹:
.yasheel-card h3{
.yasheel-card h3{
   margin:0 0 6px;
   margin:0 0 6px;
   color:#333;
 
   font-size:15px;
   color:#fff;
 
   font-size:18px;
   font-weight:700;
   font-weight:700;
}
}
خط ۲۳۶: خط ۲۵۸:
.yasheel-card p{
.yasheel-card p{
   margin:0;
   margin:0;
   color:#666;
   color:#666;
   font-size:11px;
   font-size:11px;
   line-height:1.8;
   line-height:1.8;
خط ۲۶۶: خط ۲۹۰:


   box-shadow:0 3px 12px rgba(0,0,0,.2);
   box-shadow:0 3px 12px rgba(0,0,0,.2);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
}


خط ۲۹۵: خط ۳۲۵:
   width:7px;
   width:7px;
   height:7px;
   height:7px;
   border:0;
   border:0;
   padding:0;
   padding:0;
   border-radius:50%;
   border-radius:50%;
   background:#fff;
   background:#fff;
   opacity:.55;
   opacity:.55;
   cursor:pointer;
   cursor:pointer;
}
}
خط ۳۴۸: خط ۳۸۳:
     flex-basis:calc((100% - 36px) / 4);
     flex-basis:calc((100% - 36px) / 4);
   }
   }
/*  .yasheel-card:hover{
    transform:translateY(-5px);
    box-shadow:
      0 12px 30px rgba(0,0,0,.25);
  }*/


   .yasheel-card-content{
   .yasheel-card-content{
خط ۳۷۲: خط ۴۰۱:
   }
   }
}
}
</style>
</style>


خط ۳۸۴: خط ۴۱۴:
   const dotsBox = document.querySelector('.yasheel-dots');
   const dotsBox = document.querySelector('.yasheel-dots');


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


   let index = 0;
   let index = 0;


   /* تعداد کارت قابل مشاهده */
 
   /* =====================================
    تعداد کارت های قابل نمایش
  ===================================== */
 
   function visibleCards(){
   function visibleCards(){


     if(window.innerWidth < 600) return 2;
     if(window.innerWidth < 600){
      return 2;
    }


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


     return 4;
     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 راست به چپ است،
      مقدار scrollLeft باید منفی باشد.
    */
 
    track.scrollTo({
      left: -(move * index),
      behavior:'smooth'
    });
 
 
    /* فعال کردن نقطه */
    document
      .querySelectorAll('.yasheel-dot')
      .forEach(function(dot,n){
 
        dot.classList.toggle(
          'active',
          n === index
        );
 
      });
 
  }
 
 
  /* =====================================
    ساخت نقاط
  ===================================== */
 
   function createDots(){
   function createDots(){


خط ۴۰۴: خط ۵۲۰:


     const total =
     const total =
       Math.max(1, cards.length - visibleCards() + 1);
       maxIndex() + 1;


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


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


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


       dot.setAttribute(
       dot.setAttribute(
خط ۴۱۸: خط ۵۳۸:
       );
       );


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


        index = i;
          goToSlide(i);
        goToSlide(index);


       });
        }
       );


       dotsBox.appendChild(dot);
       dotsBox.appendChild(dot);
     }
     }
   }
   }


  function goToSlide(i){


     const card = cards[0];
  /* =====================================
    دکمه اسلاید بعدی
  ===================================== */
 
  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);
 
      }
 
    }
  );
 
 
  /* =====================================
    پشتیبانی از 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
      */


    const gap =
       if(difference > 0){
       parseFloat(getComputedStyle(track).gap) || 0;


    const move =
        goToSlide(
      card.offsetWidth + gap;
          Math.min(index + 1,maxIndex())
        );


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


    document
        goToSlide(
      .querySelectorAll('.yasheel-dot')
          Math.max(index - 1,0)
      .forEach((dot,n)=>{
         );
         dot.classList.toggle('active',n === i);
      });
  }


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


     const max =
     },
      Math.max(0,cards.length - visibleCards());
    {passive:true}
  );


    index++;


    if(index > max)
  /* =====================================
      index = 0;
    تغییر اندازه صفحه
  ===================================== */


    goToSlide(index);
  let resizeTimer;


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


  prev.addEventListener('click',function(){
      clearTimeout(resizeTimer);


    const max =
      resizeTimer =
      Math.max(0,cards.length - visibleCards());
        setTimeout(function(){


    index--;
          index = 0;


    if(index < 0)
          createDots();
      index = max;


    goToSlide(index);
          goToSlide(0);


  });
        },150);


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


    index = 0;
    createDots();


   });
   /* =====================================
    اجرای اولیه
  ===================================== */


   createDots();
   createDots();
  goToSlide(0);


})();
})();
خط ۴۹۲: خط ۷۰۶:


</html>
</html>
```
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:کانتینر_اسلایدر_و_پس_زمینه»