Onore Опубликовано 4 июля, 2017 Поделиться Опубликовано 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 Опубликовано 4 июля, 2017 Поделиться Опубликовано 4 июля, 2017 Прокрутка слайдера происходит не с помощью css а с помощью скриптов Что мешает найти на просторах интернета слайдер с авто прокруткой?! Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Viktar83 Опубликовано 4 июля, 2017 Поделиться Опубликовано 4 июля, 2017 (изменено) Onore, попробуй по этому примеру https://codepen.io/vavik96/pen/KwoVxv Изменено 4 июля, 2017 пользователем Viktar83 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Viktar83 Опубликовано 4 июля, 2017 Поделиться Опубликовано 4 июля, 2017 (изменено) PS: надо бы все это дело вам протестировать в разных браузерах и разных платформах - уверен, не все так радужно, даже очень не радужно. Когда-то ставил css-слайдер на ipb 3.4 (немного другой, по этой статье http://habrahabr.ru/post/150030/ ), но все равно нужны были костыли для того же IE (причем на ява скриптах). А ведь помимо зоопарка браузеров сейчас существует зоопарк мобильников и планшетов на разных платформах... Поэтому я бы на вашем месте поискал готовый хороший "адаптивная кроссбраузерный слайдер". PPS: Для ips 4 есть но особо ничего не скажу, ибо толком его не ковырял Изменено 4 июля, 2017 пользователем Viktar83 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Onore Опубликовано 10 июля, 2017 Автор Поделиться Опубликовано 10 июля, 2017 А я вот ковырял, и он жутко неудобный В 04.07.2017 в 12:47, WOLF сказал: Прокрутка слайдера происходит не с помощью css а с помощью скриптов Что мешает найти на просторах интернета слайдер с авто прокруткой?! Потому что этот слайдер подходит идеально, ну разве что прокрутки нет Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
WOLF Опубликовано 10 июля, 2017 Поделиться Опубликовано 10 июля, 2017 7 минут назад, Onore сказал: А я вот ковырял, и он жутко неудобный Потому что этот слайдер подходит идеально, ну разве что прокрутки нет ищите другой Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
kgb Опубликовано 10 июля, 2017 Поделиться Опубликовано 10 июля, 2017 В IPS есть встроенный слайдер с автопрокруткой. Что мешает им воспользоваться переделав под свои цели? Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
reto Опубликовано 2 февраля, 2019 Поделиться Опубликовано 2 февраля, 2019 В 10.07.2017 в 12:48, kgb сказал: В IPS есть встроенный слайдер с автопрокруткой. Что мешает им воспользоваться переделав под свои цели? уточните пожалуйста что имеется ввиду, где там слайдер с автопрокруткой в АС? Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Dmitriy427 Опубликовано 2 февраля, 2019 Поделиться Опубликовано 2 февраля, 2019 Циклическая CSS-анимация грузит процессор не милосердно, не рекомендуется к использованию пока что. https://css-live.ru/articles/proizvoditelnost-css-animacij-nerasskazannaya-istoriya-s-kommentariyami-pola-ajrisha.html Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
kgb Опубликовано 17 февраля, 2019 Поделиться Опубликовано 17 февраля, 2019 В 02.02.2019 в 22:45, reto сказал: точните пожалуйста что имеется ввиду Например виджет блога Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.