Onore 13 Жалоба Опубликовано 4 июля, 2017 Помогите сделать автопрокрутку. Вот весь код слайдера: Ахтунг! .wrapper { height: 290px; position: relative; width: 940px; margin-bottom: -10px; } .slider { background-color: #ddd; height: inherit; overflow: hidden; position: relative; width: inherit; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5); -o-box-shadow: 0 0 20px rgba(0, 0, 0, .5); box-shadow: 0 0 20px rgba(0, 0, 0, .5); } .wrapper > input { display: none; } .slides { height: inherit; position: absolute; width: inherit; } .slide1 { background-image: url(http://rm-dark.ru/uploads/images/LVKvjL6.gif); background-size: 940px 355px; } .slide2 { background-image: url(http://rm-dark.ru/uploads/images/919658_original.gif); background-size: 940px 300px; } .slide3 { background-image: url(http://rm-dark.ru/uploads/images/138547.gif); background-size: 942px 292px; } .slide4 { background-image: url(http://rm-dark.ru/uploads/images/razmer.jpg); } .slide5 { background-image: url(http://rm-dark.ru/uploads/images/razmer.jpg); } .wrapper .controls { left: 40%; position: absolute; margin-top: -45px; z-index: 9999; } .wrapper label { cursor: pointer; display: inline-block; height: 8px; margin: 25px 12px 0 16px; position: relative; width: 8px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .wrapper label:after { border: 2px solid #ddd; content: " "; display: block; height: 12px; left: -4px; position: absolute; top: -4px; width: 12px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .wrapper label { cursor: pointer; display: inline-block; height: 8px; margin: 25px 12px 0 16px; position: relative; width: 8px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transition: background ease-in-out .5s; -moz-transition: background ease-in-out .5s; -o-transition: background ease-in-out .5s; transition: background ease-in-out .5s; } .wrapper label:hover, #slide1:checked ~ .controls label:nth-of-type(1), #slide2:checked ~ .controls label:nth-of-type(2), #slide3:checked ~ .controls label:nth-of-type(3), #slide4:checked ~ .controls label:nth-of-type(4), #slide5:checked ~ .controls label:nth-of-type(5) { background: #ddd; } .slides { height: inherit; opacity: 0; position: absolute; width: inherit; z-index: 0; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); -webkit-transition: transform ease-in-out .5s, opacity ease-in-out .5s; -moz-transition: transform ease-in-out .5s, opacity ease-in-out .5s; -o-transition: transform ease-in-out .5s, opacity ease-in-out .5s; transition: transform ease-in-out .5s, opacity ease-in-out .5s; } #slide1:checked ~ .slider > .slide1, #slide2:checked ~ .slider > .slide2, #slide3:checked ~ .slider > .slide3, #slide4:checked ~ .slider > .slide4, #slide5:checked ~ .slider > .slide5 { opacity: 1; z-index: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } Поделиться сообщением Ссылка на сообщение Поделиться на другие сайты
WOLF 3 002 Жалоба Опубликовано 4 июля, 2017 Прокрутка слайдера происходит не с помощью css а с помощью скриптов Что мешает найти на просторах интернета слайдер с авто прокруткой?! Поделиться сообщением Ссылка на сообщение Поделиться на другие сайты
Viktar83 209 Жалоба Опубликовано 4 июля, 2017 (изменено) Onore, попробуй по этому примеру https://codepen.io/vavik96/pen/KwoVxv Изменено 4 июля, 2017 пользователем Viktar83 Поделиться сообщением Ссылка на сообщение Поделиться на другие сайты
Viktar83 209 Жалоба Опубликовано 4 июля, 2017 (изменено) PS: надо бы все это дело вам протестировать в разных браузерах и разных платформах - уверен, не все так радужно, даже очень не радужно. Когда-то ставил css-слайдер на ipb 3.4 (немного другой, по этой статье http://habrahabr.ru/post/150030/ ), но все равно нужны были костыли для того же IE (причем на ява скриптах). А ведь помимо зоопарка браузеров сейчас существует зоопарк мобильников и планшетов на разных платформах... Поэтому я бы на вашем месте поискал готовый хороший "адаптивная кроссбраузерный слайдер". PPS: Для ips 4 есть но особо ничего не скажу, ибо толком его не ковырял Изменено 4 июля, 2017 пользователем Viktar83 Поделиться сообщением Ссылка на сообщение Поделиться на другие сайты
Onore 13 Жалоба Опубликовано 10 июля, 2017 А я вот ковырял, и он жутко неудобный В 04.07.2017 в 12:47, WOLF сказал: Прокрутка слайдера происходит не с помощью css а с помощью скриптов Что мешает найти на просторах интернета слайдер с авто прокруткой?! Потому что этот слайдер подходит идеально, ну разве что прокрутки нет Поделиться сообщением Ссылка на сообщение Поделиться на другие сайты
WOLF 3 002 Жалоба Опубликовано 10 июля, 2017 7 минут назад, Onore сказал: А я вот ковырял, и он жутко неудобный Потому что этот слайдер подходит идеально, ну разве что прокрутки нет ищите другой Поделиться сообщением Ссылка на сообщение Поделиться на другие сайты
kgb 375 Жалоба Опубликовано 10 июля, 2017 В IPS есть встроенный слайдер с автопрокруткой. Что мешает им воспользоваться переделав под свои цели? Поделиться сообщением Ссылка на сообщение Поделиться на другие сайты
reto 0 Жалоба Опубликовано 2 февраля В 10.07.2017 в 12:48, kgb сказал: В IPS есть встроенный слайдер с автопрокруткой. Что мешает им воспользоваться переделав под свои цели? уточните пожалуйста что имеется ввиду, где там слайдер с автопрокруткой в АС? Поделиться сообщением Ссылка на сообщение Поделиться на другие сайты
Dmitriy427 92 Жалоба Опубликовано 2 февраля Циклическая CSS-анимация грузит процессор не милосердно, не рекомендуется к использованию пока что. https://css-live.ru/articles/proizvoditelnost-css-animacij-nerasskazannaya-istoriya-s-kommentariyami-pola-ajrisha.html Поделиться сообщением Ссылка на сообщение Поделиться на другие сайты