Уважаемые пользователи seo-vebmaster.ucoz.net. Вы найдете у нас на портале - различные скрипты сайтов, уникальные, бесплатные шаблоны, модули, хаки и релизы популярных CMS . С Уважением Администрация seo-vebmaster.ucoz.net

Скачать Карточка-слайдер при помощи HTML и CSS бесплатно
После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
23.12.2023, 14:21
Карточка-слайдер при помощи HTML и CSS




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

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

Так смотрится полный обзор на странице при проверке на работоспособность.




Установка:

HTML

Код

<div class="card">
  <input type="radio" name="select" id="slide_1" checked>
  <input type="radio" name="select" id="slide_2">
  <input type="radio" name="select" id="slide_3">
  <input type="checkbox" id="slideImg">

  <div class="slider">
  <label for="slide_1" class="slide slide_1"></label>
  <label for="slide_2" class="slide slide_2"></label>
  <label for="slide_3" class="slide slide_3"></label>
  </div>

  <div class="inner_part">
  <label for="slideImg" class="img">
  <img class="img_1" src="http://zornet.ru/_fr/56/s0625876.jpg">
  </label>
  <div class="content content_1">
  <div class="title">Название 1</div>
  <div class="text">
  Краткое описание
  </div>
  <button>Перейти</button>
  </div>
  </div>

  <div class="inner_part">
  <label for="slideImg" class="img">
  <img class="img_2" src="http://zornet.ru/_fr/56/s8076855.jpg">
  </label>
  <div class="content content_2">
  <div class="title">Название 2</div>
  <div class="text">
  Краткое описание
  </div>
  <button>Перейти</button>
  </div>
  </div>

  <div class="inner_part">
  <label for="slideImg" class="img">
  <img class="img_3" src="http://zornet.ru/_fr/56/s4171209.jpg">
  </label>
  <div class="content content_3">
  <div class="title">Название 3</div>
  <div class="text">Краткое описание
  </div>
  <button>Перейти</button>
  </div>
  </div>
  </div>


CSS

Код

.card {
  position: absolute;
  height: 350px;
  width: 100%;
  max-width: 850px;
  margin: auto;
  background: #ffffff;
  border-radius: 25px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
  }

  .card .inner_part {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 30px;
  height: 350px;
  position: absolute;
  }

  #slideImg:checked ~ .inner_part {
  padding: 0;
  transition: 0.1s ease-in;
  }

  .inner_part .img {
  height: 260px;
  width: 260px;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 20px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2);
  }

  #slideImg:checked ~ .inner_part .img {
  height: 350px;
  width: 850px;
  z-index: 99;
  transition: 0.3s 0.2s ease-in;
  }

  .img img {
  height: 100%;
  width: 100%;
  cursor: pointer;
  opacity: 0;
  transition: 0.6s;
  }

  #slide_1:checked ~ .inner_part .img_1,
  #slide_2:checked ~ .inner_part .img_2,
  #slide_3:checked ~ .inner_part .img_3 {
  opacity: 1;
  transition-delay: 0.2s;
  }

  .content {
  padding: 0 20px 0 35px;
  width: 530px;
  margin-left: 50px;
  opacity: 0;
  transition: 0.6s;
  }

  #slideImg:checked ~ .inner_part .content {
  display: none;
  }

  #slide_1:checked ~ .inner_part .content_1,
  #slide_2:checked ~ .inner_part .content_2,
  #slide_3:checked ~ .inner_part .content_3 {
  opacity: 1;
  margin-left: 0;
  z-index: 100;
  transition-delay: 0.3s;
  }

  .content .title {
  font-size: 30px;
  font-weight: 700;
  color: #0d0925;
  margin: 0 0 20px 0;
  }

  .content .text {
  font-size: 19px;
  color: #4e4a67;
  margin: 0 auto 30px auto;
  line-height: 1.5em;
  text-align: justify;
  }

  .content button {
  padding: 15px 20px;
  border: none;
  font-size: 16px;
  color: #fff0e6;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 50px;
  cursor: pointer;
  outline: none;
  background: #000000;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2);
  float: right;
  }

  .content button:hover {
  background: #cecece;
  color: #000000;
  }

  .slider {
  position: absolute;
  bottom: 25px;
  left: 55%;
  transform: translateX(-50%);
  z-index: 1;
  }

  #slideImg:checked ~ .slider {
  display: none;
  }

  .slider .slide {
  position: relative;
  height: 10px;
  width: 50px;
  background: #d9d9d9;
  border-radius: 5px;
  display: inline-flex;
  margin: 0 3px;
  cursor: pointer;
  }

  .slider .slide:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: -100%;
  background: #000000;
  border-radius: 10px;
  transform: scaleX(0);
  transition: transform 0.6s;
  transform-origin: left;
  }

  #slide_1:checked ~ .slider .slide_1:before,
  #slide_2:checked ~ .slider .slide_2:before,
  #slide_3:checked ~ .slider .slide_3:before {
  transform: scaleX(1);
  width: 100%;
  }

  input {
  display: none;
  }


Как можно заметить, что на основе также располагаются кнопки переключение материала, что по умолчанию видим 3 статьи, что представлены почти полностью, но разумеется кроме основного описание.

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

Скачать Карточка-слайдер при помощи HTML и CSS
Категория: Скачать Скрипты Ucoz бесплатно бесплатно | Добавил: diamont1977
Просмотров: 41 | Загрузок: 0 | Рейтинг: 0.0/0


Всего комментариев: 0
avatar
Мини профиль
Для просмотра мини профиля,войдите на сайт как пользователь.
Мы в ВКонтакте
Популярные новости
Шаблон 7ol...
Шаблон для...
Уникальный...
Оригинал с...
Шаблон для...
Лучшие фай...
Последние ...
Мини-чат
Для добавления необходимо
войти или зарегистрироваться
Статистика
Счетчики сайта
Top.Mail.Ru

Анализ сайта seo-vebmaster.ucoz.net Яндекс.Метрика Catalog.ru.net - Каталог сайтов
Сейчас online
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Сегодня наш сайт посетили
Счетчик пользователей
Сегодня нас посетило
Счетчики сайта
  • Счетчик юзеров
  • Всего юзеров: 13
    За месяц: 0
    За неделю: 0
    За вчера: 0
    Сегодня: 0
  • Счетчик материалов
  • Всего файлов: 1407
    Всего новостей: 0
    Всего статей: 0
    Темы форума: 1533
    Категории
    Шаблоны Ucoz бесплатно [24]
    Скачать бесплатно Шаблоны Ucoz бесплатно
    Скрипты Ucoz бесплатно [94]
    Скачать Скрипты Ucoz бесплатно
    Шапки для Ucoz [0]
    Скачать Шапки Ucoz бесплатно
    Иконки для Ucoz [5]
    Иконки Ucoz бесплатно
    Кнопки Ucoz бесплатно [3]
    Тут найдете и скачаете Кнопки Ucoz бесплатно
    Уроки Ucoz бесплатно [5]
    Тут найдете и скачаете Уроки Ucoz бесплатно
    Для Форумов Ucoz бесплатно [0]
    Тут найдете и скачаете Для Форумов Ucoz бесплатно
    Разное Ucoz бесплатно [38]
    Тут найдете и скачаете Разное Ucoz бесплатно
    Партнеры сайта
    Стать партнером Стать партнером Стать партнером Стать партнером
    Интересные файлы
    Шрифт - DS...
    Аврора
    Стили для ...
    Стили для ...
    Адаптация ...
    Стили для ...
    Фоны для ф...