Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Общие вопросы по вёрстке Помогите исправить верстку слайдера

Помогите исправить верстку слайдера


     10.06.2014    Общие вопросы по вёрстке, Стили (CSS)    1697

вопрос
Всем привет! Помогите доработать верстку слайдера на jQuery, чтобы внедрить вывод новостей используя строку: {custom template="custom" aviable="global" from="0" limit="1" cache="no" order="rand"}

Просто сейчас чтобы вывести новость нужно в разных местах прописывать адрес картинки и заголовок новости.

HTML-код

<div class="slider">
    <div class="slider-wrapper">
        <div style="max-width: 100%; margin: 0px auto;" class="bx-wrapper"><div style="width: 100%; overflow: hidden; position: relative; height: 300px;" class="bx-viewport"><ul style="width: 715%; position: relative; left: -500px;" id="slider">
            <li style="float: left; list-style: none outside none; position: relative; width: 500px;"><img src="/slide1.png" alt="" height="300" width="500"></li>
            <li style="float: left; list-style: none outside none; position: relative; width: 500px;"><img src="/slide2.jpg" alt="" height="300" width="500"></li>
            <li style="float: left; list-style: none outside none; position: relative; width: 500px;"><img src="/slide3.jpg" alt="" height="300" width="500"></li>
            <li style="float: left; list-style: none outside none; position: relative; width: 500px;"><img src="/slide4.png" alt="" height="300" width="500"></li>
            </ul></div></div>
    </div>

    <ul id="slider-pager" class="pager">
        <li class="active"><a href=""><span>Заголовок 1</span></a></li>
        <li class=""><a href=""><span>Заголовок 2</span></a></li>
        <li class=""><a href=""><span>Заголовок 3</span></a></li>
        <li class=""><a href=""><span>Заголовок 4</span></a></li>
        </ul>
</div>



CSS

<style>
* {
    padding: 0;
    margin: 0;
}
h1 {
    text-align: center;
    padding: 40px 0;
    font: 27px/1.2 'Trebuchet MS', Tahoma, Arial, sans-serif;
}
a {
    color: #2980D6;
}
.slider {
    width: 800px;
    margin: 0 auto;
    position: relative;
    border: 5px solid #DDD;
    border-radius: 5px;
    padding: 1px;
}
.slider:after {
    content: '';
    display: table;
    clear: both;
}
.slider img {
    display: block;
}
.slider-wrapper {
    float: left;
    width: 500px;
}
.pager {
    float: left;
    width: 300px;
    background: #FAFAFA;
}
.pager li {
    list-style: none;
    padding: 0 18px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 60px;
    font: 13px/52px Arial, sans-serif;
    border-top: 1px solid #DDD;
    position: relative;
}
.pager li:first-child {
    border: none;
}
.pager .active {
    background: #5BA6E3;
}
.pager .active:before {
    content: '';
    position: absolute;
    top: 0;
    left: -30px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 30px 30px 0;
    border-color: transparent #5BA6E3 transparent transparent;
}
.pager a {
    display: inline-block;
    vertical-align: middle;
    line-height: 18px;
    color: #2980D6;
    text-decoration: none;
}
.pager a:hover {
    color: #D00;
}
.pager .active a {
    color: #FFF;
}
.pager span {
    border-bottom: 1px solid #CCDCEA;
}
.pager .active span {
    border-color: #BBD1E3;
}
</style>

Ответа пока нет


Комментарии пользователей (2)

andros0705
103 | 17

andros0705 - 10 июня 2014 19:55 - Юзер

Создай шаблон отдельный для шаблона слайда:


<div class="slider-wrapper">
<div style="max-width: 100%; margin: 0px auto;" class="bx-wrapper">
<div style="width: 100%; overflow: hidden; position: relative; height: 300px;" class="bx-viewport">
<ul style="width: 715%; position: relative; left: -500px;" id="slider">
<li style="float: left; list-style: none outside none; position: relative; width: 500px;"><img src="[xfvalue_image_1]" alt="" height="300" width="500"></li>      
</ul>
</div>
</div>
</div>
    <ul id="slider-pager" class="pager">
        <li class="active"><a href=""><span>{title}</span></a></li>
     </ul>


Далее где будет сам слайдер вставь свое с названием созданного шаблона:
<div class="slider">
{custom template="custom" aviable="global" from="0" limit="1" cache="no" order="rand"}
</div>


Если ошибся извините, писал с телефона, не особо удобно.

logru
2

logru - 11 июня 2014 16:07 - Юзер


Теперь вот что получается. Все выстроилось вертикально. И автоматически движется только верхняя картинка.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы