Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Помогите исправить верстку слайдера

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


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

вопрос
Всем привет! Помогите доработать верстку слайдера на 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
Юзер

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
Юзер

logru - 11 июня 2014 16:07 -


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

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

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

наверх