Форум

seotapki · #1 (**permalink**) 27.08.2016, 10:06

Приветствую!
Нужна ваша помощь.

На сайте проблема со сменой слайдов и эффектом набора текста 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 и сразу выводить значения строк в слайдере, то проблем нет.

рони · #2 (**permalink**) 27.08.2016, 12:39

seotapki,
у вас в каждом слайде одинаковые id?

рони · #3 (**permalink**) 27.08.2016, 13:58

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>

seotapki · #4 (**permalink**) 27.08.2016, 14:22

Сообщение от рони

seotapki,
у вас в каждом слайде одинаковые id?

Id контейнера в каждом слайдере одинаковые, но при смене слайда там динамически меняется текст

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

Тема по прежнему актуальна

рони · #5 (**permalink**) 27.08.2016, 14:27

Сообщение от seotapki

Тема по прежнему актуальна

чем код выше не подошёл?

seotapki · #6 (**permalink**) 27.08.2016, 15:07

Сообщение от рони

чем код выше не подошёл?

Код выше почему-то у меня не сработал, переделал под bxslider

исходный код можете глянуть?
http://andrei-reklama.webfox.pro/

теперь еще почему-то typed.js зациклился и игнорирует свои настройки

рони · #7 (**permalink**) 27.08.2016, 15:22

Сообщение от seotapki

теперь еще почему-то typed.js зациклился и игнорирует свои настройки

...откуда скрипту знать какой именно string1 или string2, если не указано, берётся первый.

$(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, // пауза перед удалением текста
                        });
   }
});
});

seotapki · #8 (**permalink**) 27.08.2016, 15:38

Сообщение от рони

...откуда скрипту знать какой именно string1 или string2, если не указано, берётся первый.

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

как это можно исправить и почему так происходит?

рони · #9 (**permalink**) 27.08.2016, 16:06

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, // пауза перед удалением текста
                        });
  },

seotapki · #10 (**permalink**) 27.08.2016, 16:19

Сообщение от рони

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, // пауза перед удалением текста
                        });
  },

Спасибо большое, теперь все работает! Вопрос решен)))

Форум

Справочник

Discord чат

Курсы javascript