https://virgool.io/feed/@mojansafaei من موژانم. دانشجوی ارشد مهندسی نرم افزار. عاشق یادگرفتن چیزای جدیدم و از اینکه بیکار باشم خوشم نمیاد. برای همین همیشه مشغول انجام ی کاریم. خوشحال میشم بتونم دانسته‌هامو با بقیه به اشتراک بذارم :) fa 2026-04-15 10:29:50 https://files.virgool.io/upload/users/824224/avatar/S8iBmq.png?height=120&width=120 https://virgool.io/@mojansafaei https://virgool.io/@mojansafaei/%D8%A7%D8%B3%D9%84%D8%A7%DB%8C%D8%AF%D8%B1-carousel-%D8%A2%D8%B3%D9%88%D9%86-%D8%A8%D8%A7-buefy-%D9%88-%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D8%AA%D8%A7%D8%AE%DB%8C%D8%B1-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%87%D8%B1-%D8%A2%DB%8C%D8%AA%D9%85-f2pxclhxixsc سلام. امیدوارم خوب باشیمن بعد مدت ها دست به کد شدم و دارم VueJS یاد میگیرم. برای تمرین یه فروشگاه دارم می نویسم که mobile first هست. اما چالش امروز من آیتم های فروش ویژه بود که نیاز به نمایش داده شدن توی اسلایدر( carousel ) داشت..از اونجایی که Buefy ی کتابخونه عالی برای VueJS بر پایه Bulma ست، از نمونه carousel های اون استفاده کردم. و میخواستم که هر دو ایتم ویژه تو ی اسلاید باشه و به صورت اتوماتیک بره جلو. پس از کد آماده زیر استفاده کردم. لینک ورود به صفحه carousel (کلیک کنید)<b-carousel-list></b-carousel-list>این کد به شما کمک میکنه تا بتونین ایتم هارو با کلاس Card تعریف کنین و خیلی راحت از کدهای پیچیده نجاتتون میده.اسلایدر با کلاس cardاما چالشم اونجا بود که این لیست به صورت اتوماتیک جلو نمیرفت و حتما نیازمند کلیک بود. میشد خیلی کارها کرد اما شاید مزیت استفاده از carousel-list رو از من می گرفت.بعد از کلی سرچ متوجه شدم اگه for یا foreach بنویسم، نمیتونم روی آیتم های میانی تاخیری داشته باشم و ایتم ها از اولی با سرعت میره به آخری...از setTimeout هم استفاده کردم همراه با for اما نشد که نشد...و اما راه حل منمن اومدم با if و else و setInterval این مشکل رو حل کردم. و الان یه اسلایدر خوشگل دارم که مث ساعت کار میکنه و خودش میاد از اول و delay خوبی روی هر آیتم داره. mounted() { this.playCarousel() }, methods: { info(value) { //its for b-carousel-list this.test = value }, playCarousel() { setInterval(() => { this.info(this.counter) //intial counter = 0; if (this.counter === this.items.length - 2 ) { //items is my array for product info this.counter = 0 } else { this.counter++ } }, 2000) }, }, امیدوارم کارت رو راه انداخته باشه :) موژان صفائی موژان صفائی Mon, 19 Apr 2021 22:19:16 +0430