Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Два CSS слайдера на одной странице

Всем привет!

Я новичок, учу html и css самостоятельно.

Такая ситуация: есть два CSS слайдера на одной странице, которые работают.
Но есть два дефекта - 1. Стрелки смены слайда (влево-вправо) отображаются только на активном слайдере, на другом же исчезают.
2. При переключении с одного слайдера на другой, ранее активный слайдер сбрасывается до 1 слайда, независимо от того, на каком слайде он был до этого.


Примерно понимаю, где нужно копать, но что-то второй день пазл не сходится.

Прошу Вашей помощи!

Слайдер номер 1

<div class="all">
<input checked type="radio" name="respond" id="desktop">
<article id="slider">
<input checked type="radio" name="slider" id="switch1">
<input type="radio" name="slider" id="switch2">
<input type="radio" name="slider" id="switch3">
<div id="slides">
<div id="overflow">
<div class="image">
<article><img src="images/1.jpg">
<div class="link">
<div class="button_text3"><a href="#">Описание</a></div>
</div>
</article>
<article><img src="images/2.jpg">
<div class="link">
<div class="button_text3"><a href="#">Описание</a></div>
</div>
</article>
<article><img src="images/3.jpg">
<div class="link">
<div class="button_text3"><a href="#">Описание</a></div>
</div>
</article>

</div>
</div>
</div>
<div id="controls">
<label id="A" for="switch1"></label>
<label id="A" for="switch2"></label>
<label id="A" for="switch3"></label>

</div>
<div id="active">
<label id="A" for="switch1"></label>
<label id="A" for="switch2"></label>
<label id="A" for="switch3"></label>

</div>
</article>
</div>



#slider { /*положение слайдера*/
position: relative;
text-align: center;
top: 40px;
float: left;
width: 520px;

}

#slider{ /*центровка слайдера*/
margin: left;

}

#slides article{ /*все изображения справа друг от доруга*/
width: 20%;
float: left;
}

#slides .image{ /*устанавливает общий размер блока с изображениями*/
width: 500%;
line-height: 0;
}

#overflow{ /*сркывает все, что находится за пределами этого блока*/
width: 100%;
overflow: hidden;
}

article img{ /*размер изображений слайдера*/
width: 100%;
height: 350px;
}

#desktop:checked ~ #slider{ /*размер всего слайдера*/
max-width: 520px; /*максимальнная длинна*/
}

/*настройка переключения и положения для левой стрелки*/
/*если свич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;
}

#switch2:checked ~ #slides .image{
margin-left: -100%;
}

#switch3:checked ~ #slides .image{
margin-left: -200%;
}

#controls{ /*положение блока всех управляющих элементов*/
margin-top: -235px;
width: 100%;
height: 115px;
}

#active #A{ /*стиль отдельного переключателя*/
border-radius: 10px; /*скругление углов*/
display: inline-block; /*расположение в строку*/
width: 15px;
height: 15px;
border: 2px solid #ffffff;


}

#active{ /*расположение блока с переключателями*/
margin-top: 50px;
text-align: center;
}

#active #A:hover{ /*поведение чекбокса при наведении*/
background: #ffffff;
border-color: #777 !important; /*выполнение в любом случае*/
}

/*цвет активного лейбла при активации чекбокса*/
#switch1:checked ~ #active #A:nth-child(1),
#switch2:checked ~ #active #A:nth-child(2),
#switch3:checked ~ #active #A:nth-child(3){
background: #ffffff;
border-color: #ffffff !important;
}

#slides .image{ /*анимация пролистывания изображений*/
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

#controls #A:hover{ /*прозрачность стрелок при наведении*/
opacity: 0.6;
}

#controls #A{ /*прозрачность стрелок при отводе курсора*/
transition: opacity 0.2s ease-out;
}

article a {
color: #ffffff;
text-decoration: none;
}

article .link {
background: #6e758b;
margin-left: 188.5px;
position: relative;
top: -110px;
}

article .button_text3 {
font-family: Tahoma;
font-size: 16px;
font-weight: bold;
text-align: center;
}


Слайдер номер 2


<div class="allB">
<input checked type="radio" name="respond" id="desktopB">
<article id="sliderB">
<input checked type="radio" name="slider" id="switch11">
<input type="radio" name="slider" id="switch12">
<input type="radio" name="slider" id="switch13">
<input type="radio" name="slider" id="switch14">
<input type="radio" name="slider" id="switch15">
<div id="slidesB">
<div id="overflowB">
<div class="image">
<article><img src="images/1.jpg">
<div class="link">
<div class="button_text3"><a href="#">Описание</a></div>
</div>
</article>
<article><img src="images/2.jpg">
<div class="link">
<div class="button_text3"><a href="#">Описание</a></div>
</div>
</article>
<article><img src="images/3.jpg">
<div class="link">
<div class="button_text3"><a href="#">Описание</a></div>
</div>
</article>

</div>
</div>
</div>
<div id="controlsB">
<label id="B" for="switch11"></label>
<label id="B" for="switch12"></label>
<label id="B" for="switch13"></label>
</div>
<div id="activeB">
<label id="B" for="switch11"></label>
<label id="B" for="switch12"></label>
<label id="B" for="switch13"></label>
</div>
</article>
</div>



#sliderB { /*положение слайдера*/
position: relative;
text-align: center;
top: 40px;
float: left;
width: 520px;

}

#sliderB{ /*центровка слайдера*/
margin: left;

}

#slidesB article{ /*все изображения справа друг от доруга*/
width: 20%;
float: left;
}

#slidesB .image{ /*устанавливает общий размер блока с изображениями*/
width: 500%;
line-height: 0;
}

#overflowB{ /*сркывает все, что находится за пределами этого блока*/
width: 100%;
overflow: hidden;
}

article img{ /*размер изображений слайдера*/
width: 100%;
height: 350px;
}

#desktopB:checked ~ #sliderB{ /*размер всего слайдера*/
max-width: 520px; /*максимальнная длинна*/
}

/*настройка переключения и положения для левой стрелки*/
/*если свич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;
}

#switch12:checked ~ #slidesB .image{
margin-left: -100%;
}

#switch13:checked ~ #slidesB .image{
margin-left: -200%;
}


#controlsB{ /*положение блока всех управляющих элементов*/
margin-top: -235px;
width: 100%;
height: 115px;
}

#activeB #B{ /*стиль отдельного переключателя*/
border-radius: 10px; /*скругление углов*/
display: inline-block; /*расположение в строку*/
width: 15px;
height: 15px;
border: 2px solid #ffffff;


}

#activeB{ /*расположение блока с переключателями*/
margin-top: 50px;
text-align: center;
}

#activeB #B:hover{ /*поведение чекбокса при наведении*/
background: #ffffff;
border-color: #777 !important; /*выполнение в любом случае*/
}

/*цвет активного лейбла при активации чекбокса*/
#switch11:checked ~ #activeB #B:nth-child(1),
#switch12:checked ~ #activeB #B:nth-child(2),
#switch13:checked ~ #activeB #B:nth-child(3){
background: #ffffff;
border-color: #ffffff !important;
}

#slidesB .image{ /*анимация пролистывания изображений*/
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

#controlsB #B:hover{ /*прозрачность стрелок при наведении*/
opacity: 0.6;
}

#controlsB #B{ /*прозрачность стрелок при отводе курсора*/
transition: opacity 0.2s ease-out;
}

article a {
color: #ffffff;
text-decoration: none;
}

article .link {
background: #6e758b;
margin-left: 188.5px;
position: relative;
top: -110px;
}

article .button_text3 {
font-family: Tahoma;
font-size: 16px;
font-weight: bold;
text-align: center;
}
Ответ:
Сообщение от AlexZaw
первое: кнопки исчезают, скорее всего, из-за одинаковых имен инпутов у слайдеров, попробуйте второму задать input name="slider2" например.
второе: шесть одинаковых id у label вас не смущают? id должен быть уникальным для всей страницы, из-за этого тоже могут быть проблемы со слайдером, попробуйте вообще убрать у них id, тем более в css они все-равно выбираются через nth-child

Ты красавчик, спасибо
тоже долго игрался все название поменял кроме инпутов
Вопрос: Два CSS слайдера на одной странице

Всем привет!

Я новичок, учу html и css самостоятельно.

Такая ситуация: есть два CSS слайдера на одной странице, которые работают.
Но есть два дефекта - 1. Стрелки смены слайда (влево-вправо) отображаются только на активном слайдере, на другом же исчезают.
2. При переключении с одного слайдера на другой, ранее активный слайдер сбрасывается до 1 слайда, независимо от того, на каком слайде он был до этого.


Примерно понимаю, где нужно копать, но что-то второй день пазл не сходится.

Прошу Вашей помощи!

Слайдер номер 1

<div class="all">
<input checked type="radio" name="respond" id="desktop">
<article id="slider">
<input checked type="radio" name="slider" id="switch1">
<input type="radio" name="slider" id="switch2">
<input type="radio" name="slider" id="switch3">
<div id="slides">
<div id="overflow">
<div class="image">
<article><img src="images/1.jpg">
<div class="link">
<div class="button_text3"><a href="#">Описание</a></div>
</div>
</article>
<article><img src="images/2.jpg">
<div class="link">
<div class="button_text3"><a href="#">Описание</a></div>
</div>
</article>
<article><img src="images/3.jpg">
<div class="link">
<div class="button_text3"><a href="#">Описание</a></div>
</div>
</article>

</div>
</div>
</div>
<div id="controls">
<label id="A" for="switch1"></label>
<label id="A" for="switch2"></label>
<label id="A" for="switch3"></label>

</div>
<div id="active">
<label id="A" for="switch1"></label>
<label id="A" for="switch2"></label>
<label id="A" for="switch3"></label>

</div>
</article>
</div>



#slider { /*положение слайдера*/
position: relative;
text-align: center;
top: 40px;
float: left;
width: 520px;

}

#slider{ /*центровка слайдера*/
margin: left;

}

#slides article{ /*все изображения справа друг от доруга*/
width: 20%;
float: left;
}

#slides .image{ /*устанавливает общий размер блока с изображениями*/
width: 500%;
line-height: 0;
}

#overflow{ /*сркывает все, что находится за пределами этого блока*/
width: 100%;
overflow: hidden;
}

article img{ /*размер изображений слайдера*/
width: 100%;
height: 350px;
}

#desktop:checked ~ #slider{ /*размер всего слайдера*/
max-width: 520px; /*максимальнная длинна*/
}

/*настройка переключения и положения для левой стрелки*/
/*если свич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;
}

#switch2:checked ~ #slides .image{
margin-left: -100%;
}

#switch3:checked ~ #slides .image{
margin-left: -200%;
}

#controls{ /*положение блока всех управляющих элементов*/
margin-top: -235px;
width: 100%;
height: 115px;
}

#active #A{ /*стиль отдельного переключателя*/
border-radius: 10px; /*скругление углов*/
display: inline-block; /*расположение в строку*/
width: 15px;
height: 15px;
border: 2px solid #ffffff;


}

#active{ /*расположение блока с переключателями*/
margin-top: 50px;
text-align: center;
}

#active #A:hover{ /*поведение чекбокса при наведении*/
background: #ffffff;
border-color: #777 !important; /*выполнение в любом случае*/
}

/*цвет активного лейбла при активации чекбокса*/
#switch1:checked ~ #active #A:nth-child(1),
#switch2:checked ~ #active #A:nth-child(2),
#switch3:checked ~ #active #A:nth-child(3){
background: #ffffff;
border-color: #ffffff !important;
}

#slides .image{ /*анимация пролистывания изображений*/
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

#controls #A:hover{ /*прозрачность стрелок при наведении*/
opacity: 0.6;
}

#controls #A{ /*прозрачность стрелок при отводе курсора*/
transition: opacity 0.2s ease-out;
}

article a {
color: #ffffff;
text-decoration: none;
}

article .link {
background: #6e758b;
margin-left: 188.5px;
position: relative;
top: -110px;
}

article .button_text3 {
font-family: Tahoma;
font-size: 16px;
font-weight: bold;
text-align: center;
}


Слайдер номер 2


<div class="allB">
<input checked type="radio" name="respond" id="desktopB">
<article id="sliderB">
<input checked type="radio" name="slider" id="switch11">
<input type="radio" name="slider" id="switch12">
<input type="radio" name="slider" id="switch13">
<input type="radio" name="slider" id="switch14">
<input type="radio" name="slider" id="switch15">
<div id="slidesB">
<div id="overflowB">
<div class="image">
<article><img src="images/1.jpg">
<div class="link">
<div class="button_text3"><a href="#">Описание</a></div>
</div>
</article>
<article><img src="images/2.jpg">
<div class="link">
<div class="button_text3"><a href="#">Описание</a></div>
</div>
</article>
<article><img src="images/3.jpg">
<div class="link">
<div class="button_text3"><a href="#">Описание</a></div>
</div>
</article>

</div>
</div>
</div>
<div id="controlsB">
<label id="B" for="switch11"></label>
<label id="B" for="switch12"></label>
<label id="B" for="switch13"></label>
</div>
<div id="activeB">
<label id="B" for="switch11"></label>
<label id="B" for="switch12"></label>
<label id="B" for="switch13"></label>
</div>
</article>
</div>



#sliderB { /*положение слайдера*/
position: relative;
text-align: center;
top: 40px;
float: left;
width: 520px;

}

#sliderB{ /*центровка слайдера*/
margin: left;

}

#slidesB article{ /*все изображения справа друг от доруга*/
width: 20%;
float: left;
}

#slidesB .image{ /*устанавливает общий размер блока с изображениями*/
width: 500%;
line-height: 0;
}

#overflowB{ /*сркывает все, что находится за пределами этого блока*/
width: 100%;
overflow: hidden;
}

article img{ /*размер изображений слайдера*/
width: 100%;
height: 350px;
}

#desktopB:checked ~ #sliderB{ /*размер всего слайдера*/
max-width: 520px; /*максимальнная длинна*/
}

/*настройка переключения и положения для левой стрелки*/
/*если свич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;
}

#switch12:checked ~ #slidesB .image{
margin-left: -100%;
}

#switch13:checked ~ #slidesB .image{
margin-left: -200%;
}


#controlsB{ /*положение блока всех управляющих элементов*/
margin-top: -235px;
width: 100%;
height: 115px;
}

#activeB #B{ /*стиль отдельного переключателя*/
border-radius: 10px; /*скругление углов*/
display: inline-block; /*расположение в строку*/
width: 15px;
height: 15px;
border: 2px solid #ffffff;


}

#activeB{ /*расположение блока с переключателями*/
margin-top: 50px;
text-align: center;
}

#activeB #B:hover{ /*поведение чекбокса при наведении*/
background: #ffffff;
border-color: #777 !important; /*выполнение в любом случае*/
}

/*цвет активного лейбла при активации чекбокса*/
#switch11:checked ~ #activeB #B:nth-child(1),
#switch12:checked ~ #activeB #B:nth-child(2),
#switch13:checked ~ #activeB #B:nth-child(3){
background: #ffffff;
border-color: #ffffff !important;
}

#slidesB .image{ /*анимация пролистывания изображений*/
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

#controlsB #B:hover{ /*прозрачность стрелок при наведении*/
opacity: 0.6;
}

#controlsB #B{ /*прозрачность стрелок при отводе курсора*/
transition: opacity 0.2s ease-out;
}

article a {
color: #ffffff;
text-decoration: none;
}

article .link {
background: #6e758b;
margin-left: 188.5px;
position: relative;
top: -110px;
}

article .button_text3 {
font-family: Tahoma;
font-size: 16px;
font-weight: bold;
text-align: center;
}
Ответ:
Что я не так делаю?

<div class="allB">
<input checked type="radio" name="respond" id="desktopB">
<article id="sliderB">
<input checked type="radio" name="slider2" id="switch1">
<input type="radio" name="slider2" id="switch2">
<input type="radio" name="slider2" id="switch3">

<div id="slidesB">
<div id="overflowB">
<div class="image">
<article><img src="images\ua\4.jpg"></article>
<article><img src="images\ua\5.jpg"></article>
<article><img src="images\ua\6.jpg"></article>

</div>
</div>
</div>
<div id="controlsB">
<label id="B" for="switch11"></label>
<label id="B" for="switch12"></label>
<label id="B" for="switch13"></label>

</div>
<div id="activeB">
<label id="B" for="switch11"></label>
<label id="B" for="switch12"></label>
<label id="B" for="switch13"></label>

</div>
</article>
</div>


#sliderB { /*положение слайдера*/
position: relative;
text-align: center;
top: 10px;
}

#sliderB{ /*центровка слайдера*/
margin: 0 auto;
}

#slidesB article{ /*все изображения справа друг от доруга*/
width: 20%;
float: left;
}

#slidesB .image{ /*устанавливает общий размер блока с изображениями*/
width: 500%;
line-height: 0;
}

#overflowB{ /*сркывает все, что находится за пределами этого блока*/
width: 100%;
overflow: hidden;
}

article img{ /*размер изображений слайдера*/
width: 100%;
}

#desktopB:checked ~ #sliderB{ /*размер всего слайдера*/
max-width: 960px; /*максимальнная длинна*/
}

/*настройка переключения и положения для левой стрелки*/
/*если свич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;
}

.allB input{ /*скрывает стандартные инпуты (чекбоксы) на странице*/
display: none;
}

/*позиция изображения при активации переключателя*/
#switch11:checked ~ #slidesB .image{
margin-left: 0;
}

#switch12:checked ~ #slidesB .image{
margin-left: -100%;
}

#switch13:checked ~ #slidesB .image{
margin-left: -200%;
}


#controlsB{ /*положение блока всех управляющих элементов*/
margin: -25% 0 0 0;
width: 70%;
height: 1px;
}

#activeB #B{ /*стиль отдельного переключателя*/
border-radius: 10px; /*скругление углов*/
display: inline-block; /*расположение в строку*/
width: 15px;
height: 15px;
background: #bbb;
}

#activeB{ /*расположение блока с переключателями*/
margin: 23% 0 0;
text-align: center;
}

#activeB #B:hover{ /*поведение чекбокса при наведении*/
background: #76c8ff;
border-color: #777 !important; /*выполнение в любом случае*/
}

/*цвет активного лейбла при активации чекбокса*/
#switch11:checked ~ #activeB #B:nth-child(1),
#switch12:checked ~ #activeB #B:nth-child(2),
#switch13:checked ~ #activeB #B:nth-child(3){
background: #18a3dd;
border-color: #18a3dd !important;
}

#slidesB .image{ /*анимация пролистывания изображений*/
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

#controlsB #B:hover{ /*прозрачность стрелок при наведении*/
opacity: 0.6;
}

#controlsB #B{ /*прозрачность стрелок при отводе курсора*/
transition: opacity 0.2s ease-out;
}
Вопрос: Слайдер в модальном окне

Добрый день!
Подскажите как реализовать слайдер в слайдере. Внешний слайдер всплывающий типа Lightbox popup открывается при нажатии на img, но содержит не увеличенную картинку а слайдер with vertical thumbnails, который листает img относящиеся к нажатой. Вообщем реализовать как здесь .
Ответ:
Сообщение от Artemskih
И еще вопрос: у меня на странице предполагается возможность вызова слайдера в модальном окне 6 раз с разным набором изображений. Получается 6 раз повторяется html код с разными изображениями и запуск слайдера 6 раз прописывать или как это грамотно структурировать?
Я делал так:
У меня была одна разметка для модального окна, каждый слайдер у меня был в отдельном html файле. При запуске определенного слайдера в модальном окне подгружался файл с этим слайдером через .load() и перезагружался сам скрипт слайдера.
Конечно же, можно было сделать динамичнее, через подгрузку одного php файла. Но мне мой вариант подходил больше, так как слайдеров было немного (3 по моему) и сайт модерировал я сам, то есть мне обязателен был юзерский интерфейс.
Вопрос: Можно ли сделать ссылку на конкретную страницу слайдера?

Ребят, клиент .... (найдет синоним слова) *просит слайдер что бы можно было давать ссылку на картинку, оставаясь в слайдере.



Выложил демку слайдера. Можно ли вытащить ссылку на конкретную картинку? Или есть ли такой слайдер:

15 фото, автопрокрутка + ручное передвижение + возможность давать ссылки на конкретную картинку слайдера.

CSS слайдеры понятнее - но на 15 фото я поседею его переписывать.
Ответ: boilzzz, Задумка заказчика в том что бы он скажем имея слайдер на 15 фото мог клиенту давать ссылку на конкретное фото - при этом не отключая функцию слайдера.
Вот сижу ломаю голову - как из слайдера достать ссылку на конкретное фото оставаясь в слайдере.

Я в скриптах мягко говоря дерево.
Вопрос: 2 и более слайдера на одной странице

Добрый день!
Очень нужна помощь. Ситуация в следующем. Есть код слайдера:
<div class="slider">	
<input type="radio" name="slide_switch" id="id7" checked="checked">
<label for="id7">
<img src="assets/images/planirovka/project_2/1.jpg" width="100" >
</label>
<img src="assets/images/planirovka/project_2/1.jpg" ><input type="radio" name="slide_switch" id="id8" >
<label for="id8">
<img src="assets/images/planirovka/project_2/2.jpg" width="100" >
</label>
<img src="assets/images/planirovka/project_2/2.jpg" ><input type="radio" name="slide_switch" id="id9" >
<label for="id9">
<img src="assets/images/planirovka/project_2/3.jpg" width="100" >
</label>
<img src="assets/images/planirovka/project_2/3.jpg" ><input type="radio" name="slide_switch" id="id10" >
<label for="id10">
<img src="assets/images/planirovka/project_2/4.jpg" width="100" >
</label>
<img src="assets/images/planirovka/project_2/4.jpg" ><input type="radio" name="slide_switch" id="id11" >
<label for="id11">
<img src="assets/images/planirovka/project_2/5.jpg" width="100" >
</label>
<img src="assets/images/planirovka/project_2/5.jpg" ><input type="radio" name="slide_switch" id="id12" >
<label for="id12">
<img src="assets/images/planirovka/project_2/6.jpg" width="100" >
</label>
<img src="assets/images/planirovka/project_2/6.jpg" >
</div>


Код CSS:
.slider {
width:800px;
position: relative; /* Вместо высоты(height) мы используем отступ */
padding-top:520px; /* Этот отступ помогает правильно расположить миниатюры*/
margin:100px auto; /* Добавим тени, можно убрать */
box-shadow:0 10px 20px -5px rgba(0,0,0,0.75);
margin-bottom:50px;
margin-top:50px;
height:630px;
}

.slider > img{
position: absolute;
left:0; top:0;
transition: all 0.5s;
}
.slider input[name='slide_switch'] {
display: none;
}
.slider label {
/*Отступы миниатюр*/
margin:18px 0 0 18px;
border:3px solid #999;
float: left;
cursor: pointer;
transition: all 0.5s;
/* Прозрачность = low opacity */
opacity:0.6;
}
.slider label img {
display: block;
}

/* Эффекты реагирования на клик мышкой по миниатюре */
.slider input[name='slide_switch']:checked+label {
border-color:#666;
opacity:1;
}/* Теперь клик по любой из миниатюр убирает его прозрачность */
/* Работа над самими изображениями */
.slider input[name='slide_switch']~ img {
opacity:0;
transform: scale(1.1);
}
.slider input[name='slide_switch']:checked+label+img {
opacity:1;
transform: scale(1);
}


И JS, который берется отсюда: <script src="http://thecodeplayer.com/uploads/js/prefixfree.js"type="text/javascript"></script>

Задача на странице должны выводить несколько слайдеров.

Проблема если выводить несколько слайдеров, то первое изображение будет активно только у одного из слайдера. Чтобы заработал другой слайдер, нужно по нему кликнуть мышью.

Вопрос Как сделать несколько АКТИВНЫЙ слайдеров?
Ответ:
Теоретически, можно разобраться в коде, и запустить его вручную, но я бы просто взял код другого слайдера.
Вопрос: Вертикальный слайдер bxSlider повторение прокрутки

Имеется вертикальный слайдер bxSlider(), количество слайдов допустим 7. При авто-прокрутке вверх нижние слайды соответственно уходят вверх цепочкой, и пока последний слайд не дойдёт к вверху, внизу не остаётся слайдов.
Как сделать непрерывный слайдинг?
За ранее благодарю!
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
<div>
                <ul class="bxslider">
                    <li><img src="images/slide1.jpg" alt="slide1"/></li>
                    <li><img src="images/slide2.jpg" alt="slide2"/></li>
                    <li><img src="images/slide3.jpg" alt="slide3"/></li>
                    <li><img src="images/slide4.jpg" alt="slide4"/></li>
                    <li><img src="images/slide5.jpg" alt="slide5"/></li>
                    <li><img src="images/slide6.jpg" alt="slide6"/></li>
                    <li><img src="images/slide7.jpg" alt="slide7"/></li>
                </ul>
            </div>
Код Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){
    $(".bxslider").bxSlider({
        auto: true,
        mode: 'vertical',
        minSlides: 1,
        maxSlides: 7,
        //ticker: true,
        //speed: 6000
        //autoControls: true,
        //controls: false,
        //slideWidth: 158
    });
});
Добавлено через 18 минут
Код CSS
1
2
3
.bx-viewport {
    height: auto !important;
}
без этого свойства css виден только 1 слайд
Ответ: Всё-таки хочется разобраться в этом слайдере.
Подскажите пожалуйста, как сделать вертикальную прокрутку, чтобы за последним слайдером шёл 1-й слайдер?
Уже перепробовал все настройки, не хочет начинать прокрутку повторно. А повторная прокрутка начинается только тогда, когда последний слайдер дойдёт к верху.
Подскажите пожалуйста, очень хочется понять как это делается

Добавлено через 2 часа 35 минут
Кто что посоветует с вертикальным слайдером?
Вопрос: Наложение блока поверх слайдера

Ситуация такова. Нужно наложить блок (картинка) на нижнюю часть слайдера. Внизу этого наложенного блока пойдет блок див с background-image. Решаю так, накладываемому блоку на слайдер даю позицию абсолют и потом top задаю нужное расстояние от верха. Все бы было хорошо, но при изменение размера экрана этот блок плывет, вернее не он сам а изменяются размеры слайдера (он адаптивный, подстраивается под размер и соответственно увеличивается либо уменьшается высота).



Есть ли какое либо решение с помощью css или без jquery не обойтись - лезть в скрипт слайдера,искать переменную, отвечающую за высоту и уже относительно ее задавать динамически позицию накладываемого блока?
Ответ: Jquery не причём. Слайдер адаптирует CSS стили. Выглядит это следующим образом
CSS
1
2
3
@media (min-width:767px) { .slider_block {height: 200px;}}
@media (max-width:767px) { .slider_block {height: 300px;}}
@media (max-width:1200px) { .slider_block {height: 400px;}}
Таким же образом опишите в CSS Ваш Top.
Для того чтобы узнать точные цифры, при которых слайдер меняет высоту можно просто посжимая браузер гугл хром в режиме просмотра кода.
Вопрос: Выравнивание текста внутри слайдера

Помогите, никак не могу найти файлы слайдера с помощью которых можно было бы выровнить текст слайдера!
Ответ:
Сообщение от Тест
Помогите, никак не могу найти файлы слайдера с помощью которых можно было бы выровнять текст слайдера!
Собственно, правила для слайдера прописаны внутренним стилем и искать их нужно в файле где находится сам слайдер, вероятнее всего в файле index.html или index.php, как вариант... Если посчастиливится их найти попробуйте добавить такой вариант:
CSS
1
2
3
4
5
span{
display:block;
width:100%; 
text-align:center
}
Вопрос: Слайдер на jQ

Добрый день. В JS я вообще мало что понимаю. Но хочу сделать слайдер, точнее код слайдера я уже нашел, он листается и все круто. Но хочу сделать кнопки под слайдером, при нажатие на которые будет листаться на определенный слайд. Т.е. не когда идет next и prev, а когда под слайдом Точки по ним кликаешь и переходишь на соответстующий позиции Точки слайд.

Вот код слайдера
Кликните здесь для просмотра всего текста
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
var slideWidth=960; /*Ширина слайда*/
var sliderTimer;
var slideSpeed=3500; /*Время смены слайда в мс*/
$(function(){
$('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth);
    sliderTimer=setInterval(nextSlide,slideSpeed);
    $('.fides_viewport').hover(function(){
        clearInterval(sliderTimer);
    },function(){
        sliderTimer=setInterval(nextSlide,slideSpeed);
    });
    $('#next_slide').click(function(){
        clearInterval(sliderTimer);
        nextSlide();
        sliderTimer=setInterval(nextSlide,slideSpeed);
    });
    $('#prev_slide').click(function(){
        clearInterval(sliderTimer);
        prevSlide();
        sliderTimer=setInterval(nextSlide,slideSpeed);
    });
});
 
function nextSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide++;
    if(currentSlide>=$('.slidewrapper').children().size())
    {
        $('.slidewrapper').css('left',-(currentSlide-2)*slideWidth);  
        $('.slidewrapper').append($('.slidewrapper').children().first().clone()); 
        $('.slidewrapper').children().first().remove();
        currentSlide--;                        
    }
        $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);    
}
 
function prevSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide--;
    if(currentSlide<0)
    {
        $('.slidewrapper').css('left',-(currentSlide+2)*slideWidth);  
        $('.slidewrapper').prepend($('.slidewrapper').children().last().clone()); 
        $('.slidewrapper').children().last().remove();
        currentSlide++;   
    }
    $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);
}


Код HTML слайдера
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    <div class="viewport">
        <ul class="slidewrapper" data-current=0>
            <li class="slide first">
                <div class="img_slide_first"></div>
                                <div class="slide_text"><p><h3>Качественный и удобный сайт</h3></p><br>
                                <p>Перед тем как раскручивать проект, мы анализируем его на поведенческие факторы.</p>
                                <p>Если он не интересен посетителям и процент отказа высокий, мы улучшаем, благодаря нашему отделу разработки. В большинстве случаев меняется структура и дизайн.</p></div>
            </li>
            <li class="slide second">
                                <div class="img_slide_second"></div>
                                <div class="slide_text"><p><h3>Качественный и удобный сайт</h3></p><br>
                                <p>Перед тем как раскручивать проект, мы анализируем его на поведенческие факторы.</p>
                                <p>Если он не интересен посетителям и процент отказа высокий, мы улучшаем, благодаря нашему отделу разработки. В большинстве случаев меняется структура и дизайн.</p></div>
            </li>
            <li class="slide third">
                <div class="img_slide_third"></div>
                                <div class="slide_text"><p><h3>Качественный и удобный сайт</h3></p><br>
                                <p>Перед тем как раскручивать проект, мы анализируем его на поведенческие факторы.</p>
                                <p>Если он не интересен посетителям и процент отказа высокий, мы улучшаем, благодаря нашему отделу разработки. В большинстве случаев меняется структура и дизайн.</p></div>
            </li>
        </ul>
    </div>
    <div class="marker">
      <div class="marker_nav">
        <a href="javascript: void(0)" class="changeSlide dot"></a> <a href="javascript: void(0)" class="changeSlide dot"></a> <a href="javascript: void(0)" class="changeSlide dot"></a>
      </div>
    </div>


changeSlide только название для функции в будущем.
Ответ:
Сообщение от Don1172005
хочу сделать кнопки под слайдером, при нажатие на которые будет листаться на определенный слайд
Ну предложу такую идею реализации
У кнопок задаешь data-slide="1" и т.д., при клике получаешь этот атрибут, и потом с помощью eq() находишь слайд по индексу и отображаешь, ну что-то типо
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="slider">
  <div class="slide" style="background:green;"></div>
  <div class="slide" style="background:yellow;"></div>
  <div class="slide" style="background:blue;"></div>
</div>
 
 
<ul class="link">
  <li data-slide="0"></li>
  <li data-slide="1"></li>
  <li data-slide="2"></li>
</ul>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.slide {
  width:100px;
  height:200px;
  display:none; 
}
.link li {
  float:left;
  list-style:none;
  width:20px;
  height:20px;
  background:#232323;
  margin:10px;
}
Javascript
1
2
3
4
5
6
7
8
9
$(document).ready(function(){
$(".slider .slide").eq(0).show("normal");
    $(".link li").click(function(){
    $(".slider .slide").hide("normal");
    var el = $(this);
    var d = el.data("slide");    
    $(".slider .slide").eq(d).show("normal");
  });
});
Добавлено через 43 минуты
Ну и если по вашему примеру, то
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function switchSlide(){
    var el = $(this);
    currentSlide = el.data("slide");;
    if(currentSlide==$('.slidewrapper').children().size())
    {
        $('.slidewrapper').css('left',-(currentSlide-2)*slideWidth);  
        $('.slidewrapper').append($('.slidewrapper').children().first().clone()); 
        $('.slidewrapper').children().first().remove();
        currentSlide--;                        
    }
        $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);    
}
$(".marker_nav a").click(function(){
        clearInterval(sliderTimer);
        switchSlide();
        sliderTimer=setInterval(nextSlide,slideSpeed);
});
Надеюсь будет работать Только для этих "кнопок" задайте data-slide, начиная с 0.
Вопрос: Зацикливание слайдера

Допустим есть слайдер, созданный лично, не плагин готовый.
Меня интересует, какой алгоритм нужно применить, чтобы зациклить слайдер? Т.е. чтобы при достижении последнего слайда, слайдер начинался сначала. Слайдер горизонтальный.
Подскажите пожалуйста хотя-бы на словах, как можно это реализовать?

Добавлено через 2 минуты
Наверно нужно делать копии слайдов?

Добавлено через 17 часов 20 минут
у кого какие идеи?
Ответ: ну тут зависит все от того как именно ты пишешь работу слайдера, вот ссылка на урок где пишут простой адаптивный слайдер который легко расширить под твои нужды без добавления и удаления элементов