Адаптивный слайдер для сайта на 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> Сам слайдер простой и по установке и по своему формату, что может тематически подойти на любой сайт, здесь больше идет как украшение интернет ресурса, но и безусловно он несет свою информацию, основном актуальную, что ставит веб мастер. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 9 | |
|
| |
