Персональный сайт частного вебмастера

17.06.2017

Персональный сайт частного вебмастераПерсональный сайт частного вебмастера. Карусель с нефиксированной высотой — OWL Slider. OWL Slider — это лучшее решение для слайдера, в котором нужно «крутить» контентную информацию. Большим преимуществом слайдера является множество опций для настройки его работы и callback-функции на любые случаи жизни. Для того, чтобы окончательно вы поверили в силу этого слайдера, наведу вам несколько примеров его использования из собственного опыта. Слайдер поддерживает тач (touch) на мобильных устройствах. Адаптивность слайдера продумана очень хорошо, вы указываете только к-во слайдов для определенного разрешения и слайдер самостоятельно подстраивает их ширину.

Слайдер контента OWL карусель может хранить в себе как картинки, так и html текст, другие блоки, да все, что угодно. Нефиксированная высота слайдера. Вы можете сделать все слайды разными по высоте, в результате — слайдер их не обрежет, а подстроится под каждый слайд отдельно. Итак, поехали. Подключение необходимых файлов. jQuery библиотека script language= JavaScript type= text/javascript src= /script. OWL carousel библиотека script language= JavaScript type= text/javascript src= /script. link rel= stylesheet href= link rel= stylesheet href= link rel= stylesheet href. HTML разметка.

div id= owl-example class= owl-carousel div class= item Your Content /div div class= item Your Content /div div class= item Your Content /div div class= item Your Content /div . /div. Если у вас на странице будет больше одного слайдера, или же слайдеры/карусели будут динамическими — я советую не использовать id=»owl-example» . вместо ID можно использовать дополнительный класс с конкретным названием, например portfolio-carousel. Пример инициализации owl карусели для 1 видимого слайда. $( #owl-example items. 1, singleItem:true, navigation. true, autoPlay:true, pagination.

false, autoHeight:true. Иинициализация owl карусели с учетом адаптивности сайта. $( #owl-example // 10 слайдов видимы, если ширина окна браузера больше 1000px items. 10, // 5 слайдов видимы, при 1000px ширина окна 901px itemsDesktop. [1000,5], // 3 слайда видимы, если 900px ширина окна 601px itemsDesktopSmall. [900,3], // 2 слайда видимы, если 600px ширина окна 0px itemsTablet: [600,2], // itemsMobile отключено — значение наследуется с itemsTablet itemsMobile. false.

Методы owl карусели. Здесь я приведу несколько методов (их на самом деле множество), которые мне очень пригодились в работе с owl carousel. //определяем карусель в переменную для удобства var owl. — переход на определенный n-нный слайд — переход на следующий или предыдущий слайд — остановить автоматическое вращение слайдов — удалить карусель — запустить карусель с новыми параметрами, которые должны быть переданы с помощью переменной newOptions. Написать комментарий.

Leave a Reply