» »

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

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

Простой по дизайну на всю ширину сайта, адаптивный слайдер под разную тематику. Отлично подходит вместо шапки под горизонтальным меню. Здесь нет автоматического прогона, все делается в ручную, сами кнопки установлены в правой стороне в самом низу. Код идет на 3 изображение, но потолок его, это пять или шесть, так как понимайте, кнопки также будут прибавляться. Все работает на CSS, что разместим его рядом с кодом. По идее его можно в CSS сайта установить, но он большой и может много места занять, так что выведем на одной ссылки.

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

Здесь просто зацепил сайт, проверка на темном была, что по вверх и по низ можно увидеть.



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

Это уже обзор идет под мобильные устройства.



Что также видим, кнопки все на месте и не куда не переместились, оттенок у них по умолчанию светлый идет, если перевели на какую то иллюстрацию, то алая гамма стает.

Приступаем к установке:

Основной его ставят, это вверх сайта и в самый низ. Для начало поставим сам каркас, где находятся ваше изображение.

Код
<div class="slider slider_count_3">  
  <!-- Список кнопок -->  
  <input type="radio" id="selector1" name="selector">  
  <input type="radio" id="selector2" name="selector">  
  <input type="radio" id="selector3" name="selector">  
   
  <!-- Список слайдов с картинками -->  
   
  <div class="item">  
  <img alt="" title="" src="http://zornet.ru/zorner_ru_1/Veb/igry-na-prirode-dlya-detey-4-8-let-IfU9H.jpg">  
  </div>  
  <div class="item">  
  <img alt="" title="" src="http://zornet.ru/zorner_ru_1/Veb/896c535e117d48d2abd6719faae4f605.jpg">  
  </div>  
  <div class="item">  
  <img alt="" title="" src="http://zornet.ru/zorner_ru_1/Veb/vverkh6.jpg">  
  </div>  
  <div class="stat">  
<span id="uhvb" style="display:none;"><a href="javascript://" onclick="uvcl()"><b><img src="http://zornet.ru/zorner_ru_1/Veb/special.png" border="0" alt="" /></b></a></span>  
</div>  
  <!-- Контейнер меток с цифрами. По клику на них выбирается слайд и отменяется вся анимация -->  
  <div class="selector_list">  
  <label for="selector1">1</label>  
  <label for="selector2">2</label>  
  <label for="selector3">3</label>  
  </div>  
</div>

И только после этого кода пропишем стили, также можете вывести их через файл.

Код
<style type="text/css">  
@import url('http://zornet.ru/zorner_ru_1/Veb/ctersa.css') all;  
</style>

Сам слайдер простой и по установке и по своему формату, что может тематически подойти на любой сайт, здесь больше идет как украшение интернет ресурса, но и безусловно он несет свою информацию, основном актуальную, что ставит веб мастер.
11.05.2017 Просмотров: 817 Комментарий: (9)

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

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

Комментарий: 9
Сопрано
Сопрано 11.05.2017 15:341
+1
Шапка под слайдер, и плюс с ней идет адаптивность, хорошо придумано.
Kosten
Kosten 11.05.2017 15:412
0
Есть такая тема как шапка, плюс к ней привинчен слайдер.
Dagada
Dagada 11.05.2017 19:103
0
стили на 5 изображений ..........все в ваших руках 07a
Dagada
Dagada 11.05.2017 19:154
0
дэмка :http://kldou24.ucoz.ru/ ......не спам 09a
Dagada
Dagada 11.05.2017 20:095
0
Если под шапку 1920... x ширину сами смотрите "Photoshop"в помошь...А так он по себе играет под любые размеры ...Главное что бы изображения были одного размера
Kosten
Kosten 29.05.2017 15:377
0
Да, все верно, изображение под один размер нужно делать, так как сперва меньше сделал, вышел гемор, пришлось под размеры заводить.
trem200
trem200 29.05.2017 15:306
0
замечательный слайдер, только интересно почему я его не ставил на сайт?
Kosten
Kosten 29.05.2017 15:378
0
Всем интересно, почему ты ранее не ставил на сайт.)
trem200
trem200 29.05.2017 15:419
0
Да не знаю, а так смотрится классно.
avatar