CSS: Скольжение изображения с радио: проверено (Pure CSS slider)

Целью является создание слайдера с использованием только CSS. Для этой попытки я попытался использовать изображение 200px на 1500px, имеющее «3 раздела» (с цветовой кодировкой) Позиционированный абсолютно с левым: 0, переключатель по умолчанию, установленный по умолчанию, показывает первые 500 пикселей изображения (слайд 1), поскольку обертка - 200x500 пикселей с скрытым переполнением. Проверка переключателя с помощью метки для «slide2» дает мне следующие 500 пикселей изображения (слайд 2), позиционируя изображение слева: -500px. Которая сейчас работает нормально. Проблема, с которой я столкнулась, заключается в том, что изображение будет перемещаться на -1000 пикселей, показывая окончательный 500 пикселей изображения (слайд 3). Кажется, когда я добавляю третий радиовход и метку, слайдер ломается, а другие входы ничего не делают. Фактически, первый переключатель css иногда кажется бессмысленным, поскольку установка перехода на самом изображении представляется необходимым для получения желаемого эффекта для переключателя «Slide 1».CSS: Скольжение изображения с радио: проверено (Pure CSS slider)

Ссылка на изображение: http://imgur.com/a/DCiI4

HTML:

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="default.css"/> 
    </head> 
<body> 
    <div id="wrap"> 
     <input type="radio" id="slide1" name="radio" checked> 
     <input type="radio" id="slide2" name="radio"> 
     <!--<input type="radio" id="slide3" name="radio">--> 
     <img src="images/slides.jpg"/> 
     <label for="slide1">slide1</label> 
     <label for="slide2">slide2</label> 
     <!--<label for="slide3">slide3</label>--> 
    </div> 
</body> 
</html>

CSS:

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#wrap { 
    width: 500px; 
    height: 200px; 
    background: #000; 
    color: #fff; 
    position: relative; 
    /*overflow: hidden;*/ 
} 

img { 
    position: absolute; 
    top: 20; 
    left: 0; 
    transition: .5s ease-out; 
    height: 200px; 
    width: 1500px; 
} 

input[type="radio"] { 
    display: none; 
} 

#slide1:checked + img { 
    left: 0; 
    transition: .5s ease-out; 
} 

#slide2:checked + img { 
    left: -500px; 
    transition: .5s ease-out; 
} 

/*#slide3:checked + img { 
    left: -1500px; 
    transition: .5s ease-out; 
}*/

Цените помощь! И если есть более простой/простой способ сделать слайдер с элементами управления только в CSS, я бы с удовольствием узнал. Пробовал пару примеров, которые я нашел в Интернете, но никто не смотрит и не анимирует, как бы мне хотелось.

источник

2017-02-23 3412127

Здесь вы идете - консолидировали некоторые из ваших CSS, расширили его третьим изображением и воспользовались translateX() и opacity, чтобы улучшить переход между слайдами.

img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    transition: opacity .5s ease-out, transform .5s ease-out; 
 
    transform: translateX(-100%); 
 
    /* transform: translateX(-100%) rotate(-720deg); */ /* try this, it's nuts */ 
 
    opacity: 0; 
 
} 
 

 
input[type="radio"] { 
 
    display: none; 
 
} 
 

 
input:checked + img { 
 
    transform: translateX(0); 
 
    /* transform: translateX(0) rotate(0); */ /* try this with the commented line above */ 
 
    opacity: 1; 
 
    z-index: 1; 
 
} 
 

 
.controls { 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    z-index: 2; 
 
} 
 

 
label { 
 
    background: rgba(0,0,0,0.8); 
 
    color: #fff; 
 
    padding: .5em; 
 
    margin: 0 1em 0 0; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
}

<div id="wrap"> 
 
    <input type="radio" id="slide1" name="radio" checked> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" /> 
 
    <input type="radio" id="slide2" name="radio"> 
 
    <img src="http://www.star2.com/wp-content/uploads/2015/06/happy-days-770x470.jpg"> 
 
    <input type="radio" id="slide3" name="radio"> 
 
    <img src="https://timedotcom.files.wordpress.com/2016/08/henry-winkler.jpg?quality=85"> 
 
    <div class="controls"> 
 
    <label for="slide1">slide1</label> 
 
    <label for="slide2">slide2</label> 
 
    <label for="slide3">slide3</label> 
 
    </div> 
 
</div>

источник

2017-02-23 01:07:40

Спасибо Майклу, что отлично работает. Быстрый вопрос: как вы собираетесь установить задержку до того, как предыдущее изображение вернется? Итак, похоже, что новое скользящее изображение перекрывает его? Большое спасибо! – 3412127

@ 3412127 np. Вы не можете сделать это только с помощью CSS. Вам нужно будет использовать javascript. Вы действительно ограничены тем, что можете сделать, пытаясь построить что-то подобное с помощью CSS. –

@ 3412127 btw добро пожаловать в SO. Обязательно повышайте должности, если они помогают поощрять участие и показывать всем, кто ищет вашу проблему, и находит этот пост, ответы на которые хороши, а также обязательно принять ответ в какой-то момент (галочка по ответам) –

CSS: Скольжение изображения с радио: проверено (Pure CSS slider)

ответ

Смежные вопросы