В упор не вижу ошибку.
http://codepen.io/AleksFers/pen/YWNqBq
А нет нашел, но возник вопрос почему из за переноса input и slider-controls вниз по дереву ломается весь код слайдера, мне нужно чтоб переключатели были именно внизу
все разобрался в своей проблеме, просто input не надо перемещать.
Всё из-за ~.
Когда переносишь input и slider-controls вниз, ломается эта цепочка: #btn-2:checked~.slider-inner .slider-slides (после кнопки (~) больше не находится блок .slider-inner.
Была у меня похожая ситуация в одной из задач по CSS, правда это был не слайдер, а меню, долго не могла понять в чем дело.
P.S. Картинки в слайдере снова не загрузились(
1 лайк
Да с картинками беда, не могу пока понять как их загрузить так чтоб все видели
А вот еще вопрос Ineska ты не сталкивалась с таким делом что надо при переключении слайдов кнопками анимация отключается?
Переформулируй вопрос, пожалуйста. Я его не совсем поняла.
Смотри, я хочу чтобы когда человек нажимает на кнопки переключения фотографий на странице, анимация которая проигрывается в этот момент отключалась, а как только человек убирает курсор с блока с кнопками анимация запускается
Анимация тоже переключает слайды?
Да, по умолчанию когда человек заходит на страницу хочу чтоб шла анимация, но если человек захочет разглядеть одну из картинок получше, надо чтоб была возможность остановить анимация, вот пока не разобрался как.
Вряд ли это можно сделать только средствами CSS…
Допустим, удалось бы остановить анимацию, когда человек нажимает на переключатель, но сама она не возобновится.
Поэтому тут скорее всего только JS.
Блин еслиб удалось это сделать, был бы слайдер без js, гибкий к форматированию. Рассказал бы кто про то как это на js реализовать.
slides:hover,
buttons:hover {
animation-play-state: paused;
}
2 лайка
Я уже прочитал об этом, но все равно спасибо:)