CityPortal - Слайдеры

Вверху представлен основной слайдер, который можно использовать на главной странице сайта или в любом другом модуле. Отлично подойдет как для размещения на всю ширину страницы, так и для страниц внутри сайта.

Структура и установка данного слайдера очень проста. Достаточно в HTML-редакторе страницы разместить код:

<ul class="m-slider">
<li><img src="/images/slider-pic/slide1.jpg" /></li>
<li><img src="/images/slider-pic/slide2.jpg" /></li>
</ul>

<script>
$('.m-slider').bxSlider({
adaptiveHeight: true,
mode: 'fade'
});
</script>

У вас есть маркированный список изображений с классом "m-slider" и скрипт, который вызывает сам слайдер изображений. Красным выделен пусть к изображениям. Если вы хотите установить больше 2 слайдов, то добавьте <li><img src="ссылка на изображение" /></li> перед закрывающим тегом </ul>.

При этом все параметры изображений определяются автоматически. То есть вы можете использовать изображения любой ориентации и размеров. На демо мы использовали снимки размером 1920х600px, сохраненные в качестве 50%.

Слайдер с фиксированной высотой и авто воспроизведением

Для установки, по аналогии с первым слайдером, разместите данный код на странице.

<div class="auto-controls" style="margin-top: 10px;">
<ul class="s-auto">
<li><img src="/images/slider-pic/c-01.jpg" /></li>
<li><img src="/images/slider-pic/c-02.jpg" /></li>
<li><img src="/images/slider-pic/c-03.jpg" /></li>
<li><img src="/images/slider-pic/c-04.jpg" /></li>
<li><img src="/images/slider-pic/c-05.jpg" /></li>
</ul>
</div>

<script type="text/javascript">
$(document).ready(function(){
$('.s-auto').bxSlider({
adaptiveHeight: true,
auto: true,
mode: 'fade',
pager: false,
controls: true,
autoControls: true
}); });
</script>

Красным цветом выделен путь к изображениям, а количество слайдов регулируется добавлением или удалением данного кода <li><img src="ссылка на картинку" /></li> внутри тега <ul>...</ul>.