Css карусель с неработающими кнопками

Я пытаюсь создать карусель css без использования javascript. Карусель содержит кнопки для изменения текущего изображения, но с этим кодом есть 2 проблемы.

1. Все вроде работает нормально, но когда я добавляю анимацию в div (img- контейнер) кнопки не работают.

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

что я делаю не так и каковы другие способы добиться этого?

<html>

<head>
  <style>
    * {
      transition: all 0.2s;
      box-sizing: border-box;
    }
    
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    .container {
      width: 100%;
      position: relative;
      height: 500px;
      border: 1px solid black;
      text-align: center;
    }
    
    .slider,
    .image-container,
    .sliding-img {
      width: 100%;
      height: 100%;
    }
    
    .slideMove {
      position: absolute;
      bottom: 0;
      height: auto;
    }
    
    .select-container {
      width: 100%;
      height: auto;
      position: absolute;
      bottom: 0;
      z-index: 1;
    }
    
    .slider {
      /*height: auto;*/
      overflow: hidden;
    }
    
    .slideMove {
      display: none;
    }
    
    .image-container {
      white-space: nowrap;
      font-size: 0;
      animation: slide 10s infinite alternate;
    }
    
    @keyframes slide {
      10%,
      30% {
        transform: translate(0);
      }
      32%,
      52% {
        transform: translate(-100%);
      }
      54%,
      74% {
        transform: translate(-200%);
      }
      76%,
      100% {
        transform: translate(-300%);
      }
    }
    
    .img-selector {
      display: inline-block;
    }
    
    .sliding-img {
      display: inline-block;
    }
    
    .slider input:nth-child(1):checked~.image-container {
      transform: translateX(0);
    }
    
    .slider input:nth-child(2):checked~.image-container {
      transform: translateX(-100%);
    }
    
    .slider input:nth-child(3):checked~.image-container {
      transform: translateX(-200%);
    }
    
    .slider input:nth-child(4):checked~.image-container {
      transform: translateX(-300%);
    }
  </style>
</head>

<body>
  <div class = "container">
    <div class = "select-container">
      <label for='1' class = "img-selector">img1</label>
      <label for='2' class = "img-selector">img2</label>
      <label for='3' class = "img-selector">img3</label>
      <label for='4' class = "img-selector">img4</label>
    </div>
    <div class = "slider">
      <input id='1' class = "slideMove" type = "radio" name = "slider" />
      <input id='2' class = "slideMove" type = "radio" name = "slider" />
      <input id='3' class = "slideMove" type = "radio" name = "slider" />
      <input id='4' class = "slideMove" type = "radio" name = "slider" />
      <div class = "image-container">
        <div class = "sliding-img" style = "background:rgb(20,200,200)">
        </div>
        <div class = "sliding-img" style = "background:rgb(20,20,200)">
        </div>
        <div class = "sliding-img" style = "background:rgb(230,20,200)">
        </div>
        <div class = "sliding-img" style = "background:rgb(10,20,2)">
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Кнопки работают, но их переход конфликтует с анимацией .img- container. С вашей структурой html вы можете начать с автоматической карусели (пока не было нажато ни одной метки), и как только пользователь щелкнет любую метку, автоматическая карусель перестанет работать.

— 21.06.2018 10:32

есть ли способ заставить их обоих работать?

— 21.06.2018 10:38

Нет, без скрипта, по крайней мере, я не могу представить себе ... Почему я не использую один из огромного количества существующих плагинов карусели?

— 21.06.2018 10:39

Посмотрите benschwarz.github.io/gallery-css, и вы можете немного прочитать об этом здесь, примерно на полпути вниз по странице: mediatemple.net/blog/tips/carousels-dont-have-to-be-complica‌ ted

— 21.06.2018 15:22

html css slider carousel

21.06.2018 10:19

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

181

Ответы 1

Просто добавьте анимацию: none к отмеченным кнопкам следующим образом:

 .slider input:nth-child(1):checked~.image-container {
  animation:none;
  transform: translateX(0);
}

Я уже пробовал это, при этом кнопка работает, но затем анимация останавливается.

— 21.06.2018 11:20

21.06.2018 11:03

Другие вопросы по теме

Преобразование слайдера / карусели в пейджер при переключении с рабочего стола на мобильное представление

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

Как установить цвет фона по угловому значению

Как распределить эти карты равномерно

Bootstrap Popover Полный экран с полем

Как создать 2 строки начальной загрузки с одинаковой высотой И они должны складываться при изменении размера

Куда добавить файлы css и js на страницах элементов или WordPress

Проблема с шаблоном жидкости vuetify Parallax

Как я могу применить стиль css к реквизитам в React?

Использование многоточия css для встроенного или встроенного блочного элемента

Css карусель с неработающими кнопками

Ответы 1

Другие вопросы по теме

Похожие вопросы