Есть два скрипта для слайд шоу, по отдельности работают. А вместе, на одном сайте, нет

artemleon · 9 травня 2021

Добрый день! Срочно нужна Ваша помощь. Есть два скрипта для слайд шоу, по отдельности работают. А вместе, на одном сайте, нет. Опытным путем выяснил что все дело вот в этой строчке: "var slides = document.getElementsByClassName("mySlidess");". Помогите найти решение, а то в скриптах я не очень. Спасибо.

Скрипт 1:

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

Скрипт 2:

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

artemleon · 9 травня 2021

Да, я вижу что они почти идентичные. Но как сделать чтоб они "подружились" я не знаю. Вот и прошу помощи.

artemleon · 9 травня 2021

Делаю себе сайт, своими силами. Со скриптами есть проблемка, знаний нехватает.

artemleon · 9 травня 2021

И помощь мне нужна, чтоб пояснили что и как и почему, чтоб я смог пользоватся этим инструментом в дальнейшем. Помощь из разряда заплати и мы тебе сделаем ненужна. Спасибо

Змінено 9 травня 2021 користувачем artemleon

spectre · 9 травня 2021

1 час назад, artemleon сказал:

Срочно нужна Ваша помощь

6 минут назад, artemleon сказал:

Помощь из разряда заплати и мы тебе сделаем ненужна. Спасибо

вам не кажется что это взаимоисключающие вещи?

artemleon · 9 травня 2021

Мне действительно надо разобратся с этими скриптами, самому не получается, и обратился я на данный форум с надеждой что найдется человек который подскажет почему они не работают вместе и что надо прописать в данных сктиптах чтоб они не конфликтовали друг с другом. О методе document.getElementsByClassName знаю что он возвращает обьект содежащий в себе дочерние элементы.

fanatic · 10 травня 2021

17 часов назад, artemleon сказал:

почему они не работают вместе

потому что

18 часов назад, nikifalex сказал:

скрипты практически идентичные

17 часов назад, artemleon сказал:

что надо прописать в данных сктиптах чтоб они не конфликтовали друг с другом.

работать с одним из скриптов

artemleon · 10 травня 2021

я тож так думал, и когда меняю переменные в одном из скриптов, например место этого

var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");

прописываю

var slides = document.getElementsByClassName("mySlidess");
var dots = document.getElementsByClassName("demo1");
var captionText = document.getElementById("caption1");

все одно неработает.

p.s. И в html и css я им тож имена поменял

Змінено 10 травня 2021 користувачем artemleon

spectre · 10 травня 2021

https://learn.javascript.ru/

fanatic · 10 травня 2021

покажите html, c которым должны работать эти скрипты.

artemleon · 10 травня 2021

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlidess {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* The dots/bullets/indicators */
.dott {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active, .dot:hover {
background-color: #717171;
}

/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}

@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body>

<div class="mySlidess fade">
<div class="numbertext">1 / 3</div>
<img src="img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>

<div class="mySlidess fade">
<div class="numbertext">2 / 3</div>
<img src="img_snow_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>

<div class="mySlidess fade">
<div class="numbertext">3 / 3</div>
<img src="img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>

</div>
<br>

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

</body>
</html>

artemleon · 10 травня 2021

<dir class=" hidden-sm hidden-md hidden-xs wow fadeInDown" style="margin-left: 425px;color: #eeeeee; display: flex;position: absolute;"><h1>Аппаратные кошельки <br>для криптовалют</h1></dir>
<dir class=" hidden-lg wow fadeInDown" style="margin-left: 37%;color: #eeeeee; display: flex;position: absolute; margin-top: 0;"><h1 style="font-size: 30px;">Аппаратные кошельки <br>для криптовалют</h1></dir>

<div class="mySlides wow fadeInUp">
<div class="col-lg-5 col-md-5 col-sm-5 hidden-xs" style="padding-left: 0;"><img src="image/catalog/slider_banner_1/slider_1.png" style="width:100%"></div>
<div class="col-lg-7 col-md-7 col-sm-7 hidden-xs" style="padding-top: 12%;"><div class="product-slider__price hidden-md hidden-sm">Trezor T - новая модель Trezor с большим сенсорным экраном!</div><div class="product-slider__price_sm_md hidden-lg">Trezor T - новая модель Trezor с большим сенсорным экраном!</div>
<dir style="padding: 0;"><a class="btn btn-outlineh js-order-link" href="#yak1">Купить<span class="bott_span"><i class="icon-arrow-right" style="display: flex;align-items: center;justify-content: center;font-weight: 600;color: #1f618ac7;margin-left: 15px;"></i></span></a></dir>
</div>
</div>

<div class="mySlides wow fadeInUp">
<div class="col-lg-5 col-md-5 col-sm-5 hidden-xs" style="padding-left: 0;"><img src="image/catalog/slider_banner_1/slider_2.png" style="width:100%"></div>
<div class="col-lg-7 col-md-7 col-sm-7 hidden-xs" style="padding-top: 12%;"><div class="product-slider__price">Ledger Nano X - модель 2019 года, работающая с ПК и смартфонами!</div><div class="product-slider__price_sm_md hidden-lg">Ledger Nano X - модель 2019 года, работающая с ПК и смартфонами!</div>
<dir style="padding: 0;"><a class="btn btn-outlineh js-order-link" href="#yak1">Купить<span class="bott_span"><i class="icon-arrow-right" style="display: flex;align-items: center;justify-content: center;font-weight: 600;color: #1f618ac7;margin-left: 15px;"></i></span></a></dir>
</div>
</div>

<div class="mySlides wow fadeInUp">
<div class="col-lg-5 col-md-5 col-sm-5 hidden-xs" style="padding-left: 0;"><img src="image/catalog/slider_banner_1/slider_3.png" style="width:100%"></div>
<div class="col-lg-7 col-md-7 col-sm-7 hidden-xs" style="padding-top: 12%;"><div class="product-slider__price">BitBox02 - новинка 2019 года с сенсорным экраном и Type-C входом!</div><div class="product-slider__price_sm_md hidden-lg">BitBox02 - новинка 2019 года с сенсорным экраном и Type-C входом!</div>
<dir style="padding: 0;"><a class="btn btn-outlineh js-order-link" href="#yak1">Купить<span class="bott_span"><i class="icon-arrow-right" style="display: flex;align-items: center;justify-content: center;font-weight: 600;color: #1f618ac7;margin-left: 15px;"></i></span></a></dir>
</div>
</div>

<div class="mySlides wow fadeInUp">
<div class="col-lg-5 col-md-5 col-sm-5 hidden-xs" style="padding-left: 0;"><img src="image/catalog/slider_banner_1/slider_4.png" style="width:100%"></div>
<div class="col-lg-7 col-md-7 col-sm-7 hidden-xs" style="padding-top: 12%;"><div class="product-slider__price">CoolWallet S - компактный кошелек в виде кредитной карточки!</div><div class="product-slider__price_sm_md hidden-lg">CoolWallet S - компактный кошелек в виде кредитной карточки!</div>
<dir style="padding: 0;"><a class="btn btn-outlineh js-order-link" href="#yak1">Купить<span class="bott_span"><i class="icon-arrow-right" style="display: flex;align-items: center;justify-content: center;font-weight: 600;color: #1f618ac7;margin-left: 15px;"></i></span></a></dir>
</div>
</div>

</div>
</div>

<div class="col-md-3 col-sm-3"> <noscript><img src="image/catalog/slider_banner_1/block1_icon1-1.svg" alt="иллюстрация официальный ресселер" /></noscript><img class=" lazyloaded" src="image/catalog/slider_banner_1/block1_icon1-1.svg" data-src="image/catalog/slider_banner_1/block1_icon1-1.svg" alt="иллюстрация официальный ресселер" style="float: left;width: 50px;"><p>Официальный<br> реселлер</p></div>
<div class="col-md-3 col-sm-3"> <noscript><img src="image/catalog/slider_banner_1/block1_icon4-1.svg" alt="иллюстрация бесплатная поддержка" /></noscript><img class=" lazyloaded" src="image/catalog/slider_banner_1/block1_icon4-1.svg" data-src="image/catalog/slider_banner_1/block1_icon4-1.svg" alt="иллюстрация бесплатная поддержка" style="float: left;width: 50px;"><p>Гарантия 1 год<br> на устройства</p></div>
<div class="col-md-3 col-sm-3"> <noscript><img src="image/catalog/slider_banner_1/block1_icon2-1.svg" alt="иллюстрация тест-драйв в офисе" /></noscript><img class=" lazyloaded" src="image/catalog/slider_banner_1/block1_icon2-1.svg" data-src="image/catalog/slider_banner_1/block1_icon2-1.svg" alt="иллюстрация тест-драйв в офисе" style="float: left;width: 50px;"><p>Тест-драйв<br> в офисе</p></div>
<div class="col-md-3 col-sm-3"> <noscript><img src="image/catalog/slider_banner_1/block1_icon3-1.svg" alt="иллюстрация обучение блокчейну" /></noscript><img class=" lazyloaded" src="image/catalog/slider_banner_1/block1_icon3-1.svg" data-src="image/catalog/slider_banner_1/block1_icon3-1.svg" alt="иллюстрация обучение блокчейну" style="float: left;width: 50px;"><p>Обучаем<br> блокчейну</p></div>

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

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

artemleon · 10 травня 2021

1 час назад, fanatic сказал:

покажите html, c которым должны работать эти скрипты.

скрипты побросал

fanatic · 10 травня 2021

как вариант, поместить каждый слайдер в конейнер с id, и в js уже работать относительно этого контейнера

как-то так к примеру

<div id="slider1">
  <div class="slideshow-container">

        <div class="mySlidess fade">
            <div class="numbertext">1 / 3</div>
            <img src="media/img/block_1_img.png" style="width:100%">
            <div class="text">Caption Text</div>
        </div>

        <div class="mySlidess fade">
            <div class="numbertext">2 / 3</div>
            <img src="media/img/block_2_img.png" style="width:100%">
            <div class="text">Caption Two</div>
        </div>

        <div class="mySlidess fade">
            <div class="numbertext">3 / 3</div>
            <img src="media/img/block_3_img.png" style="width:100%">
            <div class="text">Caption Three</div>
        </div>

        <a class="prev" onclick="plusSlides(-1, 'slider1')">❮</a>
        <a class="next" onclick="plusSlides(1, 'slider1')">❯</a>

    </div>
    <br>

    <div style="text-align:center">
        <span class="dott" onclick="currentSlide(1, 'slider1')"></span> 
        <span class="dott" onclick="currentSlide(2, 'slider1')"></span> 
        <span class="dott" onclick="currentSlide(3, 'slider1')"></span> 
    </div>
</div>
<script>
    var slideIndex = 1;
    showSlides(slideIndex, 'slider1');

    function plusSlides(n, sl) {
        showSlides(slideIndex += n, sl);
    }

    function currentSlide(n , sl) {
        showSlides(slideIndex = n, sl);
    }

    function showSlides(n, sl) {
        let conteiner = document.getElementById(sl);
        var i;
        var slides = conteiner.querySelectorAll("div.mySlidess");
        var dots = conteiner.querySelectorAll("span.dott");
        if (n > slides.length) {
            slideIndex = 1
        }
        if (n < 1) {
            slideIndex = slides.length
        }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
    }
</script>

artemleon · 10 травня 2021

1 час назад, fanatic сказал:

как вариант, поместить каждый слайдер в конейнер с id, и в js уже работать относительно этого контейнера

как-то так к примеру


<div id="slider1">
  <div class="slideshow-container">

        <div class="mySlidess fade">
            <div class="numbertext">1 / 3</div>
            <img src="media/img/block_1_img.png" style="width:100%">
            <div class="text">Caption Text</div>
        </div>

        <div class="mySlidess fade">
            <div class="numbertext">2 / 3</div>
            <img src="media/img/block_2_img.png" style="width:100%">
            <div class="text">Caption Two</div>
        </div>

        <div class="mySlidess fade">
            <div class="numbertext">3 / 3</div>
            <img src="media/img/block_3_img.png" style="width:100%">
            <div class="text">Caption Three</div>
        </div>

        <a class="prev" onclick="plusSlides(-1, 'slider1')">❮</a>
        <a class="next" onclick="plusSlides(1, 'slider1')">❯</a>

    </div>
    <br>

    <div style="text-align:center">
        <span class="dott" onclick="currentSlide(1, 'slider1')"></span> 
        <span class="dott" onclick="currentSlide(2, 'slider1')"></span> 
        <span class="dott" onclick="currentSlide(3, 'slider1')"></span> 
    </div>
</div>
<script>
    var slideIndex = 1;
    showSlides(slideIndex, 'slider1');

    function plusSlides(n, sl) {
        showSlides(slideIndex += n, sl);
    }

    function currentSlide(n , sl) {
        showSlides(slideIndex = n, sl);
    }

    function showSlides(n, sl) {
        let conteiner = document.getElementById(sl);
        var i;
        var slides = conteiner.querySelectorAll("div.mySlidess");
        var dots = conteiner.querySelectorAll("span.dott");
        if (n > slides.length) {
            slideIndex = 1
        }
        if (n < 1) {
            slideIndex = slides.length
        }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
    }
</script>

Спасибо за помощь. Но увы непомогло

Вхід

Есть два скрипта для слайд шоу, по отдельности работают. А вместе, на одном сайте, нет

Recommended Posts

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information