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

این تاپیک 2 پاسخ و 2 مشارکت کننده دارد . آخرین آپدیت توسط :  علی اسدی ،‏ 1 سال و 1 ماه پیش .

این تاپیک تاکنون 344 بازدید داشته است .

تگ شده :  ,

نویسنده پست
چهار شنبه ، 30 سپتامبر 2015     3:54 ب.ظ #


مینا معدنی پورراد

Subscriber
1 پست2 تاپیک

با سلام

برای درست کردن 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,.slide2,.slide3,.slide4,.slide5 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371566801_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/prod/40946/580x0-9_cropped_1371565525_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/prod/40946/580x0-9_cropped_1371564896_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}
}

اگر تعداد عکس ها بیشتر بشه باید کد جدید در سی اس اس نوشت .

لطفا راهنمایی کنید

با تشکر

 

0  تشکر
چهار شنبه ، 30 سپتامبر 2015     11:00 ب.ظ #


مینا معدنی پورراد

Subscriber
1 پست2 تاپیک


<div class='slider'>

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

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

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

</div>

0  تشکر
یکشنبه ، 25 اکتبر 2015     6:20 ب.ظ #


علی اسدی

Subscriber
10 پست1 تاپیک

درود بر شما

بنده این کار رو انجام دادم جواب داد

 

یا علی

0  تشکر
پست 1 تا 3 (از مجموع 3 پست)

برای پاسخ دادن به این تاپیک باید وارد سایت شوید .