Повторное получение данных JS-скриптом при смене слайда
Приветствую!
Нужна ваша помощь. На сайте проблема со сменой слайдов и эффектом набора текста typed.js - Слайдер использую http://www.owlcarousel.owlgraphic.co...d-welcome.html - Эффект набора текста http://www.mattboldt.com/demos/typed-js/ Вот код: <script> jQuery(document).ready(function($) { var owl = $('.owl-carousel'); owl.on( 'to.owl.carousel changed.owl.carousel', function(e) { $(".top_text").typed({ stringsElement: $('#string1'), typeSpeed: 0, showCursor: false, }); $(".bottom_text").typed({ stringsElement: $('#string2'), typeSpeed: 0, showCursor: false, }); }); owl.owlCarousel({ loop: true, nav: false, autoplay: true, autoplayTimeout: 5000, autoplayHoverPause: true, items:1, }); }); </script> Теперь о проблеме: Есть две строки(#string1, #string2), где при каждой смене слайда меняются значения обоих строк. Пункт1. Дожжно быть так: 1 Слайд (#string1= значение 1, #string2=значение1) 2 Слайд (#string1= значение 2, #string2=значение2) 3 Слайд (#string1= значение 3, #string2=значение3) слайдер зацикленный и при повторе должно все повторяться. Пункт2. А получается так: 1 Слайд (#string1= значение 1, #string2=значение1) 2 Слайд (#string1= значение 2, #string2=значение2) 3 Слайд (#string1= значение 2, #string2=значение2) Пункт3. при повторном выполнении слайдера, получается так: 1 Слайд (#string1= значение 2, #string2=значение2) 2 Слайд (#string1= значение 2, #string2=значение2) 3 Слайд (#string1= значение 2, #string2=значение2) Если обновить страницу, получается пункт 2 Как сделать так, чтобы при каждой смене слайда JS получал новое значение строк (#string1, #string2). Если не использовать typed.js и сразу выводить значения строк в слайдере, то проблем нет. |
seotapki,
у вас в каждом слайде одинаковые id? |
owlCarousel and typed
seotapki,
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script> <script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script> <link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css"> <link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css"> <link rel="stylesheet" type="text/css" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.4/typed.min.js"></script> <style type="text/css"> .owl-carousel .item { height: 10rem; background: #4DC7A0; padding: 1rem; position:relative; } .owl-carousel .owl-prev{ position:absolute; top:0; left:0; display:block; height:99%; width:90px; background:red; } .owl-carousel .owl-next{ position:absolute; top:0; right:0; display:block; height:99%; width:90px; background:red; } .owl-prev,.owl-next{ opacity:0; } .prev:after, .next:after{ content: attr(class); } .prev,.next{ display: inline-block; } .typed-cursor{ opacity: 1; -webkit-animation: blink 0.7s infinite; -moz-animation: blink 0.7s infinite; animation: blink 0.7s infinite; } @keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } .string1,.string2{ display: none; } </style> <title>Owl Carousel 2.1.0 Responsive by Geyan</title> <script> $(function() { var owl = $('.owl-carousel').owlCarousel({ loop: true, nav: false, autoplay: true, autoplayTimeout: 5000, autoplayHoverPause: true, items:1, mouseDrag:false }); owl.on('change.owl.carousel', function(e) { $(".top_text").typed({ strings: [$('.string1').eq(e.page.index).text()], typeSpeed: 0, showCursor: false, }); $(".bottom_text").typed({ strings: [$('.string2').eq(e.page.index).text()], typeSpeed: 0, showCursor: false, }); }); }) </script> </head> <body> <div class="top_text">111 up</div> <div class="owl-carousel"> <div class="item"> <div class="string1">111 up</div><div class="string2">111 dn</div> <h4>1</h4> </div> <div class="item"> <div class="string1">222 up</div><div class="string2">222 dn</div> <h4>2</h4> </div> <div class="item"> <div class="string1">333 up</div><div class="string2">333 dn</div> <h4>3</h4> </div> </div> <div class="bottom_text">111 dn</div> </body> </html> |
Цитата:
<div id="string1" style="display: none;"><p>[[+slidername]]</p></div> <div id="string2" style="display: none;"><p>[[+sliderdescription]]</p></div> Изменил слайдер на другой, вот код: <script> $(document).ready(function(){ $('.slider').bxSlider({ mode: 'horizontal', controls: true, infiniteLoop: true, pager: false, auto: true, autoStart: true, onSliderLoad: function(){ $(".top_text").typed({ stringsElement: $('#string1'), typeSpeed: 0, showCursor: false, }); $(".bottom_text").typed({ stringsElement: $('#string2'), typeSpeed: 0, showCursor: false, }); }, onSlideAfter: function(){ $(".top_text").typed({ stringsElement: $('#string1'), typeSpeed: 0, showCursor: false, }); $(".bottom_text").typed({ stringsElement: $('#string2'), typeSpeed: 0, showCursor: false, }); } }); }); </script> Тема по прежнему актуальна |
Цитата:
|
Цитата:
исходный код можете глянуть? http://andrei-reklama.webfox.pro/ теперь еще почему-то typed.js зациклился и игнорирует свои настройки |
Цитата:
$(document).ready(function(){ $('.slider').bxSlider({ mode: 'horizontal', controls: true, infiniteLoop: true, pager: false, auto: true, autoStart: true, pause: 5000, onSliderLoad: function(el){ $(".top_text").typed({ stringsElement: $('.string1',el), typeSpeed: 0, showCursor: false, loop: false, loopCount: 0, backDelay: 5000, // пауза перед удалением текста }); $(".bottom_text").typed({ stringsElement: $('.string2',el), typeSpeed: 0, showCursor: false, loop: false, loopCount: 0, backDelay: 5000, // пауза перед удалением текста }); }, onSlideAfter: function(el){ $(".top_text").typed({ stringsElement: $('.string1',el), typeSpeed: 0, showCursor: false, loop: false, loopCount: 0, backDelay: 5000, // пауза перед удалением текста }); $(".bottom_text").typed({ stringsElement: $('.string2',el), typeSpeed: 0, showCursor: false, loop: false, loopCount: 0, backDelay: 5000, // пауза перед удалением текста }); } }); }); |
Цитата:
<div class="big_photo"> <img src="assets/images/sliders/slide3.jpg" > <div class="slider_inner"> <a class="top_text" href="/shirokoformatnaja-pechat" ></a> <a class="bottom_text" href="/shirokoformatnaja-pechat" ></a> </div> <div class="string1"><p>Рекламные вывески</p></div><div class="string2"><p>Проектирование, изготовление, монтаж, обслуживание...</p></div> </div><div class="big_photo"> <img src="assets/images/sliders/slide4.jpg" > <div class="slider_inner"> <a class="top_text" href="/uslugi/oformlenie-vitrin-i-torgovyix-zalov.html" ></a> <a class="bottom_text" href="/uslugi/oformlenie-vitrin-i-torgovyix-zalov.html" ></a> </div> <div class="string1"><p>Крышные конструкции</p></div><div class="string2"><p>Проектирование, изготовление, монтаж, обслуживание...</p></div> </div><div class="big_photo"> <img src="assets/images/sliders/slide1.jpg" > <div class="slider_inner"> <a class="top_text" href="" ></a> <a class="bottom_text" href="" ></a> </div> <div class="string1"><p>Оформление витрин и торговых залов</p></div><div class="string2"><p>Оформление гипермаркета строительных материалов, еще текст и описание...</p></div> </div> </section> Но при первой загрузке страницы, вот этому участку кода: <div class="big_photo"> <img src="assets/images/sliders/slide3.jpg" > <div class="slider_inner"> <a class="top_text" href="/shirokoformatnaja-pechat" ></a> <a class="bottom_text" href="/shirokoformatnaja-pechat" ></a> </div> Присваиваются неправильные строки : <div class="string1"><p>Оформление витрин и торговых залов</p></div><div class="string2"><p>Оформление гипермаркета строительных материалов, еще текст и описание...</p></div> т.е Первому слайду(slide3.jpg) присваивается описание, третьего слайда(slide1.jpg) <div class="string1"><p>Оформление витрин и торговых залов</p></div><div class="string2"><p>Оформление гипермаркета строительных материалов, еще текст и описание...</p></div> как это можно исправить и почему так происходит? |
seotapki,
onSliderLoad: function(){ $(".top_text").typed({ stringsElement: $('.string1').eq(1), typeSpeed: 0, showCursor: false, loop: false, loopCount: 0, backDelay: 5000, // пауза перед удалением текста }); $(".bottom_text").typed({ stringsElement: $('.string2').eq(1), typeSpeed: 0, showCursor: false, loop: false, loopCount: 0, backDelay: 5000, // пауза перед удалением текста }); }, |
Цитата:
|
Часовой пояс GMT +3, время: 11:02. |