Адаптивный слайдер Responsive для сайта
 | |
| При создание сайта возникает вопрос, ставить слайдер или нет, а здесь еще адаптированный под мобильные устройства слайдер. По своим возможностям он простой и можно установить как на светлый или темный фон, что везде смотреться он гармонично будет. Основном его можно увидеть как на игровых площадках, так и на интернет магазине. Возможности у него есть. чтоб установить вверх сайта, то есть в саму шапку, все зависит от конструкций самого сайта. Если говорить о стилистике, то рамка у него светлая, а по техническому, то здесь все просто, переключатель изображений находится в низу виде точек. Так он визуально смотрится на светлом фоне, а на главной можно увидеть на темном.  Установка: Первым из шагов нужно скачать архив и залить файловый менеджер. Вторым из шагов идет подключение необходимых файлов, которые загрузили. Код <!-- jQuery library (served from Google) --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- bxSlider Javascript file --> <script src="/js/jquery.bxslider.min.js"></script> <!-- bxSlider CSS file --> <link href="/lib/jquery.bxslider.css" rel="stylesheet" /> Здесь HTML-разметка, которую устанавливаем по месту. Код <ul class="bxslider"> <li><img src="/images/pic1.jpg" /></li> <li><img src="/images/pic2.jpg" /></li> <li><img src="/images/pic3.jpg" /></li> <li><img src="/images/pic4.jpg" /></li> </ul> Завершающий шаг, это вызов bxSlider Код <script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxSlider(); }); </script> Посмотреть демонстрацию на материал. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 4 | |
|
| |
