Перейти к содержанию

Рекомендуемые сообщения

Помогите сделать автопрокрутку. Вот весь код слайдера:

Ахтунг!

.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);
}

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Прокрутка слайдера происходит не с помощью css а с помощью скриптов

Что мешает найти на просторах интернета слайдер с авто прокруткой?!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Onore, попробуй по этому примеру 

https://codepen.io/vavik96/pen/KwoVxv

 

Изменено пользователем Viktar83

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

PS: надо бы все это дело вам протестировать в разных браузерах и разных платформах - уверен, не все так радужно, даже очень не радужно.

Когда-то ставил css-слайдер на ipb 3.4 (немного другой, по этой статье http://habrahabr.ru/post/150030/ ), но все равно нужны были костыли для того же IE (причем на ява скриптах). А ведь помимо зоопарка браузеров сейчас существует зоопарк мобильников и планшетов на разных платформах...

Поэтому я бы на вашем месте поискал готовый хороший "адаптивная кроссбраузерный слайдер".

PPS: Для ips 4 есть 

но особо ничего не скажу, ибо толком его не ковырял

 

Изменено пользователем Viktar83

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

А я вот ковырял, и он жутко неудобный

В 04.07.2017 в 12:47, WOLF сказал:

Прокрутка слайдера происходит не с помощью css а с помощью скриптов

Что мешает найти на просторах интернета слайдер с авто прокруткой?!

Потому что этот слайдер подходит идеально, ну разве что прокрутки нет

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
7 минут назад, Onore сказал:

А я вот ковырял, и он жутко неудобный

Потому что этот слайдер подходит идеально, ну разве что прокрутки нет

 

ищите другой

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

В IPS есть встроенный слайдер с автопрокруткой. Что мешает им воспользоваться переделав под свои цели?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 10.07.2017 в 12:48, kgb сказал:

В IPS есть встроенный слайдер с автопрокруткой. Что мешает им воспользоваться переделав под свои цели?

уточните пожалуйста что имеется ввиду, где там слайдер с автопрокруткой в АС?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Циклическая CSS-анимация грузит процессор не милосердно, не рекомендуется к использованию пока что.

https://css-live.ru/articles/proizvoditelnost-css-animacij-nerasskazannaya-istoriya-s-kommentariyami-pola-ajrisha.html

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 02.02.2019 в 22:45, reto сказал:

точните пожалуйста что имеется ввиду

Например виджет блога

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×