پرش به محتوا

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

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۸ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<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/26001515.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>
              <p>طراحی ساده و مدرن متناسب با فضای آشپزخانه</p>
             </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/26001513.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">
               <h3>کابینت نئوکلاسیک</h3>
               <h3>کابینت اکریلیک</h3>
              <p>ترکیب زیبایی کلاسیک با طراحی مدرن</p>
             </div>
             </div>
           </a>
           </a>
خط ۵۹: خط ۵۶:
           <a href="#" aria-label="کابینت کلاسیک یاشیل">
           <a href="#" aria-label="کابینت کلاسیک یاشیل">
             <img
             <img
               src="https://dl.faraghaib.ir/m/260015/26001514.jpg"
               src="https://dl.faraghaib.ir/m/260015-01/260015-01-33.jpg"
               alt="طراحی کابینت کلاسیک یاشیل"
               alt="طراحی کابینت کلاسیک یاشیل"
               loading="lazy">
               loading="lazy">
             <div class="yasheel-card-content">
             <div class="yasheel-card-content">
               <h3>کابینت کلاسیک</h3>
               <h3>کابینت کلاسیک</h3>
              <p>طراحی چشم‌نواز با جزئیات و ظرافت بیشتر</p>
             </div>
             </div>
           </a>
           </a>
خط ۷۳: خط ۶۹:
           <a href="#" aria-label="کابینت آشپزخانه یاشیل">
           <a href="#" aria-label="کابینت آشپزخانه یاشیل">
             <img
             <img
               src="https://dl.faraghaib.ir/m/260015/26001516.jpg"
               src="https://dl.faraghaib.ir/m/260015-01/260015-01-35.jpg"
               alt="اجرای کابینت آشپزخانه یاشیل"
               alt="اجرای کابینت آشپزخانه یاشیل"
               loading="lazy">
               loading="lazy">
             <div class="yasheel-card-content">
             <div class="yasheel-card-content">
               <h3>کابینت آشپزخانه</h3>
               <h3>کابینت آشپزخانه</h3>
              <p>استفاده بهینه از فضا با طراحی اختصاصی</p>
             </div>
             </div>
           </a>
           </a>
خط ۸۷: خط ۸۲:
           <a href="#" aria-label="طراحی اختصاصی کابینت یاشیل">
           <a href="#" aria-label="طراحی اختصاصی کابینت یاشیل">
             <img
             <img
               src="https://dl.faraghaib.ir/m/260015/26001517.jpg"
               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="طراحی اختصاصی کابینت یاشیل"
               alt="طراحی اختصاصی کابینت یاشیل"
               loading="lazy">
               loading="lazy">
             <div class="yasheel-card-content">
             <div class="yasheel-card-content">
               <h3>طراحی اختصاصی</h3>
               <h3>طراحی اختصاصی</h3>
              <p>طراحی کابینت متناسب با سلیقه و ابعاد فضای شما</p>
             </div>
             </div>
           </a>
           </a>
خط ۱۰۰: خط ۱۲۰:


       <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/26001542.jpg");
   background-position:top;
  background-size:cover;
   background-position:center;
   background-repeat:no-repeat;
   background-repeat:no-repeat;
  border-radius:2%;


   padding:70px 10px 25px;
   padding:70px 10px 25px;
خط ۱۴۲: خط ۱۶۲:
   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%;
}
}


/* عنوان روی تصویر */
/* عنوان */
.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;
خط ۱۸۸: خط ۲۱۳:
   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 100%;
 
   scroll-snap-align:start;
   scroll-snap-align:start;


   background:#fff;
   background:#7F7F7F;
 
   border-radius:10px;
   border-radius:10px;
   overflow:hidden;
   overflow:hidden;


  box-shadow:
   transition:transform .25s ease;
    0 5px 20px rgba(0,0,0,.18);
 
   transition:transform .25s ease,
            box-shadow .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 / .85;
   aspect-ratio:1 / 2;
 
   object-fit:cover;
   object-fit:cover;
}
}


.yasheel-card-content{
.yasheel-card-content{
  padding:12px 10px 14px;
   text-align:center;
   text-align:right;
}
}


.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;
}
}
خط ۳۵۶: خط ۴۰۸:
   .yasheel-card{
   .yasheel-card{
     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{
     padding:15px 14px 17px;
     padding:2px 0 2px;
   }
   }


خط ۳۸۱: خط ۴۲۷:
   }
   }
}
}
</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 1;
    }


     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.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);
 
      }
 
    }
  );
 
 
  /* =====================================
    حرکت خودکار هر 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;
      }


    const gap =
      /* در حالت RTL */
       parseFloat(getComputedStyle(track).gap) || 0;
       if(difference > 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);


})();
})();

نسخهٔ کنونی تا ‏۱۸ اوت ۲۰۲۶، ساعت ۱۲:۵۷

طراحی و اجرای کابینت

کابینت یاشیل

طراحی مدرن، ساخت کابینت آشپزخانه و اجرای تخصصی با متریال باکیفیت

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=الگو:کانتینر_اسلایدر_و_پس_زمینه&oldid=6623»