ZorNet.Ru — сайт для вебмастера » HTML и CSS » Простой отзывчивый слайдер на CSS + jQuery

Простой отзывчивый слайдер на CSS + jQuery

Это простой слайдер, который можно применить для текста, где по функциям он не будет отличиться от стандартного, где будут идти с изображением. Некоторые спросят, для чего такой вид, так как можно все на страницы подробно описать. Безусловно можно везде вписать, то что вам нужно. Но если вам потребуется, чтоб все было компактно, это может быть какая-то характеристика на модель, что ниже будет установлен слайдер, где как книжкой будете пользоваться.

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

Где не нужно переключать, разве кнопки, что по вверх поставлены, где идет красивый эффект перелистывание. Здесь специально созданы оттенки цвета, а точнее каждому кадру отводится своя палитра, что можно сделать ярким и запоминающим. Со своей стороны добавил стилистики, которая отвечает за основу дизайна, где на белом фоне появится тень, что стал совершенно по другому выглядеть.

Вот сделали переход, что появилась другая гамма с новым заголовком.

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

HTML

Код

<button onclick='Prev()'>Предыдущий</button><button onclick='Next()'>Следующий</button>
<div id="dukidesobus">
  <div class="dakom krasnud"><p>ZorNet - Скрипты для сайта</p></div>
  <div class="dakom golusan"><p>Шаблоны для портала</p></div>
  <div class="dakom kanlatos"><p>Стилистика сайта на CSS</p></div>
  <div class="dakom tagsaron"><p>ZorNet - портал для вебмастера</p></div>
</div>

CSS

Код

button {
  margin: 35px 9px 0;
  padding: 9px;
  background: #18365d;
  cursor: pointer;
  border: 2px solid #f8faff;
  border-radius: 73px;
  box-shadow: 1px 1px 10px 1px rgba(80, 79, 79, 0.39), 0px 10px 30px -15px rgba(19, 17, 17, 0.37);
}

#dukidesobus {
  box-shadow: 0 0 50px silver;
  width: 497px;
  height: 270px;
  position: relative;
  overflow: hidden;
  margin: 27px 4%;
  max-width: 100% !important;
  border: 2px solid #f8faff;
  border-radius: 5px;
  box-shadow: 0px 0px 18px 3px rgba(53, 51, 51, 0.39), 1px 2px 3px 0px rgba(29, 27, 27, 0.18);
}

.dakom{
width:100%;
height:100%;
padding:10px;
position:absolute;
display:-webkit-flex;
}

.dakom p{
-webkit-align-self: center;
align-self: center;
width:100%;
text-align:center;
}

.krasnud{
  background: #6f2913;
}

.golusan{
background: #0a6565;
}

.tagsaron{
background:#0e8040;
}

.kanlatos{
  background: #750867;
}

Код

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

Но этот слайд будет отличиться тем, что все будет описано, где также можно поставить ссылку или изображение на данную страницу с материалом. Где становится удобнее сразу ознакомится с продуктом, а потом перейти на его, или пролистать на следующее мероприятие, так как можно разместить то количество, которое нужно для разработчика.

Демонстрация

22 Сентября 2018 Просмотров: 1085 Комментариев: (0)

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

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

Kosten

Комментарии: 0