نحوه ایجاد یک چرخ فلک گواهی با Tailwind CSS و جاوا اسکریپت

بیایید یک چرخ فلک را با Tailwind CSS و جاوا اسکریپت دوباره بسازیم. مشابه قبلی با Alpine.js، اما با جاوا اسکریپت.

آن را به صورت زنده ببینید و کد را دریافت کنید

چرا چرخ فلک؟

چرخ فلک نوعی لغزنده است که مجموعه ای از تصاویر یا محتوا را در یک حلقه پیوسته نمایش می دهد. معمولاً در طراحی وب برای نمایش چندین تصویر یا محتوا در یک صفحه استفاده می شود. چرخ فلک به کاربران این امکان را می دهد که به راحتی در محتوا حرکت کنند و آن را به شیوه ای بصری جذاب مشاهده کنند.

موارد استفاده کنید:

• لیست محصولات: از چرخ فلک می توان برای نمایش مجموعه ای از محصولات در یک صفحه استفاده کرد و به کاربران این امکان را می دهد که به راحتی در محصولات حرکت کنند و آنها را به شیوه ای بصری جذاب مشاهده کنند.
• پست های وبلاگ: از چرخ فلک می توان برای نمایش مجموعه ای از پست های وبلاگ در یک صفحه استفاده کرد و به کاربران این امکان را می دهد که به راحتی در پست های وبلاگ حرکت کنند و آنها را به شیوه ای بصری جذاب مشاهده کنند.
• مقالات خبری: از چرخ فلک می توان برای نمایش یک سری مقالات خبری در یک صفحه استفاده کرد و به کاربران این امکان را می دهد که به راحتی در مقالات خبری حرکت کنند و آنها را به شیوه ای جذاب مشاهده کنند.
• گالری تصاویر: از چرخ فلک می توان برای نمایش مجموعه ای از تصاویر در یک صفحه استفاده کرد و به کاربران این امکان را می دهد که به راحتی در میان تصاویر حرکت کنند و آنها را به شیوه ای بصری جذاب مشاهده کنند.
• گالری های ویدئویی: از چرخ فلک می توان برای نمایش مجموعه ای از ویدیوها در یک صفحه استفاده کرد و به کاربران این امکان را می دهد که به راحتی در میان فیلم ها حرکت کنند و آنها را به شیوه ای بصری جذاب مشاهده کنند.

بیا شروع کنیم

درک کد:

ساختار

• ìd=”carousel”: این شناسه چرخ فلک است. برای شناسایی چرخ فلک در جاوا اسکریپت استفاده می شود.
• aria-labelledby=”carousel-label” role=”region” tabindex=”0″: این ویژگی های ARIA است که برای دسترسی به چرخ فلک استفاده می شود.

دکمه ها

• : این دکمه ای است که برای پیمایش به اسلاید قبلی استفاده می شود.
• : این دکمه ای است که برای پیمایش به اسلاید بعدی استفاده می شود.

ظرف اسلاید

• : This is the container that will be used to display the slides. It has the ARIA attributes that will be used to make the slides accessible.

  The slides
  

  • role="option": این ویژگی ARIA است که برای دسترسی به اسلایدها استفاده می شود. در اینجا محتوای اسلایدها قرار خواهد گرفت.

   
   id="carousel">
     
   aria-labelledby="carousel-label" role="region" tabindex="0">
       
  
          id="prevButton" tabindex="0">
            aria-hidden="true">←
            class="sr-only">Skip to previous slide page
         
          id="nextButton" tabindex="0">
            aria-hidden="true">→
            class="sr-only">Skip to next slide page
         
       
       
   class=" snap-mandatory snap-x " aria-labelledby="carousel-content-label" role="listbox" tabindex="0" id="slider">
         
   role="option">
           
         
       
     
   
  

  فیلمنامه
  

  شنونده رویداد
  

  • document.addEventListener("DOMContentLoaded", () => {: این شنونده رویدادی است که برای افزودن شنوندگان رویداد به چرخ فلک استفاده می شود.
  • const slider = document.getElementById("slider");: این کدی است که برای دریافت عنصر اسلایدر استفاده می شود.
  • const prevButton = document.getElementById("prevButton");: این کدی است که برای دریافت عنصر دکمه قبلی استفاده می شود.
  • const nextButton = document.getElementById("nextButton");: این کدی است که برای دریافت عنصر دکمه بعدی استفاده می شود.
  • let skip = 1;: این کدی است که برای تنظیم مقدار پرش استفاده می شود.

  عملکرد وضعیت دکمه به روز رسانی
  

  • const updateButtonState = () => {: این کدی است که برای به روز رسانی وضعیت دکمه استفاده می شود.
  • const atBeginning = slider.scrollLeft === 0;: این کدی است که برای بررسی اینکه آیا چرخ فلک در ابتدا است یا خیر استفاده می شود.
  • const atEnd = slider.scrollLeft + slider.clientWidth >= slider.scrollWidth;: این کدی است که برای بررسی قرار گرفتن چرخ فلک در انتهای آن استفاده می شود.
  • prevButton.classList.toggle("opacity-50", atBeginning);: این کدی است که برای تغییر شفافیت دکمه قبلی استفاده می شود.
  • prevButton.setAttribute("aria-disabled", atBeginning);: این کدی است که برای تنظیم ویژگی aria-disabled دکمه قبلی استفاده می شود.
  • prevButton.setAttribute("tabindex", atBeginning ? "-1" : "0");: این کدی است که برای تنظیم tabindex دکمه قبلی استفاده می شود.
  • nextButton.classList.toggle("opacity-50", atEnd);: این کدی است که برای تغییر شفافیت دکمه بعدی استفاده می شود.
  • nextButton.setAttribute("aria-disabled", atEnd);: این کدی است که برای تنظیم ویژگی aria-disabled دکمه بعدی استفاده می شود.
  • nextButton.setAttribute("tabindex", atEnd ? "-1" : "0");: این کدی است که برای تنظیم tabindex دکمه بعدی استفاده می شود.

  اسکرول برای عملکرد
  

  • const scrollTo = (strategy) => {: این کدی است که برای پیمایش چرخ فلک استفاده می شود.
  • let current = slider.scrollLeft;: این کدی است که برای بدست آوردن موقعیت اسکرول فعلی چرخ فلک استفاده می شود.
  • let offset = slider.firstElementChild.getBoundingClientRect().width;: این کدی است که برای بدست آوردن عرض اسلاید اول استفاده می شود.
  • slider.scrollTo({: این کدی است که برای پیمایش چرخ فلک استفاده می شود.
  • left: strategy(current, offset),: این کدی است که برای تنظیم موقعیت اسکرول چرخ فلک استفاده می شود.
  • behavior: "smooth",: این کدی است که برای تنظیم رفتار اسکرول استفاده می شود.

  توابع بعدی و قبلی
  

  • const next = () => scrollTo((current, offset) => current + offset * skip);: این کدی است که برای اسکرول چرخ فلک به اسلاید بعدی استفاده می شود.
  • const prev = () => scrollTo((current, offset) => current - offset * skip);: این کدی است که برای اسکرول چرخ فلک به اسلاید قبلی استفاده می شود.

  شنوندگان رویداد
  

  • prevButton.addEventListener("click", prev);: این کدی است که برای افزودن شنونده رویداد به دکمه قبلی استفاده می شود.
  • nextButton.addEventListener("click", next);: این کدی است که برای افزودن شنونده رویداد به دکمه بعدی استفاده می شود.
  • slider.addEventListener("scroll", updateButtonState);: این کدی است که برای افزودن شنونده رویداد به چرخ فلک استفاده می شود.
  • updateButtonState();: این کدی است که برای به روز رسانی وضعیت دکمه استفاده می شود.

  document.addEventListener("DOMContentLoaded", () => {
      const slider = document.getElementById("slider");
      const prevButton = document.getElementById("prevButton");
      const nextButton = document.getElementById("nextButton");
      let skip = 1;
  
      const updateButtonState = () => {
          const atBeginning = slider.scrollLeft === 0;
          const atEnd =
              slider.scrollLeft + slider.clientWidth >= slider.scrollWidth;
          prevButton.classList.toggle("opacity-50", atBeginning);
          prevButton.setAttribute("aria-disabled", atBeginning);
          prevButton.setAttribute("tabindex", atBeginning ? "-1" : "0");
          nextButton.classList.toggle("opacity-50", atEnd);
          nextButton.setAttribute("aria-disabled", atEnd);
          nextButton.setAttribute("tabindex", atEnd ? "-1" : "0");
      };
  
      const scrollTo = (strategy) => {
          let current = slider.scrollLeft;
          let offset = slider.firstElementChild.getBoundingClientRect().width;
          slider.scrollTo({
              left: strategy(current, offset),
              behavior: "smooth",
          });
      };
  
      const next = () => scrollTo((current, offset) => current + offset * skip);
      const prev = () => scrollTo((current, offset) => current - offset * skip);
  
      prevButton.addEventListener("click", prev);
      nextButton.addEventListener("click", next);
      slider.addEventListener("scroll", updateButtonState);
  
      updateButtonState();
  });
  

  نتیجه
  

  این یک چرخ فلک ساده است که می تواند برای هر نوع محتوایی مانند فهرست محصولات، پست های وبلاگ، مقالات خبری یا گالری تصاویر استفاده شود. درک کد آسان است و ساختار آن واضح است. استفاده از Tailwind CSS و جاوا اسکریپت استایل دادن به چرخ فلک و افزودن تعامل را آسان می کند. به یاد داشته باشید که آن را تا حد امکان در دسترس قرار دهید، و شما آماده هستید!

  امیدوارم از این آموزش لذت برده باشید و روز خوبی داشته باشید!