تعیین موقعیت برای اسلاید شوی 3بعدی ساخته شده با cssوhtml

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

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

نویسنده پست
چهار شنبه ، 27 نوامبر 2013     12:06 ق.ظ #


nimook

Subscriber
42 پست10 تاپیک

سلام

من میخوام این اسلاید شورو در گوشه ی سمت چپ وبلاگم و در موقعیت خاص بزارم

http://cssdeck.com/labs/pure-css-3d-image-slider

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

enfagh.tebyan.net

1  تشکر
چهار شنبه ، 27 نوامبر 2013     11:38 ق.ظ #


امیر

ناظم
840 پست3 تاپیک

سلام

اولاً تبریک میگم. وبلاگ و قالب زیبایی دارید، به همراه فونت زیبای بی مروارید ..

شما باید به هدرتون position: relative; و برای اسلایدشویی که میخواید بگذارید درون هدر، position: absolute; قرار بدید. بعد با دادن مقادیر left  و top به اسلایدشو میتونید دقیقا مکانش رو فیکس کنید.

2  تشکر
چهار شنبه ، 27 نوامبر 2013     12:32 ب.ظ #


nimook

Subscriber
42 پست10 تاپیک

[quote=18542]سلام اولاً تبریک میگم. وبلاگ و قالب زیبایی دارید، به همراه فونت زیبای بی مروارید .. شما باید به هدرتون position: relative; و برای اسلایدشویی که میخواید بگذارید درون هدر، position: absolute; قرار بدید. بعد با دادن مقادیر left و top به اسلایدشو میتونید دقیقا مکانش رو فیکس کنید. [/quote]

سلام

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

0  تشکر
چهار شنبه ، 27 نوامبر 2013     12:37 ب.ظ #


nimook

Subscriber
42 پست10 تاپیک

ظاهرا توی فایرفاکس کار نمی کنه؟درسته؟

0  تشکر
چهار شنبه ، 27 نوامبر 2013     12:43 ب.ظ #


nimook

Subscriber
42 پست10 تاپیک

بیزحمت  کد این اسلایدشورو تغییر بدین اون فقط توی کروم کار می کنه

http://cssdeck.com/labs/css3-image-slider

0  تشکر
چهار شنبه ، 27 نوامبر 2013     12:57 ب.ظ #


امیر

ناظم
840 پست3 تاپیک

قدم به قدم جلو برید. شما اول باید اسلایدشو رو درون قالبتون بگذارید، بعد کدهاشو درست کنید.

1  تشکر
چهار شنبه ، 27 نوامبر 2013     4:10 ب.ظ #


nimook

Subscriber
42 پست10 تاپیک

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

 

پیوست ها:
You must be logged in to view attached files.
0  تشکر
چهار شنبه ، 27 نوامبر 2013     5:02 ب.ظ #


امیر

ناظم
840 پست3 تاپیک

ما اینجا تعهدی در قبال زمان پاسخگویی به کسی ندادیم دوست گرامی. اگر فکر میکنین جایی زودتر و بهتر بهتون پاسخ میدن، میتونید از اونجا بپرسید.

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

بنده هم پاسختونو قبل از این پست شما آماده کرده بودم که به خاطر این حرفتون دیگه پاسخی به این تاپیک نمیدم. دوستان دیگر اگر خواستن کمک کنند. موفق باشید

3  تشکر
چهار شنبه ، 27 نوامبر 2013     6:15 ب.ظ #


nimook

Subscriber
42 پست10 تاپیک

[quote=18559]ما اینجا تعهدی در قبال زمان پاسخگویی به کسی ندادیم دوست گرامی. اگر فکر میکنین جایی زودتر و بهتر بهتون پاسخ میدن، میتونید از اونجا بپرسید. روال در اینجا به این صورته که هرکسی سوالی داره میپرسه .. هرکسی هم بلد باشه و بتونه پاسخ میده. بنده هم پاسختونو قبل از این پست شما آماده کرده بودم که به خاطر این حرفتون دیگه پاسخی به این تاپیک نمیدم. دوستان دیگر اگر خواستن کمک کنند. موفق باشید [/quote]

 

عجب!!!

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

خدانگهدار

2  تشکر
پنجشنبه ، 28 نوامبر 2013     6:33 ب.ظ #


nimook

Subscriber
42 پست10 تاپیک

سلام دوستان از سایت webanswer  درخواست کردم اینجوریش کردن الان تقریبا درسته ولی از جاش تکون میخوره و عکسارو کاملا درست نشون نمیده نصف یه عکسو با یه عکس دیگه نشون میده

<style>
#slideshow-wrap {
right :820px;
display: block;
top : 80px;
height: 150px;
min-width: 245px;
max-width: 245px;
margin: auto;
border: 12px rgba(255,255,240,1) solid;
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
box-shadow: 0px 0px 5px rgba(0,0,0,.8);
margin-top: 20px;
position: absolute;
}

#slideshow-inner {
width: 100%;
height: 100%;
background-color: rgb(0,0,0);
overflow: hidden;
position: relative;
}

#slideshow-inner>ul {
list-style: none;
height: 100%;
width: 500%;
overflow: hidden;
position: relative;
left: 0px;
}

#slideshow-inner>ul>li {
width: 20%;
height: 320px;
float: right;
position: relative;
}

#slideshow-inner>ul>li>img {
margin: auto;
height: 100%;
}

#slideshow-wrap input[type=radio] {
position: absolute;
left: 50%;
bottom: 15px;
z-index: 100;
visibility: hidden;
}

#slideshow-wrap label:not(.arrows):not(.show-description-label) {
position: absolute;
left: 50%;
bottom: -45px;
z-index: 100;
width: 12px;
height: 12px;
background-color: rgba(200,200,200,1);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
cursor: pointer;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
box-shadow: 0px 0px 3px rgba(0,0,0,.8);
-webkit-transition: background-color .2s;
-moz-transition: background-color .2s;
-o-transition: background-color .2s;
transition: background-color .2s;
}

#slideshow-wrap label:not(.arrows):active { bottom: -46px }

#slideshow-wrap input[type=radio]#button-1:checked~label[for=button-1] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-2:checked~label[for=button-2] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-3:checked~label[for=button-3] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-4:checked~label[for=button-4] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-5:checked~label[for=button-5] { background-color: rgba(100,100,100,1) }

#slideshow-wrap label[for=button-1] { margin-left: -36px }

#slideshow-wrap label[for=button-2] { margin-left: -18px }

#slideshow-wrap label[for=button-4] { margin-left: 18px }

#slideshow-wrap label[for=button-5] { margin-left: 36px }

#slideshow-wrap input[type=radio]#button-1:checked~#slideshow-inner>ul { left: 0 }

#slideshow-wrap input[type=radio]#button-2:checked~#slideshow-inner>ul { left: -100% }

#slideshow-wrap input[type=radio]#button-3:checked~#slideshow-inner>ul { left: -200% }

#slideshow-wrap input[type=radio]#button-4:checked~#slideshow-inner>ul { left: -300% }

#slideshow-wrap input[type=radio]#button-5:checked~#slideshow-inner>ul { left: -400% }

label.arrows {
font-family: 'WebSymbolsRegular';
font-size: 25px;
color: rgb(255,255,240);
position: absolute;
top: 50%;
margin-top: -25px;
display: none;
opacity: 0.7;
cursor: pointer;
z-index: 1000;
background-color: transparent;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
text-shadow: 0px 0px 3px rgba(0,0,0,.8);
}

label.arrows:hover { opacity: 1 }

label.arrows:active { margin-top: -23px }

input[type=radio]#button-1:checked~.arrows#arrow-2, input[type=radio]#button-2:checked~.arrows#arrow-3, input[type=radio]#button-3:checked~.arrows#arrow-4, input[type=radio]#button-4:checked~.arrows#arrow-5 {
right: -55px;
display: block;
}

input[type=radio]#button-2:checked~.arrows#arrow-1, input[type=radio]#button-3:checked~.arrows#arrow-2, input[type=radio]#button-4:checked~.arrows#arrow-3, input[type=radio]#button-5:checked~.arrows#arrow-4 {
left: -55px;
display: block;
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-ms-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
}

input[type=radio]#button-2:checked~.arrows#arrow-1 { left: -19px }

input[type=radio]#button-3:checked~.arrows#arrow-2 { left: -37px }

input[type=radio]#button-5:checked~.arrows#arrow-4 { left: -73px }

.description {
position: absolute;
top: 0;
left: 0;
width: 260px;
font-family: 'Yanone Kaffeesatz';
z-index: 1000;
}

.description input { visibility: hidden }

.description label {
font-family: 'WebSymbolsRegular';
background-color: rgba(255,255,240,1);
position: relative;
left: -17px;
top: 00px;
width: 40px;
height: 27px;
display: inline-block;
text-align: center;
padding-top: 7px;
border-bottom-right-radius: 15px;
cursor: pointer;
opacity: 0;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
z-index: 5;
color: rgb(20,20,20);
}
</style>

<div id="slideshow-wrap">
<input type="radio" id="button-1" name="controls" checked="checked"/>
<label for="button-1"></label>
<input type="radio" id="button-2" name="controls"/>
<label for="button-2"></label>
<input type="radio" id="button-3" name="controls"/>
<label for="button-3"></label>
<input type="radio" id="button-4" name="controls"/>
<label for="button-4"></label>
<input type="radio" id="button-5" name="controls"/>
<label for="button-5"></label>
<label for="button-1" id="arrow-1">></label>
<label for="button-2" id="arrow-2">></label>
<label for="button-3" id="arrow-3">></label>
<label for="button-4" id="arrow-4">></label>
<label for="button-5" id="arrow-5">></label>
<div id="slideshow-inner">
<ul>
<li id="slide1">
<img src="http://cssdeck.com/uploads/media/items/3/3yiC6Yq.jpg" />
</li>
<li id="slide2">
<img src="http://cssdeck.com/uploads/media/items/4/40Ly3VB.jpg" />
</li>
<li id="slide3">
<img src="http://cssdeck.com/uploads/media/items/0/00kih8g.jpg" />
</li>
<li id="slide4">
<img src="http://cssdeck.com/uploads/media/items/2/2rT2vdx.jpg" />
</li>
<li id="slide5">
<img src="http://cssdeck.com/uploads/media/items/8/8k3N3EL.jpg" />
</li>
</ul>
</div>
</div>

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

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