Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


Recommended Posts

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

 

Скрипт 1:

<script>
var slideIndex = 1;
showSlides(slideIndex);

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

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

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlidess");
  var dots = document.getElementsByClassName("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>

 

 

Скрипт 2:

<script>
var slideIndex = 1;
showSlides(slideIndex);

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

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

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  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";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
    

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


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

 

Змінено користувачем artemleon
Надіслати
Поділитися на інших сайтах


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

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

 

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

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

 

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

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

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

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


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

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

потому что 

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

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

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

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

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

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

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

  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 я им тож имена поменял

Змінено користувачем artemleon
Надіслати
Поділитися на інших сайтах


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

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


<!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="slideshow-container">

<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>

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

</div>
<br>

<div style="text-align:center">
  <span class="dott" onclick="currentSlide(1)"></span> 
  <span class="dott" onclick="currentSlide(2)"></span> 
  <span class="dott" onclick="currentSlide(3)"></span> 
</div>

<script>
var slideIndex = 1;
showSlides(slideIndex);

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

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

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlidess");
  var dots = document.getElementsByClassName("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>

</body>
</html>

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


<style>
* {box-sizing: border-box;}
</style>

<body>
<div class="container col-lg-12 col-xs-12 col-sm-12" style="background: url(image/catalog/circles-new.svg), linear-gradient(to top, #1f618a70, #003e7b);background-size: cover;background-position: left 50% center; padding-bottom: 80px;">
<div class="container_slider">

<div class="row col-lg-2 col-sm-2 col-md-2 hidden-xs wow  fadeInLeft" style="padding:4%">
    <div class="column column_slider"><img class="demo cursor" src="image/catalog/slider_banner_1/slider_1.png" style="width:100%" onclick="currentSlide(1)" alt=""></div>
    <div class="column column_slider"><img class="demo cursor" src="image/catalog/slider_banner_1/slider_2.png" style="width:100%" onclick="currentSlide(2)" alt=""></div>
    <div class="column column_slider"><img class="demo cursor" src="image/catalog/slider_banner_1/slider_3.png" style="width:100%" onclick="currentSlide(3)" alt=""></div>
    <div class="column column_slider"><img class="demo cursor" src="image/catalog/slider_banner_1/slider_4.png" style="width:100%" onclick="currentSlide(4)" alt=""></div>
</div>
      
<div class="col-lg-10 col-sm-10 col-md-10 hidden-xs" style="margin-top: 3%; padding-left: 0;">
 <div class="caption-container"><p id="caption"></p></div>

<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="container widget-blocks-1 col-lg-12 col-xs-12 col-sm-12 wow  fadeInUp">
<div class="row widget-blocks-2">

<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>

<script>
 new WOW().init();
</script>

<script>
var slideIndex = 1;
showSlides(slideIndex);

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

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

function showSlides(n) {
  let i;
  var slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("demo");
  let captionText = document.getElementById("caption");
  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";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
    
</body>

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


как вариант, поместить каждый слайдер в конейнер с 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>

 

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

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>

 

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

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


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

Ви повинні бути користувачем, щоб залишити коментар

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

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

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

    • Ні користувачів, які переглядиють цю сторінку

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.