@qJelly

Неправильно работает слайдер, что делать?

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

Сделай на каждый слайдер свое обращение

Что то типа такого

const myslideFirst = document.querySelectorAll('.myslide'),
dotFirst = document.querySelectorAll('.dot1);

const myslideSecond = document.querySelectorAll('.Уникальный класс второго слайдера'),
dotSecond = document.querySelectorAll('.dot2');
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы