Loading...

Простой адаптивный слайдер на jquery

Это адаптивный слайдер, который мне пришлось сделать самому. Не смог найти слайдер, который мне нужен, хотя честно признаюсь я плохо искал. И так как я уже его сделал, подумал, что он может кому-то пригодиться. Но сразу скажу, что сейчас есть в сто раз лучше слайдеры к тому же для touch устройств. А вот мой не приспособлен для этого, он простой.
Одним словом, я просто не хотел грузить сайт с мешком библиотек ради одного слайдера.

Подключение

Подключаем стили и скрипт слайдера:

<link href="css/prosto.slider.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/prosto.slider.js"></script>
 
Html структура слайдера:
<!-- Slider start -->
<div class="slider">
<!-- Изображения слайдера -->
<ul>
<li class="active"><img src="img/slide_1.jpg" alt=""></li>
<li><img src="img/slide_2.jpg" alt=""></li>
<li><img src="img/slide_3.jpg" alt=""></li>
</ul>
<!-- Кнопки назад вперёд -->
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
</div>
<ul class="for_slider">
<li class="active_k">
<h2>Заголовок первого слайда</h2>
<span>Описание...</span>
</li>
<li>
<h2>Заголовок второго слайда</h2>
<span>Описание...</span>
</li>
<li>
<h2>Заголовок третьего слайда</h2>
<span>Описание...</span>
</li>
</ul>
<!-- Slider end -->
Скрипты я не буду писать тут. Скачивайте и смотрите что внутри. Сделано на быструю руку, строго не судите.

Работа слайдера

Слайдер адаптивный. Может содержать в себе как картинку так и видео например с YouTube, которое подстраивается под размеры слайдера. А так же заголовок и описание, либо другие элементы.
К сожалению нет автоматической прокрутки, так как не было такой задачи.
 
В общем много слов, лучше сами посмотрите...

 
Скачать файл: prosto-slider.rar [773,23 Kb] (cкачиваний: 249)


Автор: Kylaksizov
Поделиться:

Комментарии ( 1 )


  1. avatar_https://kylaksizov.ru/uploads/fotos/foto_571.jpg
    nariman 10 ноября 2016 22:23
    • 0
    Ответить
    на этом сайте есть красивый слайдер relaxed
    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent

В корзине: 0 шт. 0 руб.
Отключите расширение AdBlock на нашем сайте!

Собеседники

Переписка

Нименование Количество Цена / 1 шт.
Всего: 0 руб.