Есть такой слайдер.
Если коротко, работает он так, всем слайдам задаётся position: absolute, тем самым складываем их в одну стопку, и задаём opacity: 0; , делая их прозрачными(невидимыми). Далее задаю правило input[type="radio"]:checked + img{opacity: 1;}, тоесть, когда input выделен, стоящий за ним img становиться видимым. Input активируем нажатием на label , связаный с ним через id.
Так же есть две кнопки, вперёд и назад, для них я прописал js, в котором меняют значение checked у inputю
Но мне нужна рамка для выделеного label, прописал тоже через js, и теперь когда нажимаем на label иму присваивается класс border и одновременно удаляет этот класс у других label.
Через перебор кнопками тоже добавляеться класс border, ниже представлен код js.
И здесь появилась проблема, так как присвоение class="border" я выполняю двумя разными способами, когда я нажимаю на третий label, и тем самым выделяю его, а потом жму на кнопку вперёд, у меня появляется два элемента с классом border.
Извините, если уже успел заморочить голову)
Я хочу определить какой из input checked и задать элементу label, который связан с ним по id класс.
Такое возможно?
его Html:
<div class="slider_wrap">
<div class="slider_control">
<div class="prev"> </div>
<label for="sld1" class="border"></label>
<label for="sld2" ></label>
<label for="sld3"></label>
<label for="sld4"></label>
<div class="next"> </div>
</div> <!-- slider_control -->
<div class="fotos">
<input type="radio" name="slider" id="sld1" class="input" checked>
<img src="images/slide1.jpg" alt="foto" >
<input type="radio" name="slider" id="sld2" class="input">
<img src="images/1300696623_zara-colordresses_2011.jpg" alt="foto">
<input type="radio" name="slider" id="sld3" class="input">
<img src="images/41604028.36c0xb1atp.png" alt="foto">
<input type="radio" name="slider" id="sld4" class="input">
<img src="images/platje-v-goroshek-05.jpg" alt="foto">
</div> <!-- foto -->
</div> <!-- slider_wrap -->
его css:
.slider_wrap{
width: 47%;
max-width: 511px;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.fotos{
width: 78%;
padding-bottom: 125%;
position: relative;
margin-left: auto;
input[type="radio"]{
display: none;
}
input[type="radio"]:checked + img{
opacity: 1;
}
}
.fotos img{
position: absolute;
top: 0;
left: 0;
opacity:0;
transition: opacity 1.25s;
}
.slider_control {
width: 14.3%;
label{
display: block;
width: 73px;
height: 98px;
background-size: cover;
background-repeat: no-repeat;
&:first-of-type{
background-image: url(../images/1.jpg);
}
&:nth-of-type(2){
background-image: url(../images/2.jpg);
}
&:nth-of-type(3){
background-image: url(../images/3.jpg);
}
&:last-of-type{
background-image: url(../images/4.jpg);
}
} /* label */
}
.border{
outline: 2px solid @orange;
}
.prev{
.arrow(5%, 49%, 2%, 17%, 45deg);
margin: 0 auto 15px;
}
.next{
.arrow(5%, 49%, 10%, 17%, -135deg);
margin: 15px auto 0;
}
Но мне необходимы ещё кнопки вперёд и назад,
здесь уже действовал через javascript
:
var btn_prev = document.querySelector('.slider_wrap .slider_control .prev');
var btn_next = document.querySelector('.slider_wrap .slider_control .next');
var i = 0;
btn_prev.onclick = function(){
input[i].checked = ' '; // убираем checked у предыдущего
i--;
if(i < 0){
i = input.length - 1;
} // условие, чтобы слайды шли по кругу
input[i].checked = true; //ставим checked следующему
}
btn_next.onclick = function(){
input[i].checked = ' '; // убираем checked у предыдущего
i++;
if(i >= input.length){
i = 0;
} // условие, чтобы слайды шли по кругу
input[i].checked = true; //ставим checked следующему
}
И здесь всё работает. Но, для полного счастья, мне необходимо добавить рамку активному элементу Label. Я прописал стиль .border и сделал следующим образом:
var labels = document.querySelectorAll('.slider_control label');
// выбираем все label
function activeBorder() {
for(var i = 0; i < labels.length; i++){
labels[i].classList.remove('border');
} // удаляю стиль .border установленый до этого
this.classList.toggle('border'); // присваиваю элементу по которому нажали
}
// далее запускаю функцию
for(var j = 0; j < labels.length; j++){
labels[j].onclick = activeBorder;
}
Но вот как сделать добавление рамок при переборе слайдов кнопками вперёд и назад???
Я переделал немножко script переключения слайдов кнопкой и теперь он выглядит так:
btn_prev.onclick = function(){
input[i].checked = ' '; // убираем checked у предыдущего
labels[i].classList.remove('border'); // убираем border у предыдущего
i--;
if(i < 0){
i = input.length - 1;
}// условие, чтобы слайды шли по кругу
input[i].checked = true; //ставим checked следующему
labels[i].classList.add('border'); //ставим border следующему
}
