вопрос
Всем привет! Помогите доработать верстку слайдера на jQuery, чтобы внедрить вывод новостей используя строку: {custom template="custom" aviable="global" from="0" limit="1" cache="no" order="rand"}
Просто сейчас чтобы вывести новость нужно в разных местах прописывать адрес картинки и заголовок новости.
HTML-код
CSS
Просто сейчас чтобы вывести новость нужно в разных местах прописывать адрес картинки и заголовок новости.
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>
