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

Структура и установка данного слайдера очень проста. Достаточно в 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>.