• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Легкий и красивый слайдер для сайтов (Слайдер с прекрасным переходом изображение)
Легкий и красивый слайдер для сайтов
Kosten
Дата: Пятница, 2019-08-02, 22:28 | Сообщение 1
Оффлайн
Администраторы
Сообщений:24946
Награды: 57


Регулярно обновляемый набор слайдеров для сайта, где изначально видим все слайды, которые расположены вместо кнопок в самом низу. Сам слайдер создан на HTML + CSS, где не нужно добавлять библиотек. Сам по дизайну выполнен стильно и подойдет на разные тематические ресурсы.

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



Скрипт

Код
<script src="https://sites.google.com/site/seocips/seocips-script/prefixfree.js" type="text/javascript"></script>

HTML

Код
<div class="demisog-msavan">
<input type="radio" name="slide_switch" id="id1"/>
<label for="id1">
  <img src="http://zornet.ru/ABVUN/Aba/seocips1.jpg" width="100"/>
</label>
<img src="http://zornet.ru/ABVUN/Aba/seocips1.jpg"/>
  <input type="radio" name="slide_switch" id="id2" checked="checked"/>
<label for="id2">
  <img src="http://zornet.ru/ABVUN/Aba/seocips2.jpg" width="100"/>
</label>
<img src="http://zornet.ru/ABVUN/Aba/seocips2.jpg"/>
  <input type="radio" name="slide_switch" id="id3"/>
<label for="id3">
  <img src="http://zornet.ru/ABVUN/Aba/seocips3.jpg" width="100"/>
</label>
<img src="http://zornet.ru/ABVUN/Aba/seocips3.jpg"/>
  <input type="radio" name="slide_switch" id="id4"/>
<label for="id4">
  <img src="http://zornet.ru/ABVUN/Aba/seocips4.jpg" width="100"/>
</label>
<img src="http://zornet.ru/ABVUN/Aba/seocips4.jpg"/>
  <input type="radio" name="slide_switch" id="id5"/>
<label for="id5">
  <img src="http://zornet.ru/ABVUN/Aba/seocips5.jpg" width="100"/>
</label>
<img src="http://zornet.ru/ABVUN/Aba/seocips5.jpg"/>
</div>

CSS

Код
body {background: #333;}
.demisog-msavan{
width: 640px;
position: relative;
padding-top: 320px;
margin: 10px auto;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}

/*Осталось добавить переходы*/
.demisog-msavan>img{
position: absolute;
left: 0; top: 0;
transition: all 0.5s;
}
.demisog-msavan input[name='slide_switch'] {
display: none;
}
.demisog-msavan label {
/*Давайте добавим некоторый интервал для миниатюр*/
margin: 18px 0 0 18px;
border: 3px solid #999;
  float: left;
cursor: pointer;
transition: all 0.5s;
opacity: 0.6;
}
.demisog-msavan label img{
display: block;
}
/*Время добавлять эффекты клика*/
.demisog-msavan input[name='slide_switch']:checked+label {
border-color: #666;
opacity: 1;
}

/*Время работать над основными изображениями*/
.demisog-msavan input[name='slide_switch'] ~ img {
opacity: 0;
transform: scale(1.1);
}

.demisog-msavan input[name='slide_switch']:checked+label+img {
opacity: 1;
transform: scale(1);
}


Демонстрация
Прикрепления: 7506696.jpg(56.4 Kb) · css-slider.zip(3.8 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Легкий и красивый слайдер для сайтов (Слайдер с прекрасным переходом изображение)
  • Страница 1 из 1
  • 1
Поиск: