Слайдер на css проблемы с перелистыванием.

fhjktrdf · 22 Фев 2016

Нужна помощь. Нужно подправить слайдер на css, что бы переключались картики при нажатии стрелок по бокам. Боковые кнопки взяты от другого слайдера.
Cейчас на данный момент слайд переключется с 1 на 5 и обратно, минуя остальные. Но при нажатии на радо кнопки все картинки переключаются.

Вот сам скрипт

Код:

/*/////////////////////////////////////SLIDER1//////////////////////////////////////////////////*/
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    background-image: url}/*задний фон слайдера (отклюс)*/
 
 
 

.wrapper {
 
    margin: 100px auto 0;
    position: relative;
    width: 1010px;
    height:700px;
    margin-left:-250px;
    margin-top: -35px;
    z-index: 0;



}

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

.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 { background-image: url(http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9bfc9.jpg); }
.slide2 { background-image: url(http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg); }
.slide3 { background-image: url(http://habrastorage.org/files/663/6b1/d4f/6636b1d4f8e643d29eab8c192fc1cea3.jpg); }
.slide4 { background-image: url(http://habrastorage.org/files/e59/424/c04/e59424c046be4dab897d84ab015c87ea.jpg); }
.slide5 { background-image: url(http://habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg); }

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

.wrapper > input {
    display: none;
}

.wrapper .controls {
    left: 50%;
    margin-left: -98px;
    position: absolute;
}

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

#controls label:hover {
    opacity: 0.8;
}




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



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


/*/////////////////////////////////////SLIDER2//////////////////////////////////////////////////*/ Как-то нужно объединить кнопки

/* Control Setup */


input {
    display: none;
}

#controls {
    margin: -25% 0 0 0;
    width: 100%;
    height: 50px;
}

#controls label {
    display: none;
    width: 50px;
    height: 50px;
    opacity: 0.3;
}

ВОТ ЗДЕСТЬ ПРОИСХОДИТ ПЕРЕКЛЮЧЕНИЕ ПО БОКОВЫМ КНОПКАМ

#slide1:checked ~ #controls label:nth-of-type(5),
#slide2:checked ~ #controls label:nth-of-type(1),
#slide3:checked ~ #controls label:nth-of-type(2),
#slide4:checked ~ #controls label:nth-of-type(3),
#slide5:checked ~ #controls label:nth-of-type(4){
    background: url(../img/next.png) no-repeat;
    float: right;
    margin: -220 -185px 0 0;
    display: block;
}



#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: url(../img/prev.png) no-repeat;
    float: left;
    margin: -220 0 0 -305px;
    display: block;
}

assus · 22 Фев 2016

не проще найти готовый и поставить, их полно в инете

fhjktrdf · 23 Фев 2016

assus написал(а):
не проще найти готовый и поставить, их полно в инете

Нет, так не катит, мне нужно именно этот.

fhjktrdf · 23 Фев 2016

УРА!! Ели как получилось заставить кнопки работать, но не так, как хотелось бы. Теперь пропали радио кнопки, Ну... я думаю и без них хорошо.

AriCosmo · 23 Фев 2016

В следующий раз накажу за такое длинное название темы!

fhjktrdf · 23 Фев 2016

AriCosmo написал(а):
В следующий раз накажу за такое длинное название темы!

Длина названия темы ограниченно на 100 символов, в которые я уложился.

AriCosmo · 23 Фев 2016

fhjktrdf написал(а):
Длина названия темы ограниченно на 100 символов, в которые я уложился.

Правила: https://servahoc.ru/threads/osnovnye-pravila-foruma.20/
Нарушение пункта 1.4 и 2.0

fhjktrdf · 23 Фев 2016

AriCosmo написал(а):
Правила: https://servahoc.ru/threads/osnovnye-pravila-foruma.20/
Нарушение пункта 1.4 и 2.0

Во-первых пункт 1.4. Название моей темы довольно таки осмысленное.
Во-вторых пункт 2.0. Мне не понятен,с чего вы решили что моя тема относится к данной категории. И вы просто пытаетесь оскорбить меня. А от того что вы не понимаете сути темы, скорее всего вы не годитесь на должность Модератора. Из-за элементарных знаний.

fhjktrdf · 23 Фев 2016

Р.S. На счет длины темы, я согласен, но ни как с остальными.

AriCosmo · 23 Фев 2016

fhjktrdf написал(а):
Во-первых пункт 1.4. Название моей темы довольно таки осмысленное.
Во-вторых пункт 2.0. Мне не понятен,с чего вы решили что моя тема относится к данной категории. И вы просто пытаетесь оскорбить меня. А от того что вы не понимаете сути темы, скорее всего вы не годитесь на должность Модератора. Из-за элементарных знаний.

Оскорбить? - нет, не в коем случае, наоборот название вашей темы оскорбляло всех пользователей.
Якобы тут нет программистов. И я свою должность давно заслужил.))

fhjktrdf · 23 Фев 2016

AriCosmo написал(а):
Оскорбить? - нет, не в коем случае, наоборот название вашей темы оскорбляло всех пользователей.
Якобы тут нет программистов. И я свою должность давно заслужил.))

Надеюсь вы не хотите сказать, что здесь все программисты сидят. Мне пришлось дописать название темы, что бы не оскорбить, а наоборот обратить внимание людей, которые разбираются в программировании, на мою тему, что бы помогли разобраться.

AriCosmo · 23 Фев 2016

fhjktrdf написал(а):
Надеюсь вы не хотите сказать, что здесь все программисты сидят. Мне пришлось дописать название темы, что бы не оскорбить, а наоборот обратить внимание людей, которые разбираются в программировании, на мою тему, что бы помогли разобраться.

Это форум веб-программистов!)
И так получилось, что я тоже программист и название темы меня наоборот взбесила.

fhjktrdf · 23 Фев 2016

AriCosmo написал(а):
Это форум веб-программистов!)
И так получилось, что я тоже программист и название темы меня наоборот взбесила.

Да, форум-программистов и ни кто не смог помочь. А на счет того, что вас взбесило, может вы слабохарактерный человек? Ведь ни кто кроме вас мне ни кто не писал, что созданная мною тема его оскорбляла.

AriCosmo · 23 Фев 2016

fhjktrdf написал(а):
Да, форум-программистов и ни кто не смог помочь. А на счет того, что вас взбесило, может вы слабохарактерный человек? Ведь ни кто кроме вас мне ни кто не писал, что созданная мною тема его оскорбляла.

Вот именно) Никто из прогеров вам не ответил)))

assus · 23 Фев 2016

Я понел и модер тоже не хочит помогать, если еще помощь можна тогда скинь сам скрипт слайдера(полный), я верером посмотрю

fhjktrdf · 24 Фев 2016

assus написал(а):
Я понел и модер тоже не хочит помогать, если еще помощь можна тогда скинь сам скрипт слайдера(полный), я верером посмотрю

Вот посмотри, как время будет
Полный скрипт демо (1) http://jsfiddle.net/ReizorTM/a068hw55/ ,который мене нужен, НО НЕТ боковых кнопок "стрелки" для перелистывания слайдов как здесь демо (2) http://csscience.com/responsiveslidercss3 .
[ссылка на скачавания http://css-live.ru/Primer/slider-css/slider.zip <300 кбайт]

Оба слайдера полностью на CSS.
Мне нужно кнопки "стрелки" выдернуть со 2 слайдера и поставить в 1 слайдер. И что не мало важно чтобы с 1 слайдера ничего не пропало и все работало

assus · 25 Фев 2016

Времени нет посмотреть , вот тут может тебе поможет скрипты слайды: https://yadi.sk/d/fEHB28xopVKEp

fhjktrdf · 25 Фев 2016

assus написал(а):
Времени нет посмотреть , вот тут может тебе поможет скрипты слайды: https://yadi.sk/d/fEHB28xopVKEp

Спасибо. Но я все таки прикрутил кнопки боковые полностью работает, но зато пропали радиокнопки. Но с боковыми кнопками удобно перелистывать чем тыкать на радиокнопки