اختصاص کد اسلایدر به تصاویر در سه دایو مجزا

[aminweb2]

با سلام
آقا ما سه div داریم توی هر دایو هم 3 تصویر
حالا ما می خواییم اون سه تصاویر هر دایو اسلاید بشه
به این شکل کد نوشتیم در کدپن :
http://codepen.io/aminweb/pen/EyoqoR

همونجور که می بینید مشکل اینه که تا اون 3 تصاویر div اول اسلاید نشده اون 2 تا div دیگه بنمایش درنمیاد تا اسلاید بشه...
ممنون میشم راهنمایی کنید خیییلی فوری هست مشکل
سپاس

[aminweb2]

آقا ممنون میشم راهنمایی کنید بدجور گیر هستیم.ممنون

[aminweb2]

از اساتید خواهش دارم یه نگاهی به کدهای ما بندازن.ممنون

[دانیال دزفولی]

هر چی فکر کردم متوجه نشدم هدف از این کار چیه ؟
کار سختی نیست ولی یه ذره عجیبه

اگه بگی هدف چیه شاید راه حل بهتری به ذهنم برسه

[aminweb2]

ببینید ما در فروشگاه خود در صفحه لیست محصولات که بصورت گرید هستش 20 محصول داریم در چهار ستون پنج ردیفی.
هر محصول یک دایو داره.و هر محصول هم 3 عکس (thumbnail) داره.حالا ما می خوایم این تامبنیل ها هر 2 ثانیه برای هر محصول اسلاید بشه.

[دانیال دزفولی]

این کار اصلا خوب نیست
چون کاربر گیج میشه و فورا صفحه رو میبینده

بهتره از اسلایدر آماده استفاده کنی
http://owlcarousel.owlgraphic.com/

بعد هر کدوم از محصول هارو اسلایدر کنی - و دکمه های بعدی و قبلی بذاری , یا هر طور دیگه

[aminweb2]

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

[دانیال دزفولی]

منم همینو گفتم
با جیکوئری اینطوری میشه


$('.products').each(function(){
$(this).slider(...) // code marbot be slider ba tavajo be har mahsol
})

[aminweb2]

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

// code marbot be slider ba tavajo be har mahsol

[دانیال دزفولی]

$('.products').each(function(){
$(this).owlCarousel({
loop:true,
margin:10,
nav:true,
})
})




http://owlcarousel.owlgraphic.com/demos/basic.html
دیگه باید کار با این اسلایدرو یاد بگیری (http://owlcarousel.owlgraphic.com/demos/demos.html)