Такая ситуация: есть два CSS слайдера на одной странице, которые работают.
Но есть два дефекта - 1. Стрелки смены слайда (влево-вправо) отображаются только на активном слайдере, на другом же исчезают.
2. При переключении с одного слайдера на другой, ранее активный слайдер сбрасывается до 1 слайда, независимо от того, на каком слайде он был до этого.
Примерно понимаю, где нужно копать, но что-то второй день пазл не сходится.
/*настройка переключения и положения для левой стрелки*/
/*если свич1-5 активны, то идет обращение к лейблу из блока с id контролс*/
#switch1:checked ~ #controls #A:nth-child(3),
#switch2:checked ~ #controls #A:nth-child(1),
#switch3:checked ~ #controls #A:nth-child(2){
background: url('../images/prev1.png') no-repeat; /*заливка фона картинкой без повторений*/
float: left;
margin-left: 20px; /*сдвиг влево*/
display: block;
height: 38px;
width: 38px;
}
/*настройка переключения и положения для правой стрелки*/
#switch1:checked ~ #controls #A:nth-child(2),
#switch2:checked ~ #controls #A:nth-child(3),
#switch3:checked ~ #controls #A:nth-child(1){
background: url('../images/next1.png') no-repeat; /*заливка фона картинкой без повторений*/
float: right;
margin-right: 20px; /*сдвиг вправо*/
display: block;
height: 38px;
width: 38px;
}
#A, a{ /*при наведении на стрелки или переключатели - курсор изменится*/
cursor: pointer;
}
.all input{ /*скрывает стандартные инпуты (чекбоксы) на странице*/
display: none;
}
/*позиция изображения при активации переключателя*/
#switch1:checked ~ #slides .image{
margin-left: 0;
}
/*настройка переключения и положения для левой стрелки*/
/*если свич1-5 активны, то идет обращение к лейблу из блока с id контролс*/
#switch11:checked ~ #controlsB #B:nth-child(3),
#switch12:checked ~ #controlsB #B:nth-child(1),
#switch13:checked ~ #controlsB #B:nth-child(2){
background: url('../images/prev1.png') no-repeat; /*заливка фона картинкой без повторений*/
float: left;
margin-left: 20px; /*сдвиг влево*/
display: block;
height: 38px;
width: 38px;
}
/*настройка переключения и положения для правой стрелки*/
#switch11:checked ~ #controlsB #B:nth-child(2),
#switch12:checked ~ #controlsB #B:nth-child(3),
#switch13:checked ~ #controlsB #B:nth-child(1){
background: url('../images/next1.png') no-repeat; /*заливка фона картинкой без повторений*/
float: right;
margin-right: 20px; /*сдвиг вправо*/
display: block;
height: 38px;
width: 38px;
}
#B, a{ /*при наведении на стрелки или переключатели - курсор изменится*/
cursor: pointer;
}
.allB input{ /*скрывает стандартные инпуты (чекбоксы) на странице*/
display: none;
}
/*позиция изображения при активации переключателя*/
#switch11:checked ~ #slidesB .image{
margin-left: 0;
}
первое: кнопки исчезают, скорее всего, из-за одинаковых имен инпутов у слайдеров, попробуйте второму задать input name="slider2" например.
второе: шесть одинаковых id у label вас не смущают? id должен быть уникальным для всей страницы, из-за этого тоже могут быть проблемы со слайдером, попробуйте вообще убрать у них id, тем более в css они все-равно выбираются через nth-child
05.07.2017, 03:50
algork
Цитата:
Сообщение от AlexZaw
первое: кнопки исчезают, скорее всего, из-за одинаковых имен инпутов у слайдеров, попробуйте второму задать input name="slider2" например.
второе: шесть одинаковых id у label вас не смущают? id должен быть уникальным для всей страницы, из-за этого тоже могут быть проблемы со слайдером, попробуйте вообще убрать у них id, тем более в css они все-равно выбираются через nth-child
Спасибо огромное! Поменял input name у второго слайдера, и кнопки перестали убегать, да и вторая проблема со сбросом до первого слайда тоже ушла.
05.07.2017, 05:32
Den1xxx
Цитата:
Сообщение от AlexZaw
второе: шесть одинаковых id у label вас не смущают? id должен быть уникальным для всей страницы, из-за этого тоже могут быть проблемы со слайдером, попробуйте вообще убрать у них id, тем более в css они все-равно выбираются через nth-child
одинаковые id лучше поменять на классы.
05.07.2017, 07:15
algork
Цитата:
Сообщение от Den1xxx
одинаковые id лучше поменять на классы.
Да, спасибо, забыл упомянуть. Пытался их полностью убрать - пропадали стрелки, и переключатели становились неактивными. С id тоже все работает, но поменял на классы.
05.07.2017, 14:07
ekaterina445885
отлично, спасибо!
29.08.2017, 15:55
_ALEX
Цитата:
Сообщение от AlexZaw
первое: кнопки исчезают, скорее всего, из-за одинаковых имен инпутов у слайдеров, попробуйте второму задать input name="slider2" например.
второе: шесть одинаковых id у label вас не смущают? id должен быть уникальным для всей страницы, из-за этого тоже могут быть проблемы со слайдером, попробуйте вообще убрать у них id, тем более в css они все-равно выбираются через nth-child
Ты красавчик, спасибо:0051:
тоже долго игрался все название поменял кроме инпутов
/*настройка переключения и положения для левой стрелки*/
/*если свич1-5 активны, то идет обращение к лейблу из блока с id контролс*/
#switch11:checked ~ #controlsB #B:nth-child(3),
#switch12:checked ~ #controlsB #B:nth-child(1),
#switch13:checked ~ #controlsB #B:nth-child(2)
{
background: url('prev.png') no-repeat; /*заливка фона картинкой без повторений*/
float: left;
margin: -200px 0 0 0; /*сдвиг влево*/
display: block;
height: 68px;
width: 68px;
}
/*настройка переключения и положения для правой стрелки*/
#switch11:checked ~ #controlsB #B:nth-child(2),
#switch12:checked ~ #controlsB #B:nth-child(3),
#switch13:checked ~ #controlsB #B:nth-child(1)
{
background: url('next.png') no-repeat; /*заливка фона картинкой без повторений*/
float: right;
margin: -200px -84px 0 0; /*сдвиг вправо*/
display: block;
height: 68px;
width: 68px;
}
#B, a{ /*при наведении на стрелки или переключатели - курсор изменится*/
cursor: pointer;
}