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

Адаптивный слайдер с использованием jQuery

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

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

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

Все проверено на работоспособность, где сами изначально можете просмотреть Demo, что представлено ниже.

1. Вариант, здесь больше всего идет под стандартную ширину.

2. Это уже на мобильном гаджет так выглядит.

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

HTML

Код

<button onclick='Prev()'>❮</button>
<button onclick='Next()' style="right:14px;left:auto;transform:rotate(180deg)">❮</button>
<div id="sanouncedaneb">
  <div class="gorka moragepaym">
  <p>Скрипты для сайта
  <small>Здесь пишем краткое описание</small></p>
  </div>
  <div class="gorka baidingardas">
  <p>Шаблоны для портала
  <small>Описание №2</small></p>
  </div>
  <div class="gorka cemprovemen">
  <p>Дизайн портала
  <small>Описание №3</small></p>
  </div>
  <div class="gorka kolingardware">
  <p>Стилистика CSS
  <small>Описание №4</small></p>
  </div>
</div>

CSS

Код

#sanouncedaneb {
  height: 400px;
  position: relative;
  overflow: hidden;
  margin: 20px 42px;
  box-shadow: 0 2px 2px 1px #969696;
  border: 15px solid #fff
}

.gorka {
  width: 100%;
  height: 100%;
  position: absolute;
  display: -webkit-flex;
  background-size: cover;
  background-position: center
}

.gorka p {
  -webkit-align-self: flex-end;
  align-self: flex-end;
  background: rgba(19, 18, 18, 0.91);
  padding: 12px 15px 15px;
  font-size: 19px;
  width: 497px;
  max-width: 100%;
}

.gorka small {
  display: block;
  font-size: 15px;
  line-height: 18px;
  margin: 5px 0 0
}

.moragepaym {
  background-image: url(Ссылка на изображение №-1)
}

.baidingardas {
  background-image: url(Ссылка на изображение №-2)
}

.kolingardware {
  background-image: url(Ссылка на изображение №-3)
}

.cemprovemen {
  background-image: url(Ссылка на изображение №-4)
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  color: #fff;
  font-family: 'Architects Daughter', cursive;
}

button {
  padding: 5px 47px 5px 10px;
  border-radius: 57px;
  background: #464242;
  border: 0;
  position: absolute;
  top: 198px;
  margin: 0 auto;
  font-size: 25px;
  left: 9px;
  cursor: pointer;
  outline: 0!important;
  box-shadow: 1px 2px 12px 5px rgba(39, 37, 37, 0.47), 0px 8px 27px -15px rgba(27, 24, 24, 0.6);
}

Код

var slide = 3;

function Next() {
  $('.gorka:eq(' + slide + ')').animate({left: window.innerWidth * -1 + 'px'}, 800, function() {
  $('.gorka:eq(' + slide + ')').remove().prependTo('#sanouncedaneb').animate({
  left: 0 + 'px'
  }, 1)
  })
}

function Prev() {
  $('.gorka:eq(0)').remove().appendTo('#sanouncedaneb').animate({
  left: window.innerWidth * -1 + 'px'
  }, 0).animate({
  left: 0 + 'px'
  }, 600);
}

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

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

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

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

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

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

Kosten

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