اسکرول کردن دستی با موس در اسلایدر محصول ساخته شده با css

چجوری میشه اینو با کدنویسی فعال کرد که با موس بتونم محصولات رو به چپ و راست بکشونم؟؟؟؟🙏

درود خوبی...
یه نگاهی به ویدئو زیر بنداز:
https://www.youtube.com/watch?v=98gfjHUJeFY

ممنون دستت درد رایموند نکنه ولی من برنامه نویسی بلد نیستم
خودت بلدی درستش کنی؟؟

@mehdishams85

ببین با کد زیر حالت لمسی فقط برای موبایل کار می کند.

.wc-block-grid__products {
  touch-action: manipulation;
}

فقط کافیه این کد در فایل style.css قرار بگیره...
اگر بلد نیستی, دسترسی بده...

مرسی تو حالت موبایل مشکلی ندارم و کار میکنه
تو دسکتاپ کار نمیکنه
فک کنم با جاوا اسکریپت باید درست کرد

دوست عزیز اینا event میخوره یعنی اون چیزی که شما ساختی با همین overflow و اینا فقط با حالت تاچ کردن کار میکنه و درگش فعال نیستش و نمیشه هم فعالش کرد در حقیقت فقط این حالت برا گوشی خوبه و برای صفحه های بزرگ یا باید کاربر اون اسکرول بار رو بگیره و درگ کنه تا تکون بخوره

راحلش چیه؟ باید با جاوااسکریپت اسلایدر بسازید تا هم با رویداد درگ کار کنه هم با تاچ موبایل

مرسی از راهنمایی تون ossvahid@

درود @mehdishams85

شما میتونید از اسلایدر های بوت استرپ استفاده کنید
مانند کد زیر
برای دریافت نمونه های بیشتر از این اسلایدر های زیبا میتونید به سایت بوت استرپ به نشانی https://getbootstrap.com/docs/4.0/components/carousel/

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

ممنونم ازتون.