Горизонтальный слайдер-аккордеон через плагин Easy Accordion на jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/* UNLESS YOU KNOW WHAT YOU'RE DOING, DO NOT CHANGE THE FOLLOWING RULES */ .easy-accordion{display:block;position:relative;overflow:hidden;padding:0;margin:0} .easy-accordion dt,.easy-accordion dd{margin:0;padding:0} .easy-accordion dt,.easy-accordion dd{position:absolute} .easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px; /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;} .easy-accordion dd{z-index:1;opacity:0;overflow:hidden} .easy-accordion dd.active{opacity:1;} .easy-accordion dd.no-more-active{z-index:2;opacity:1} .easy-accordion dd.active{z-index:3} .easy-accordion dd.plus{z-index:4} .easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);} /* FEEL FREE TO CUSTOMIZE THE FOLLOWING RULES */ dd p{line-height:120%} #accordion-1{width:800px;height:245px;padding:30px;background:#fff;border:1px solid #b5c9e8} #accordion-1 dl{width:800px;height:245px} #accordion-1 dt{height:46px;line-height:44px;text-align:right;padding:0 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(/images/slide-title-inactive-1.jpg) 0 0 no-repeat;color:#26526c} #accordion-1 dt.active{cursor:pointer;color:#fff;background:#fff url(/images/slide-title-active-1.jpg) 0 0 no-repeat} #accordion-1 dt.hover{color:#68889b;} #accordion-1 dt.active.hover{color:#fff} #accordion-1 dd{padding:25px;background:url(/images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px} #accordion-1 .slide-number{color:#68889b;left:10px;font-weight:bold} #accordion-1 .active .slide-number{color:#fff;} #accordion-1 a{color:#68889b} #accordion-1 dd img{float:right;margin:0 0 0 30px;} #accordion-1 h2{font-size:2.5em;margin-top:10px} #accordion-1 .more{padding-top:10px;display:block} |
2#: После /head на нужных страницах вставляйте:
|
1 2 |
<script type="text/javascript" src="/js/jquery.easyAccordion.js"></script> <script type="text/javascript" src="/js/utility.js"></script> |
3#: Следующий код в то место, где будет сам слайдер:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id="accordion-1"> <dl> <dt>Первый слайд</dt> <dd>Здесь контент первого слайда</dd> <dt>Второй слайд</dt> <dd>Здесь контент второго слайда</dd> <dt>Третий слайд</dt> <dd>Здесь контент третьего слайда</dd> <dt>Четвёртый слайд</dt> <dd>Здесь контент четвёртого слайда</dd> <dt>Пятый слайд</dt> <dd>Здесь контент пятого слайда</dd> <dt>Шестой слайд</dt> <dd>Здесь контент пестого слайда</dd> </dl> </div> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
