artemleon Опубліковано: 9 травня 2021 Share Опубліковано: 9 травня 2021 Добрый день! Срочно нужна Ваша помощь. Есть два скрипта для слайд шоу, по отдельности работают. А вместе, на одном сайте, нет. Опытным путем выяснил что все дело вот в этой строчке: "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> Надіслати Поділитися на інших сайтах More sharing options...
artemleon Опубліковано: 9 травня 2021 Автор Share Опубліковано: 9 травня 2021 Да, я вижу что они почти идентичные. Но как сделать чтоб они "подружились" я не знаю. Вот и прошу помощи. Надіслати Поділитися на інших сайтах More sharing options...
artemleon Опубліковано: 9 травня 2021 Автор Share Опубліковано: 9 травня 2021 Делаю себе сайт, своими силами. Со скриптами есть проблемка, знаний нехватает. Надіслати Поділитися на інших сайтах More sharing options...
artemleon Опубліковано: 9 травня 2021 Автор Share Опубліковано: 9 травня 2021 (змінено) И помощь мне нужна, чтоб пояснили что и как и почему, чтоб я смог пользоватся этим инструментом в дальнейшем. Помощь из разряда заплати и мы тебе сделаем ненужна. Спасибо Змінено 9 травня 2021 користувачем artemleon Надіслати Поділитися на інших сайтах More sharing options...
spectre Опубліковано: 9 травня 2021 Share Опубліковано: 9 травня 2021 1 час назад, artemleon сказал: Срочно нужна Ваша помощь 6 минут назад, artemleon сказал: Помощь из разряда заплати и мы тебе сделаем ненужна. Спасибо вам не кажется что это взаимоисключающие вещи? Надіслати Поділитися на інших сайтах More sharing options... artemleon Опубліковано: 9 травня 2021 Автор Share Опубліковано: 9 травня 2021 Мне действительно надо разобратся с этими скриптами, самому не получается, и обратился я на данный форум с надеждой что найдется человек который подскажет почему они не работают вместе и что надо прописать в данных сктиптах чтоб они не конфликтовали друг с другом. О методе document.getElementsByClassName знаю что он возвращает обьект содежащий в себе дочерние элементы. Надіслати Поділитися на інших сайтах More sharing options... fanatic Опубліковано: 10 травня 2021 Share Опубліковано: 10 травня 2021 17 часов назад, artemleon сказал: почему они не работают вместе потому что 18 часов назад, nikifalex сказал: скрипты практически идентичные 17 часов назад, artemleon сказал: что надо прописать в данных сктиптах чтоб они не конфликтовали друг с другом. работать с одним из скриптов Надіслати Поділитися на інших сайтах More sharing options... artemleon Опубліковано: 10 травня 2021 Автор Share Опубліковано: 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 Надіслати Поділитися на інших сайтах More sharing options... spectre Опубліковано: 10 травня 2021 Share Опубліковано: 10 травня 2021 https://learn.javascript.ru/ Надіслати Поділитися на інших сайтах More sharing options... fanatic Опубліковано: 10 травня 2021 Share Опубліковано: 10 травня 2021 покажите html, c которым должны работать эти скрипты. Надіслати Поділитися на інших сайтах More sharing options... artemleon Опубліковано: 10 травня 2021 Автор Share Опубліковано: 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="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> Надіслати Поділитися на інших сайтах More sharing options... artemleon Опубліковано: 10 травня 2021 Автор Share Опубліковано: 10 травня 2021 <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> Надіслати Поділитися на інших сайтах More sharing options... artemleon Опубліковано: 10 травня 2021 Автор Share Опубліковано: 10 травня 2021 1 час назад, fanatic сказал: покажите html, c которым должны работать эти скрипты. скрипты побросал Надіслати Поділитися на інших сайтах More sharing options... fanatic Опубліковано: 10 травня 2021 Share Опубліковано: 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> Надіслати Поділитися на інших сайтах More sharing options... artemleon Опубліковано: 10 травня 2021 Автор Share Опубліковано: 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> Спасибо за помощь. Но увы непомогло Надіслати Поділитися на інших сайтах More sharing options... Створіть аккаунт або увійдіть для коментування Ви повинні бути користувачем, щоб залишити коментар Створити обліковий запис Зареєструйтеся для отримання облікового запису. Це просто! Зареєструвати аккаунт Вхід Уже зареєстровані? Увійдіть тут. Вхід зараз Share More sharing options... Передплатники 2 Перейти до списку тем Зараз на сторінці 0 користувачів Ні користувачів, які переглядиють цю сторінку Последние темы Последние дополнения Последние новости Вся активність Головна Підтримка та відповіді на запитання. Допомога програмістам та розробникам Есть два скрипта для слайд шоу, по отдельности работают. А вместе, на одном сайте, нет Покупцям Оплата розширень фізичними особами Оплата розширень юридичними особами Політика повернень Розробникам Регламент розміщення розширень Регламент продажу та підтримки розширень Віртуальний обліковий запис автора Політика просування оголошень API каталогу розширень Вирішення спорів щодо авторських прав Корисна інформація Публічна оферта Політика повернень Політика конфіденційності Платіжна політика Політика передачі особистих даних Політика прозорості Останні розширення PRICE MASTER - Модуль імпорту/експорту товарів, парсинг, переклад, генерація текстів, редактор каталогу та багато іншого Автор: ScriptBrains 1.0 Синхронізація Замовлень Rozetka.ua та Opencart Автор: sinco Product Manipulator Автор: Hiperlynx007 Видалення дублікатів товарів для OpenCart Автор: Hatshypsut Вибір категорій і виробників для "Знайшли дешевше" шаблону Upstore Автор: Flint2000 × Уже зареєстровані? Ввійти Реєстрація Ваші замовлення Назад Придбані модулі та шаблони Ваші рахунки Лист очікувань Альтернативні контакти Форум Новини ocStore Назад Офіційний сайт Демо ocStore 3.0.3.2 Демо ocStore 2.3.0.2.4 Завантажити ocStore Документація Історія версій ocStore Блоги Модулі Шаблони Назад Безкоштовні шаблони Платні шаблони Де купувати модулі? Послуги FAQ OpenCart.Pro Назад Демо Купити Порівняння × Створити... Important Information На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність. Я даю згоду
artemleon Опубліковано: 9 травня 2021 Автор Share Опубліковано: 9 травня 2021 Мне действительно надо разобратся с этими скриптами, самому не получается, и обратился я на данный форум с надеждой что найдется человек который подскажет почему они не работают вместе и что надо прописать в данных сктиптах чтоб они не конфликтовали друг с другом. О методе document.getElementsByClassName знаю что он возвращает обьект содежащий в себе дочерние элементы. Надіслати Поділитися на інших сайтах More sharing options...
fanatic Опубліковано: 10 травня 2021 Share Опубліковано: 10 травня 2021 17 часов назад, artemleon сказал: почему они не работают вместе потому что 18 часов назад, nikifalex сказал: скрипты практически идентичные 17 часов назад, artemleon сказал: что надо прописать в данных сктиптах чтоб они не конфликтовали друг с другом. работать с одним из скриптов Надіслати Поділитися на інших сайтах More sharing options... artemleon Опубліковано: 10 травня 2021 Автор Share Опубліковано: 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 Надіслати Поділитися на інших сайтах More sharing options... spectre Опубліковано: 10 травня 2021 Share Опубліковано: 10 травня 2021 https://learn.javascript.ru/ Надіслати Поділитися на інших сайтах More sharing options... fanatic Опубліковано: 10 травня 2021 Share Опубліковано: 10 травня 2021 покажите html, c которым должны работать эти скрипты. Надіслати Поділитися на інших сайтах More sharing options... artemleon Опубліковано: 10 травня 2021 Автор Share Опубліковано: 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="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> Надіслати Поділитися на інших сайтах More sharing options... artemleon Опубліковано: 10 травня 2021 Автор Share Опубліковано: 10 травня 2021 <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> Надіслати Поділитися на інших сайтах More sharing options... artemleon Опубліковано: 10 травня 2021 Автор Share Опубліковано: 10 травня 2021 1 час назад, fanatic сказал: покажите html, c которым должны работать эти скрипты. скрипты побросал Надіслати Поділитися на інших сайтах More sharing options... fanatic Опубліковано: 10 травня 2021 Share Опубліковано: 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> Надіслати Поділитися на інших сайтах More sharing options... artemleon Опубліковано: 10 травня 2021 Автор Share Опубліковано: 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> Спасибо за помощь. Но увы непомогло Надіслати Поділитися на інших сайтах More sharing options... Створіть аккаунт або увійдіть для коментування Ви повинні бути користувачем, щоб залишити коментар Створити обліковий запис Зареєструйтеся для отримання облікового запису. Це просто! Зареєструвати аккаунт Вхід Уже зареєстровані? Увійдіть тут. Вхід зараз Share More sharing options... Передплатники 2 Перейти до списку тем Зараз на сторінці 0 користувачів Ні користувачів, які переглядиють цю сторінку Последние темы Последние дополнения Последние новости Вся активність Головна Підтримка та відповіді на запитання. Допомога програмістам та розробникам Есть два скрипта для слайд шоу, по отдельности работают. А вместе, на одном сайте, нет Покупцям Оплата розширень фізичними особами Оплата розширень юридичними особами Політика повернень Розробникам Регламент розміщення розширень Регламент продажу та підтримки розширень Віртуальний обліковий запис автора Політика просування оголошень API каталогу розширень Вирішення спорів щодо авторських прав Корисна інформація Публічна оферта Політика повернень Політика конфіденційності Платіжна політика Політика передачі особистих даних Політика прозорості Останні розширення PRICE MASTER - Модуль імпорту/експорту товарів, парсинг, переклад, генерація текстів, редактор каталогу та багато іншого Автор: ScriptBrains 1.0 Синхронізація Замовлень Rozetka.ua та Opencart Автор: sinco Product Manipulator Автор: Hiperlynx007 Видалення дублікатів товарів для OpenCart Автор: Hatshypsut Вибір категорій і виробників для "Знайшли дешевше" шаблону Upstore Автор: Flint2000
artemleon Опубліковано: 10 травня 2021 Автор Share Опубліковано: 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 Надіслати Поділитися на інших сайтах More sharing options...
spectre Опубліковано: 10 травня 2021 Share Опубліковано: 10 травня 2021 https://learn.javascript.ru/ Надіслати Поділитися на інших сайтах More sharing options... fanatic Опубліковано: 10 травня 2021 Share Опубліковано: 10 травня 2021 покажите html, c которым должны работать эти скрипты. Надіслати Поділитися на інших сайтах More sharing options... artemleon Опубліковано: 10 травня 2021 Автор Share Опубліковано: 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="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> Надіслати Поділитися на інших сайтах More sharing options... artemleon Опубліковано: 10 травня 2021 Автор Share Опубліковано: 10 травня 2021 <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> Надіслати Поділитися на інших сайтах More sharing options... artemleon Опубліковано: 10 травня 2021 Автор Share Опубліковано: 10 травня 2021 1 час назад, fanatic сказал: покажите html, c которым должны работать эти скрипты. скрипты побросал Надіслати Поділитися на інших сайтах More sharing options... fanatic Опубліковано: 10 травня 2021 Share Опубліковано: 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> Надіслати Поділитися на інших сайтах More sharing options... artemleon Опубліковано: 10 травня 2021 Автор Share Опубліковано: 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> Спасибо за помощь. Но увы непомогло Надіслати Поділитися на інших сайтах More sharing options... Створіть аккаунт або увійдіть для коментування Ви повинні бути користувачем, щоб залишити коментар Створити обліковий запис Зареєструйтеся для отримання облікового запису. Це просто! Зареєструвати аккаунт Вхід Уже зареєстровані? Увійдіть тут. Вхід зараз Share More sharing options... Передплатники 2 Перейти до списку тем Зараз на сторінці 0 користувачів Ні користувачів, які переглядиють цю сторінку Последние темы Последние дополнения Последние новости Вся активність Головна Підтримка та відповіді на запитання. Допомога програмістам та розробникам Есть два скрипта для слайд шоу, по отдельности работают. А вместе, на одном сайте, нет
fanatic Опубліковано: 10 травня 2021 Share Опубліковано: 10 травня 2021 покажите html, c которым должны работать эти скрипты. Надіслати Поділитися на інших сайтах More sharing options... artemleon Опубліковано: 10 травня 2021 Автор Share Опубліковано: 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="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> Надіслати Поділитися на інших сайтах More sharing options... artemleon Опубліковано: 10 травня 2021 Автор Share Опубліковано: 10 травня 2021 <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> Надіслати Поділитися на інших сайтах More sharing options... artemleon Опубліковано: 10 травня 2021 Автор Share Опубліковано: 10 травня 2021 1 час назад, fanatic сказал: покажите html, c которым должны работать эти скрипты. скрипты побросал Надіслати Поділитися на інших сайтах More sharing options... fanatic Опубліковано: 10 травня 2021 Share Опубліковано: 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> Надіслати Поділитися на інших сайтах More sharing options... artemleon Опубліковано: 10 травня 2021 Автор Share Опубліковано: 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> Спасибо за помощь. Но увы непомогло Надіслати Поділитися на інших сайтах More sharing options... Створіть аккаунт або увійдіть для коментування Ви повинні бути користувачем, щоб залишити коментар Створити обліковий запис Зареєструйтеся для отримання облікового запису. Це просто! Зареєструвати аккаунт Вхід Уже зареєстровані? Увійдіть тут. Вхід зараз Share More sharing options... Передплатники 2 Перейти до списку тем Зараз на сторінці 0 користувачів Ні користувачів, які переглядиють цю сторінку
artemleon Опубліковано: 10 травня 2021 Автор Share Опубліковано: 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="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> Надіслати Поділитися на інших сайтах More sharing options...
artemleon Опубліковано: 10 травня 2021 Автор Share Опубліковано: 10 травня 2021 <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> Надіслати Поділитися на інших сайтах More sharing options...
artemleon Опубліковано: 10 травня 2021 Автор Share Опубліковано: 10 травня 2021 1 час назад, fanatic сказал: покажите html, c которым должны работать эти скрипты. скрипты побросал Надіслати Поділитися на інших сайтах More sharing options...
fanatic Опубліковано: 10 травня 2021 Share Опубліковано: 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> Надіслати Поділитися на інших сайтах More sharing options... artemleon Опубліковано: 10 травня 2021 Автор Share Опубліковано: 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> Спасибо за помощь. Но увы непомогло Надіслати Поділитися на інших сайтах More sharing options... Створіть аккаунт або увійдіть для коментування Ви повинні бути користувачем, щоб залишити коментар Створити обліковий запис Зареєструйтеся для отримання облікового запису. Це просто! Зареєструвати аккаунт Вхід Уже зареєстровані? Увійдіть тут. Вхід зараз Share More sharing options... Передплатники 2
artemleon Опубліковано: 10 травня 2021 Автор Share Опубліковано: 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> Спасибо за помощь. Но увы непомогло Надіслати Поділитися на інших сайтах More sharing options...
Recommended Posts