| |
|
|
| | Нашел на этом форуме тему с ссылкой на рекомендованный слайдер...
Решил поставить http://www.gmarwaha.com/jquery/jcarousellite/index.php?#demo
Так вот сделал все по инструкции, но как видно mickeymouse.md - прокрутка и стили не делаю своего...
Подскажите в чем проблема, кто уже юзал, может не все файлы подключил? | |
| |
|
|
| |
|
|
| |
для: OLi
(06.03.2011 в 16:17)
| | |
<div class="carousel default">
<button class="prev"><<</button>
<div class="jCarouselLite" style="visibility: visible; overflow-x: hidden; overflow-y: hidden; position: relative; z-index: 2; left: 0px; width: 510px">
<ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; position: relative; list-style-type: none; z-index: 1; width: 2890px; left: -2210px">
<li style="overflow-x: hidden; overflow-y: hidden; float: left; width: 170px; height: 145px">
<li style="overflow-x: hidden; overflow-y: hidden; float: left; width: 170px; height: 145px">
<li style="overflow-x: hidden; overflow-y: hidden; float: left; width: 170px; height: 145px">
<li style="overflow-x: hidden; overflow-y: hidden; float: left; width: 170px; height: 145px">
<li style="overflow-x: hidden; overflow-y: hidden; float: left; width: 170px; height: 145px">
<li style="overflow-x: hidden; overflow-y: hidden; float: left; width: 170px; height: 145px">
<li style="overflow-x: hidden; overflow-y: hidden; float: left; width: 170px; height: 145px">
<li style="overflow-x: hidden; overflow-y: hidden; float: left; width: 170px; height: 145px">
<li style="overflow-x: hidden; overflow-y: hidden; float: left; width: 170px; height: 145px">
<li style="overflow-x: hidden; overflow-y: hidden; float: left; width: 170px; height: 145px">
<li style="overflow-x: hidden; overflow-y: hidden; float: left; width: 170px; height: 145px">
<li style="overflow-x: hidden; overflow-y: hidden; float: left; width: 170px; height: 145px">
<li style="overflow-x: hidden; overflow-y: hidden; float: left; width: 170px; height: 145px">
<li style="overflow-x: hidden; overflow-y: hidden; float: left; width: 170px; height: 145px">
<li style="overflow-x: hidden; overflow-y: hidden; float: left; width: 170px; height: 145px">
<li style="overflow-x: hidden; overflow-y: hidden; float: left; width: 170px; height: 145px">
<li style="overflow-x: hidden; overflow-y: hidden; float: left; width: 170px; height: 145px">
</ul>
</div>
<button class="next">>></button>
<div class="clear"/>
</div>
|
Копируйте код максимально близко к оригиналу | |
| |
|
|
| |
|
|
| |
для: Агамемнон
(06.03.2011 в 23:34)
| | | Т-е проблема все подключаемые файлы css и js в порядке? А где сами пути к картинкам? | |
| |
|
|
| |
|
|
| |
для: OLi
(07.03.2011 в 00:12)
| | | Может есть выход попроще, собственно нужен слайдер вертикальный миниатюр... | |
| |
|
|
| |
|
|
| |
для: OLi
(07.03.2011 в 01:42)
| | | Получилось установить, возникли сложности с позиционирование, не получается прижать миниатюры к правому краю...mickeymouse.md
По-моему, js прописывает стили | |
| |
|
|
| |
|
|
| |
для: OLi
(08.03.2011 в 00:40)
| | | не могу понять где прописаны стили для li | |
| |
|
|
| |
 17.3 Кб |
|
| |
для: OLi
(09.03.2011 в 01:57)
| | |
/*Start - Projects - jCarouselLiteDemo */
#jCarouselLiteDemo .carousel {
padding: 10px 0 0 0;
margin: 0 0 20px 10px;
position: relative;
}
#jCarouselLiteDemo .digg {
position: absolute;
left: 610px;
top: 110px;
}
#jCarouselLiteDemo .main {
margin-left: 40px;
}
#jCarouselLiteDemo .demo em {
color: #FF3300;
font-weight: bold;
font-size: 60%;
font-style: normal;
}
#jCarouselLiteDemo .carousel button { /*Don't remove this. we still use this for individual demos. only the front pages use images as of now*/
float: left;
}
#jCarouselLiteDemo .carousel a.prev, #jCarouselLiteDemo .carousel a.next {
display: block;
float: left;
width: 30px;
height: 143px;
text-decoration: none;
background: url("/image/imageNavLeft.gif") left 60px no-repeat;
}
#jCarouselLiteDemo .carousel a.next {
background: url("/image/imageNavRight.gif") right 60px no-repeat;
}
#jCarouselLiteDemo .carousel a.next:hover {
background-image: url("/image/imageNavRightHover.gif");
}
#jCarouselLiteDemo .carousel a.prev:hover {
background-image: url("/image/imageNavLeftHover.gif");
}
#jCarouselLiteDemo .carousel a:hover, #jCarouselLiteDemo .carousel a:active {
border: none;
outline: none;
}
#jCarouselLiteDemo .carousel .jCarouselLite {
border: 1px solid black;
float: left;
background-color: #dfdfdf;
/* Needed for rendering without flicker */
position: relative;
visibility: hidden;
left: -5000px;
}
#jCarouselLiteDemo .carousel ul {
margin: 0;
}
#jCarouselLiteDemo .carousel li img,
#jCarouselLiteDemo .carousel li p {
background-color: #fff;
width: 150px;
height: 118px;
margin: 10px;
}
#jCarouselLiteDemo .widget img {
cursor: pointer;
}
#jCarouselLiteDemo .mid {
margin-left: 80px;
width: 400px;
height: 300px;
}
#jCarouselLiteDemo .vertical {
margin-left: 170px;
}
#jCarouselLiteDemo .vertical .jCarouselLite { /* so that in IE 6, the carousel div doesnt expand to fill the space */
width: 170px;
}
#jCarouselLiteDemo .imageSlider li img,
#jCarouselLiteDemo .imageSlider li p,
#jCarouselLiteDemo .imageSliderExt li img ,
#jCarouselLiteDemo .imageSliderExt li p {
width: 400px;
height: 300px;
}
/* End - Projects - jCarouselLiteDemo */
|
Выдрано с сайта.Плюс стили в самих li из того,что я приводил ранее.В файле полный css. | |
| |
|
|
