سلام. امیدوارم خوب باشی
من بعد مدت ها دست به کد شدم و دارم VueJS یاد میگیرم. برای تمرین یه فروشگاه دارم می نویسم که mobile first هست. اما چالش امروز من آیتم های فروش ویژه بود که نیاز به نمایش داده شدن توی اسلایدر( carousel ) داشت..
از اونجایی که Buefy ی کتابخونه عالی برای VueJS بر پایه Bulma ست، از نمونه carousel های اون استفاده کردم. و میخواستم که هر دو ایتم ویژه تو ی اسلاید باشه و به صورت اتوماتیک بره جلو. پس از کد آماده زیر استفاده کردم.
لینک ورود به صفحه carousel (کلیک کنید)
<b-carousel-list></b-carousel-list>
این کد به شما کمک میکنه تا بتونین ایتم هارو با کلاس 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) }, },
امیدوارم کارت رو راه انداخته باشه :)
