Answer the question
In order to leave comments, you need to log in
The slider does not work correctly, what should I do?
Good afternoon! The essence of the question is this: if you create two or more sliders, then problems will begin, for example: a slide from the second slider is transferred to the first one, or only with the help of the second slider you can control the first one.
I attached the code below. (Second window - SCSS)
<div class="slider">
<!-- fade css -->
<div class="myslide fade">
<div class="txt">
<p>Our playful puppies1</p>
</div>
<a href="https://youtube.com"><img src="img/fst-page/player.png" alt="" class="video-player"></a>
<img src="https://dogs4you.ru/wp-content/uploads/2020/05/rabbit-dachshund-4.jpg" style="width: 100%;">
</div>
<div class="myslide fade">
<div class="txt">
<p>Our playful puppies2</p>
</div>
<a href="https://youtube.com"><img src="img/fst-page/player.png" alt="" class="video-player"></a>
<img src="https://dogs4you.ru/wp-content/uploads/2020/05/rabbit-dachshund-4.jpg" style="width: 100%;">
</div>
<div class="myslide fade">
<div class="txt">
<p>Our playful puppies3</p>
</div>
<a href="https://youtube.com"><img src="img/fst-page/player.png" alt="" class="video-player"></a>
<img src="https://dogs4you.ru/wp-content/uploads/2020/05/rabbit-dachshund-4.jpg" style="width: 100%;">
</div>
<div class="myslide fade">
<div class="txt">
<p>Our playful puppies4</p>
</div>
<a href="https://youtube.com"><img src="img/fst-page/player.png" alt="" class="video-player"></a>
<img src="https://dogs4you.ru/wp-content/uploads/2020/05/rabbit-dachshund-4.jpg" style="width: 100%;">
</div>
<div class="myslide fade">
<div class="txt">
<p>Our playful puppies5</p>
</div>
<a href="https://youtube.com"><img src="img/fst-page/player.png" alt="" class="video-player"></a>
<img src="img/fst-page/doberman-bg.png" style="width: 100%;">
</div>
<!-- /fade css -->
<!-- onclick js -->
<a class="prev" onclick="plusSlides(-1)"><img src="img/fst-page/purple-arrow(left).png" alt=""></a>
<a class="next" onclick="plusSlides(1)"><img src="img/fst-page/purple-arrow(right).png" alt=""></a>
<!-- /onclick js -->
</div>
.page:nth-child(2) {
width: 100%;
padding: 0;
display: flex;
justify-content: center;
align-items: flex-end;
.slider{
position: relative;
width: 100%;
background: #2c3e50;
/* darckblue */
outline: hidden;
}
.myslide{
width: 100%;
display: none;
overflow: hidden;
}
.prev,
.next {
position: absolute;
top: 50%;
transform: translate(0, -50%);
font-size: 50px;
cursor: pointer;
color: #fff;
transition: 0.1s;
user-select: none;
padding: 10% 0;
img {
width: 90px;
overflow: hidden;
}
}
.prev:hover,
.next:hover {
color: #00a7ff;
/* blue */
}
.next {
right: 3%;
}
.prev {
left: 3%;
}
.dotsbox {
position: absolute;
left: 50%;
transform: translate(-50%);
bottom: 20px;
cursor: pointer;
}
.dot {
display: inline-block;
width: 15px;
height: 15px;
border: 3px solid #fff;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
/* /2 */
/* javascript */
.active,
.dot:hover {
border-color: #00a7ff;
/* blue */
}
/* /javascript */
/* muslide add fade */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
/* /muslide add fade */
/* 3 */
.txt {
position: absolute;
color: #fff;
letter-spacing: 2px;
line-height: 35px;
top: 90%;
-webkit-animation-name: posi;
-webkit-animation-duration: 2s;
animation-name: posi;
animation-duration: 2s;
z-index: 1;
justify-content: center;
display: flex;
width: 100%;
p {
margin: 0;
}
}
.txt p {
@include adaptive-font(20, 12.5);
font-weight: bold;
}
/* /3 */
/* 4 */
img {
transform: scale(1.5, 1.5);
-webkit-animation-name: zoomin;
-webkit-animation-duration: 40s;
animation-name: zoomin;
animation-duration: 40s;
}
/* /4 */
/* 5 */
.video-player {
@include adaptive-width(125, 50);
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
}
p {
@include adaptive-font(48, 15);
font-weight: 500;
color: #360188;
margin: 0;
margin-bottom: 7.5%;
}
}
const myslide = document.querySelectorAll('.myslide'),
dot = document.querySelectorAll('.dot');
let counter = 1;
slidefun(counter);
function autoSlide() {
counter += 1;
slidefun(counter);
}
function plusSlides(n) {
counter += n;
slidefun(counter);
resetTimer();
}
function currentSlide(n) {
counter = n;
slidefun(counter);
resetTimer();
}
function slidefun(n) {
let i;
for(i = 0;i<myslide.length;i++){
myslide[i].style.display = "none";
}
for(i = 0;i<dot.length;i++) {
dot[i].className = dot[i].className.replace(' active', '');
}
if(n > myslide.length){
counter = 1;
}
if(n < 1){
counter = myslide.length;
}
myslide[counter - 1].style.display = "block";
dot[counter - 1].className += " active";
}
Answer the question
In order to leave comments, you need to log in
Look where in JS the call to the slider is set.
Most likely the names of your sliders are the same - that's why it appeals to everyone at once.
Make your own appeal for each slider
Something like this
const myslideFirst = document.querySelectorAll('.myslide'),
dotFirst = document.querySelectorAll('.dot1);
const myslideSecond = document.querySelectorAll('.Second slider unique class'),
dotSecond = document.querySelectorAll('.dot2');
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question