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

Адаптивный слайдер с помощью HTML и CSS

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

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

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

Здесь видим заданный ними размер, а точнее полноценный слайдер:

Потом его уменьшаем, а точнее смотрим к примеру на смартфоне:

Но и переходим к самым небольшим экранам, где все отлично просматривается:

Отзывчивый слайдер карусель с логотипом на CSS

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

Установка:

На странице в head прописываем

Код

HTML

Код

<div class="magudesaka left">
  <ul class="slides">
  <li>
  <img src="http://zornet.ru/_fr/56/2536118.jpg">
  <div class="degkue">
  <h1>Интересные решения для вебмастера в создание.</h1>
  <h2>ZorNet.Ru — сайт для вебмастера</h2>
  <div class="slaydery-dlya-sayta">
  <p>Название</p>
  </div>
  </div>
  </li>
  <li>
  <img src="http://zornet.ru/_fr/56/3302384.jpg">
  <div class="degkue">
  <h1>Множество инструментов SEO, которые помогут</h1>
  <h2>Здесь, мы составили список</h2>
  <div class="slaydery-dlya-sayta">
  <p>Заголовок</p>
  </div>
  </div>
  </li>
  <li>
  <img src="http://zornet.ru/_fr/56/2711828.jpg">
  <div class="degkue">
  <h1>Создавать пользовательские профили</h1>
  <h2>Мгновенно проверьте DA и PA</h2>
  <div class="slaydery-dlya-sayta">
  <p>Категория</p>
  </div>
  </div>
  </li>
  <li>
  <img src="http://zornet.ru/_fr/56/3410582.jpg">
  <div class="degkue">
  <h1>Быстрый и простой анализ элементов</h1>
  <h2>Вы можете перейти на премиум-версию</h2>
  <div class="slaydery-dlya-sayta">
  <p>Раздел</p>
  </div>
  </div>
  </li>
  </ul>
</div>

CSS

Код

@import url(https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.0/flexslider-min.css);

.magudesaka{
  max-width: 785px;
  box-shadow: none;
}

.magudesaka .slides img {
  width: 100%;
  display: block;
  max-height: 350px;
}

.magudesaka li {
  position: relative;
}

.magudesaka li .degkue {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-family: 'Roboto', sans-serif;
}

.magudesaka li h1 {
  background: rgba(51, 51, 51, 0.5);
  padding: 12px 18px 12px;
  margin-bottom: 0;
  font-size: 1.8em;
  font-weight: 300;
}

.magudesaka li h2 {
  background: rgba(51, 51, 51, 0.5);
  padding: 13px 18px 11px;
  font-size: 1.1em;
  margin-bottom: 0;
  font-weight: 300;
}

.magudesaka li .slaydery-dlya-sayta {
  display: flex;
  flex-direction: row;
}

.magudesaka li .slaydery-dlya-sayta p {
  background: #e43837;
  margin-right: 7px;
  font-size: 1.1em;
  padding: 12px 18px 10px;
  font-weight: 300;
}

.magudesaka li h1,
.magudesaka li h2,
.magudesaka li .slaydery-dlya-sayta p,
.magudesaka li .slaydery-dlya-sayta span {
  -webkit-animation-duration: .6s;
  animation-duration: .6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

.magudesaka li.flex-active-slide .degkue h1,
.magudesaka li.flex-active-slide .degkue h2,
.magudesaka li.flex-active-slide .degkue .slaydery-dlya-sayta p,
.magudesaka li.flex-active-slide .degkue .slaydery-dlya-sayta span {
  -webkit-animation-delay: .4s;
  animation-delay: .4s;
  -webkit-animation-duration: .6s;
  animation-duration: .6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

.magudesaka li.flex-active-slide .degkue h2 {
  -webkit-animation-delay: .5s;
  animation-delay: .5s;
}

.magudesaka li.flex-active-slide .degkue .slaydery-dlya-sayta p {
  -webkit-animation-delay: .6s;
  animation-delay: .6s;
}

.magudesaka li.flex-active-slide .degkue .slaydery-dlya-sayta span {
  -webkit-animation-delay: .8s;
  animation-delay: .8s;
}

.flex-direction-nav {
  position: absolute;
  top: 0;
  left: 30px;
}

.flex-direction-nav a {
  text-decoration: none;
  display: block;
  width: 30px;
  height: 30px;
  background-color: #333;
  margin: -20px 0 0;
  position: absolute;
  top: 50px;
  z-index: 10;
  overflow: hidden;
  opacity: .5;
  cursor: pointer;
  color: #fff;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
}

.flex-direction-nav .flex-prev {
  text-align: left;
  left: -10px;
}

.flex-direction-nav .flex-next {
  text-align: right;
  left: 30px;
}

.magudesaka:hover .flex-prev {
  left: -10px;
}

.magudesaka:hover .flex-next {
  left: 30px;
}

.magudesaka:hover .flex-next:hover,
.magudesaka:hover .flex-prev:hover {
  opacity: 1;
}

.flex-direction-nav a:before {
  font-family: FontAwesome;
  content: '\f104';
  font-size: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 0;
  padding: 2px;
  font-size: 19px;
  line-height: 27px;
}

.flex-direction-nav a.flex-next:before {
  content: '\f105';
}

@media screen and (max-width:860px) {
  .magudesaka li h1{
  background: rgba(51, 51, 51, 0.5);
  padding: 8px 10px 8px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 300;
  }
  }

@media screen and (max-width:680px) {
.magudesaka li .slaydery-dlya-sayta p {
  background: #e43837;
  margin-right: 4px;
  font-size: 12px;
  padding: 6px 6px 4px;
  font-weight: 300;
  }
  }

@media screen and (max-width:860px) {
.magudesaka li h2 {
  background: rgba(51, 51, 51, 0.5);
  padding: 6px 6px 4px;
  font-size: 12px;
  margin-bottom: 0;
  font-weight: 300;
}
}

@-webkit-keyframes fadeInLeft {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
}

@keyframes fadeInLeft {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
}

@-webkit-keyframes fadeOutLeft {
  0% {
  opacity: 1;
  }
  100% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  0% {
  opacity: 1;
  }
  100% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  }
}

Код

var $flexslider = $('.magudesaka');
$flexslider.flexslider({
  animation: "slide",
  manualControls: ".flex-control-nav li",
  useCSS: false
});

PS - при установочном процессе нужно стиль разместить в head, в вот второй стиль выставляя рядом, то кнопки просто уходили, что не мог найти решение. А стоило поставить их в CSS в самый вверх, то все стало как нужно, вот это хочется подчеркнуть перед установкой.

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

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

02 Марта 2020 Загрузок: 2 Просмотров: 1263 Комментариев: (1)

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

СКАЧАТЬ

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

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 02 Марта 2020 01:07¹ +1 Также на форуме представлен аналогичный по конструкций слайдер, но немного изменен по CSS и js немного разная, что по умолчанию на всю ширину идет слайд. Перейти на форум