• Страница 1 из 1
  • 1
Форум » Веб-разработка » Вопросы по uCoz » Как создать адаптивный слайдер на чистом CSS (Создать адаптивный слайдер на всем мобильные аппараты)
Как создать адаптивный слайдер на чистом CSS
Kosten
Дата: Суббота, 2019-08-24, 21:58 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25086
Награды: 57


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

Но вот сам не мог его адаптировать, где только от функционала кнопки и само изображение. Что по сути в медео можно было прописать 100% и сделать его резиновым, но здесь изображение накладывались друг на друга.

Если кто хочет помочь, так сказать дать ему еще поработать, то здесь от души, спасибо!



HTML

Код
<div class="kuchatel-kavanok">
  <input type="radio" name="veklucanel" id="demus1" checked>
  <input type="radio" name="veklucanel" id="demus2">
  <input type="radio" name="veklucanel" id="demus3">
  
  <div class="veklucanel">
    <label for="demus1"></label>
    <label for="demus2"></label>
    <label for="demus3"></label>
  </div>
  
  <div class="kuchatel-kavanok-inner">
    <div class="prostoy-slayder">
      <img src="https://www.roscosmos.ru/media/img/foto/2018/wallpapers/0014.jpg"/>
      <img src="http://conceptartworld.com/wp-content/uploads/2013/10/Mathieu_Latour-Duhaime_Concept_Art_Thief_01-680x340.jpg"/>
      <img src="http://conceptartworld.com/wp-content/uploads/2013/10/Mathieu_Latour-Duhaime_Concept_Art_Thief_07-680x340.jpg"/>
    </div>
  </div>
  
</div>

CSS

Код
.kuchatel-kavanok {
  position: relative;
  width: 680px;
  margin: 50px auto;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}

.kuchatel-kavanok input[name="veklucanel"] {
  display: none;
}

.veklucanel {
  position: absolute;
  left: 0;
  bottom: -40px;
  text-align: center;
  width: 100%;
}

.veklucanel label {
  display: inline-block;
  width: 8px;
  height: 8px;
  cursor: pointer;
  margin: 0 3px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .8);
  border-radius: 50%;
  border: 5px solid #2f363c;
  background-color: #738290;
}

#demus1:checked~.veklucanel label[for="demus1"] {
  background-color: white;
}

#demus2:checked~.veklucanel label[for="demus2"] {
  background-color: white;
}

#demus3:checked~.veklucanel label[for="demus3"] {
  background-color: white;
}

.kuchatel-kavanok-inner {
  overflow: hidden;
}

.prostoy-slayder {
  width: 300%;
  transition: all 0.5s;
}

.prostoy-slayder img {
  width: 680px;
  height: 320px;
  float: left;
}

#demus1:checked~kuchatel-kavanok-inner prostoy-slayder {
  transform: translate(0);
}

#demus2:checked~.kuchatel-kavanok-inner .prostoy-slayder {
  transform: translate(-680px);
}

#demus3:checked~.kuchatel-kavanok-inner .prostoy-slayder {
  transform: translate(-1360px);
}


Демонстрация
Прикрепления: 5260612.jpg(39.2 Kb)
Страна: (RU)
Kosten
Дата: Суббота, 2019-08-24, 23:40 | Сообщение 2
Оффлайн
Администраторы
Сообщений:25086
Награды: 57


По вопросу все разрешилось, и теперь этот слайдер полностью адаптивный.


See the Pen
Слайдер на сайт
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Форум » Веб-разработка » Вопросы по uCoz » Как создать адаптивный слайдер на чистом CSS (Создать адаптивный слайдер на всем мобильные аппараты)
  • Страница 1 из 1
  • 1
Поиск: