» »

Адаптивный слайдер Responsive для сайта

Адаптивный слайдер Responsive для сайта

При создание сайта возникает вопрос, ставить слайдер или нет, а здесь еще адаптированный под мобильные устройства слайдер. По своим возможностям он простой и можно установить как на светлый или темный фон, что везде смотреться он гармонично будет.

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

Так он визуально смотрится на светлом фоне, а на главной можно увидеть на темном.

Адаптивный слайдер jQuery изображений

Установка:

Первым из шагов нужно скачать архив и залить файловый менеджер.

Вторым из шагов идет подключение необходимых файлов, которые загрузили.

Код
<!-- 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>


Посмотреть демонстрацию на материал.
2017-01-21 Загрузок: 7 Просмотров: 1003 Комментарий: (4)

Поделиться в социальных сетях

Материал разместил

Комментарий: 4
Kosten
Kosten 2017-01-21 00:201
0
Как вообще понял, этот слайдер с многочисленными возможностями, если кому интересно, то на этой странице все подробнее www.seomark.ru/slideshow_bxslider.html
FeStemBer
FeStemBer 2017-01-21 00:422
0
На счет адаптаций сделано красиво, а дизайн не так уже слишком разные у всех, и здесь можно обвод из светлого в темный сделать.
Kosten
Kosten 2017-01-21 00:443
0
Но как посмотреть, просто изображение, которое на светлом фоне, вот это реальный слайдер под материал.
rekersil
rekersil 2017-01-22 11:394
0
Реклама натурального самогона 27a
avatar