راهنمایی : چگونه اسلاید شو داینامیک طراحی کنیم ؟

[prance333]

سلام

برای درست کردن image slider با css3 و html (بدون استفاده ازjquery) آیا میشه کدهایی رو در سی اس اس نوشت که وقتی تعداد عکس های اسلاید شو را در فایل html بیشتر میکنیم نیاز به تغییر کد در سی اس اس برای عکس های جدید نباشد ؟ من هر چی کد سرچ کردم با بیشتر شدن تعداد عکس ها نیاز به تغییر کد در سی اس اس داشت در غیر اینصورت عکس های اضافه شده به مشکل میخوردن


مثال :

Html :

<div class='slider'>

<div class='slide1'></div>

<div class='slide2'></div>

<div class='slide3'></div>

</div>

Css :

.slide1 {

background: url(http://media.dunkedcdn.com/assets/p...801_p17tbs0rrjqdt1u4dnk94fe4b63.jpg)no-repeat center;

background-size: cover;

animation:fade 8s infinite;

-webkit-animation:fade 8s infinite;


}

.slide2 {

background: url(http://media.dunkedcdn.com/assets/p...525_p17tbqpu0d69c21hetd77dh483.jpeg)no-repeat center;

background-size: cover;

animation:fade2 8s infinite;

-webkit-animation:fade2 8s infinite;

}

.slide3 {

background: url(http://media.dunkedcdn.com/assets/p...4896_p17tbq6n86jdo3ishhta3fv1i3.jpg)no-repeat center;

background-size: cover;

animation:fade3 8s infinite;

-webkit-animation:fade3 8s infinite;

}

@keyframes fade

{

0% {opacity:1}

33.333% { opacity: 0}

66.666% { opacity: 0}

100% { opacity: 1}

}

@keyframes fade2

{

0% {opacity:0}

33.333% { opacity: 1}

66.666% { opacity: 0 }

100% { opacity: 0}

}

@keyframes fade3

{

0% {opacity:0}

33.333% { opacity: 0}

66.666% { opacity: 1}

100% { opacity: 0}

}

 

[phpir4659]

ببین دوست عزیز با کمال احترامی که بهتون دارم تحقیق شما نادرست بوده یکم بیشتر تحقیق کن من هم یه لینک بهت میدم انشا الله که به نتیجه برسید
http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
بهتره از بوت استرپ استفاده بکنی . مشکلی داشتی در خدمتت هستم

 

[LeftHanded]

سلام
در ادامه پاسخ درست دوستمون منم بهتون اسلاید زیر رو توصیه می کنم. دیگه تو این دور زمونه کسی خودش اسلاید نمی زنه. تقریبا همه قالب های آماده خوب از این اسلاید رایگان استفاده می کنن:
owlcarousel1
owlcarousel2

 

[nilord]

سلام
در ادامه یاسخ درست دوستمون منم بهتون این سایت رو معرفی میکنم که اسلایدر های زیادی در اون هست
http://www.jqueryscript.net/slider/