ایجاد حلقه

این تاپیک 10 پاسخ و 3 مشارکت کننده دارد . آخرین آپدیت توسط :  s.alifarrokh ،‏ 2 سال و 7 ماه پیش .

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

نویسنده پست
پنجشنبه ، 1 می 2014     6:46 ب.ظ #


masoudd

Subscriber
4 پست1 تاپیک

سلام
اسلایدر زیر رو خیلی نیاز دارم اما مشکلی که داره عکس های خودش رو به صورت حلقه نشان نمی ده و باید کار بر اونو حرکت بده .
برای نمایش پشت سر هم عکس ها کمکم کنید.

 

<article id="slider">
<div>
<p>
<span>Elegant Responsive Pure CSS3 Slider</span>
</p>
</div>
<input checked type='radio' name='slider' id='slide1'/>
<input type='radio' name='slider' id='slide2'/>
<input type='radio' name='slider' id='slide3'/>
<input type='radio' name='slider' id='slide4'/>
<input type='radio' name='slider' id='slide5'/>
<div id="slides">
<div id="container">
<div class="inner">
<article>
<img src="http://placehold.it/942X400"/>
</article>
<article>
<div class='caption'>
<bar>A Bubble on Flower</bar>
</div>
<img src="http://0.s3.envato.com/files/84450220/img/Dummy1-942X400.jpg"/>
</article>
<article>
<div class='caption'>
<bar>A Small Elephant <a rel="nofollow" href="#">read more</a></bar>
</div>
<img src="http://0.s3.envato.com/files/84450220/img/Dummy2-942X400.jpg"/>
</article>
<article>
<div class='caption'>
<bar>A Yellow Flower <a rel="nofollow" href="#">read more</a></bar>
</div>
<img src="http://0.s3.envato.com/files/84450220/img/Dummy3-942X400.jpg"/>
</article>
<article>
<div class='caption'>
<bar>A Pink Flower</bar>
</div>
<img src="http://0.s3.envato.com/files/84450220/img/Dummy4-942X400.jpg"/>
</article>
</div>
</div>
</div>
<div id="commands">
<label for='slide1'></label>
<label for='slide2'></label>
<label for='slide3'></label>
<label for='slide4'></label>
<label for='slide5'></label>
</div>
<div id="active">
<label for='slide1'></label>
<label for='slide2'></label>
<label for='slide3'></label>
<label for='slide4'></label>
<label for='slide5'></label>
</div>
</article>


html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tr,th,td,article,aside,canvas,details,embed,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
body{line-height:1}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
q,blockquote{quotes:none}
q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}
a img{border:none}
article{display:block}
body{background:#f0523f;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-weight:bold;font-size:16px;margin:12px 0}
span{margin:35px 0 5px;font-size:26px;font-weight:normal;color:#fff}
#slider{ transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;text-align:center}
h2{margin:40px 0 25px;border-bottom:1px solid #bbb;padding:0 0 10px}
p{margin:20px 0 16px}
strong{font-weight:bold}
label,a{color:brown;cursor:pointer;text-decoration:none;font-style:italic}
label:hover,a:hover{color:#ddd!important}
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
label,#active,img{-moz-user-select:none;-webkit-user-select:none}
.catch{display:block;height:0;overflow:hidden}
#slider{ transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;margin:0 auto}
input{ transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;display:none}
#slide1:checked ~ #slides .inner{ transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;margin-left:0}
#slide2:checked ~ #slides .inner{ transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;margin-left:-100%}
#slide3:checked ~ #slides .inner{ transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;margin-left:-200%}
#slide4:checked ~ #slides .inner{ transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;margin-left:-300%}
#slide5:checked ~ #slides .inner{ transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;margin-left:-400%}
#container{width:100%;overflow:hidden}
article img{width:100%}
#slides .inner{width:500%;line-height:0}
#slides article{width:20%;float:left}
#commands{margin:-25% 0 0 0;width:100%;height:50px}
#commands label{display:none;width:80px;height:80px;opacity:0.5}
#commands label:hover{opacity:0.8}
#active{ transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;position:relative;z-index:5;margin:16% 0 0;text-align:center}
#active label{ transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;display:inline-block;width:10px;height:10px;background:#bbb}
#active label:hover{ transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;background:#333;border-color:#777!important}
#slide1:checked ~ #commands label:nth-child(2),#slide2:checked ~ #commands label:nth-child(3),#slide3:checked ~ #commands label:nth-child(4),#slide4:checked ~ #commands label:nth-child(5),#slide5:checked ~ #commands label:nth-child(1){background:url('http://0.s3.envato.com/files/84450220/img/next.png') no-repeat;float:right;margin:0 12px 0 0;display:block}
#slide1:checked ~ #commands label:nth-child(5),#slide2:checked ~ #commands label:nth-child(1),#slide3:checked ~ #commands label:nth-child(2),#slide4:checked ~ #commands label:nth-child(3),#slide5:checked ~ #commands label:nth-child(4){background:url('http://0.s3.envato.com/files/84450220/img/previous.png') no-repeat;float:left;margin:0 0 0 -6px;display:block}
#slide1:{ transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;} ~ #active label:{ transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;},#slide2:checked ~ #active label:nth-child(2),#slide3:checked ~ #active label:nth-child(3),#slide4:checked ~ #active label:nth-child(4),#slide5:checked ~ #active label:nth-child(5){background:#000;opacity:0.6;border-color:#fff!important;border:2px solid #fff}
.caption{line-height:20px;margin:0 0 -150%;position:absolute;padding:320px 12px;opacity:0;color:#fff;text-transform:none;font-family:'Open Sans',Arial,Helvetica,sans-serif;text-align:left;font-size:18px}
.caption bar{display:inline-block;padding:10px;background:#000;border-radius:3px 3px 3px 3px;-moz-border-radius:3px 3px 3px 3px;-webkit-border-radius:3px 3px 3px 3px;opacity:0.7;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70)}
#slides{position:relative;padding:2px;border:1px solid #ddd;margin:45px 0 0;background:#FFF;background:-webkit-linear-gradient(#FFF,#FFF 20%,#EEE 80%,#DDD);background:-moz-linear-gradient(#FFF,#FFF 20%,#EEE 80%,#DDD);background:-ms-linear-gradient(#FFF,#FFF 20%,#EEE 80%,#DDD);background:-o-linear-gradient(#FFF,#FFF 20%,#EEE 80%,#DDD);background:linear-gradient(#FFF,#FFF 20%,#EEE 80%,#DDD);-webkit-border-radius:2px 2px 2px 2px;-moz-border-radius:2px 2px 2px 2px;border-radius:2px 2px 2px 2px;-webkit-box-shadow:0 0 3px rgba(0,0,0,0.2);-moz-box-shadow:0 0 3px rgba(0,0,0,0.2);box-shadow:0 0 3px rgba(0,0,0,0.2)}
#slides .inner{-webkit-transform:translateZ(0);-webkit-transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000);-moz-transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000);-ms-transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000);-o-transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000);transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000);-webkit-transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000);-moz-transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000);-ms-transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000);-o-transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000);transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000)}
#slider{-webkit-transform:translateZ(0);-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out}
#commands label{-webkit-transform:translateZ(0);-webkit-transition:opacity 0.2s ease-out;-moz-transition:opacity 0.2s ease-out;-o-transition:opacity 0.2s ease-out;transition:opacity 0.2s ease-out}
#slide1:checked ~ #slides article:nth-child(1) .caption,#slide2:checked ~ #slides article:nth-child(2) .caption,#slide3:checked ~ #slides article:nth-child(3) .caption,#slide4:checked ~ #slides article:nth-child(4) .caption,#slide5:checked ~ #slides article:nth-child(5) .caption{opacity:1;-webkit-transition:all 1s ease-out 0.6s;-moz-transition:all 1s ease-out 0.6s;-o-transition:all 1s ease-out 0.6s;transition:all 1s ease-out 0.6s}
#commands,#commands label,#slides,#active,#active label{-webkit-transform:translateZ(0);-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out}
#slider{max-width:960px}
@media only screen and (max-width:850px) and (min-width:450px){
#slider #commands{margin:-25% 0 0 5%;width:90%;height:50px}
#slider #commands label{-moz-transform:scale(0.9);-webkit-transform:scale(0.9);-o-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}
#slider #slides .caption{padding:280px 12px}
#slider #slides{padding:2px 0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}
#slider #active{margin:15% 0 0}
}
@media only screen and (max-width:450px){
#slider #commands{margin:-28% 0 0 1%;width:100%;height:70px}
#slider #active{margin:12% 0 0}
#slider #slides{padding:2px 0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}
#slider #slides .caption{opacity:0!important}
#slider #commands label{-moz-transform:scale(0.7);-webkit-transform:scale(0.7);-o-transform:scale(0.7);-ms-transform:scale(0.7);transform:scale(0.7)}
}
@media only screen and (min-width:850px){
body{padding:0 80px}
}

اینم لینکش
http://codepen.io/rizky_k_r/pen/shmwC

0  تشکر
پنجشنبه ، 1 می 2014     8:08 ب.ظ #


بهرام

Subscriber
263 پست84 تاپیک

سلام

باید از transition و transform که از امکانات css3 هست استفاده کنی و overflow هم hide بذاری. از دوستان تو همین سون لرن یک اسلایدر فول css گذاشته بودن که اگه بگردی پیدا میشه. من یه سرچ زدم اما متاسفانه مطلبش رو یدا نکردم که لینکش رو واست قرار بدم اما اسلایدرش رو دانلود کردم. سرچ کن اگه پیدا نکردی بگو تا کدهاش رو قرار بدم و بعد دیگه با یه نگا خودت میفهمی کجا رو باید درست کنی

0  تشکر
پنجشنبه ، 1 می 2014     8:17 ب.ظ #


masoudd

Subscriber
4 پست1 تاپیک

عزیزم

اون اسلایدری که در موردش صحبت کردین برای اعضای ویژه است و متاسفانه غیر قابل دسترسی برای بنده.

قابل ذکره که در css  اطلاعاتی ندارم ، ایا مقدوره که جنابعالی در این مورد کمکم کنید؟ لطفـــــــــــــــــــا

0  تشکر
پنجشنبه ، 1 می 2014     8:31 ب.ظ #


بهرام

Subscriber
263 پست84 تاپیک

نه اونو نمیگم اون که با جی کوئری هست. بیا کدش رو قرار دادم این یه اسلاید شو ساده با css هست که کاملا هم متوجه میشی چی به چیه و خودش هم عکس هارو عوض میکنه حالا هر امکان دیگه ای که میخوای به این اضافه کن

پیوست ها:
You must be logged in to view attached files.
0  تشکر
پنجشنبه ، 1 می 2014     8:47 ب.ظ #


masoudd

Subscriber
4 پست1 تاپیک

ایا شما وقت کمک ندارید؟

چون اینیکه من می خوام تغییرش بدم خیلی سخته؟

اسلایدر رو می شه در لینک زیر ببنید

http://codepen.io/rizky_k_r/pen/shmwC

 

لطفا اینو برای من تغییر بدید

0  تشکر
پنجشنبه ، 1 می 2014     9:00 ب.ظ #


s.alifarrokh

Subscriber
396 پست119 تاپیک

سلام

با css نمیشه اسلایدری درست کرد که هم دکمه های کنترلی داشته باشه و هم خودکار باشه.

یه لحظه صبر کن،الان برات یه چیزی مینویسم اگه دیدی بدردت میخوره بگو کاملشو بنویسم.

0  تشکر
پنجشنبه ، 1 می 2014     9:07 ب.ظ #


masoudd

Subscriber
4 پست1 تاپیک

مطمئنی نمیشه؟!!!!

من سی اس اس زیاد بلد نیستم ، اصلا نمیشه رو کد ها یه فکری بکنی که بشه؟

0  تشکر
پنجشنبه ، 1 می 2014     9:11 ب.ظ #


s.alifarrokh

Subscriber
396 پست119 تاپیک

خیر دوست عزیز،حالا من دارم یه چیزی درست میکنم ببینم شاید بشه از یه ترفند استفاده کرد.

0  تشکر
پنجشنبه ، 1 می 2014     9:25 ب.ظ #


s.alifarrokh

Subscriber
396 پست119 تاپیک

اون چیزی که فکر می کردم نشد چون بازم نیاز به استفاده از jquery داره اما یه مدل اسلایدر اتوماتیک css دارم که یکی از دوستان محبت کردن اونو درست کردن.

این اسلایدر با استفاده از خاصیت کی فریمز در css ساخته شده به این صورت که با گذشت زمان فاصله ی تصاویر به ترتیب نسبت به عرض عنصر پدر تغییر میکنه.

پیوست ها:
You must be logged in to view attached files.
0  تشکر
پنجشنبه ، 1 می 2014     9:30 ب.ظ #


masoudd

Subscriber
4 پست1 تاپیک

ریسپانسیو هست؟ برای همه مرورگرها کار میکنه؟

 

اگه نه ، لطف کنید jquery توش استفاده کنید ، فقط خواهشن یه زره.

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

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