Добрый день! Суть вопроса такова: если создать два или больше слайдера, то начнутся проблемы, к примеру: слайд из второго слайдера переносится на первый или только с помощью второго слайдера можно управлять первым.
Ниже прикрепил код.(Второе окно - 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";
}
Простой
