Bootstrap carousel make text appearing letter by letter

Question

I'm using bootstrap carousel for the slider , on each slide there is some text over it.

I would like that text over the slides to aappear letter by letter.

I have almost solved it..

But there are 2 issues

1. On first slide the text doesn't come up at all
2. If the user goes to some other tab on the browser means if the current window is not in focus ,then everything gets messed up.

Here is my fiddle

HTML

<main>
      <div class="container">
        <div class="block-wrap">
          <div id="js-carousel" class="carousel slide" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
              <div class="item active">
                <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Chania">
                <div class="caption">

                  <div class="mystring hide">companies with Inbound Marketing</div>
                  <h4>We help <div class="demo-txt"></div> </h4>
                </div>
              </div>

              <div class="item">
                <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Chania">
                <div class="caption">
                <div class="mystring hide">companies with Inbound Marketing</div>

                  <h4>We help  <div class="demo-txt "></div> </h4>
                </div>
              </div>

              <div class="item">
                <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Flower">
                <div class="caption">
                <div class="mystring hide">2companies with Inbound Marketing</div>

                  <h4>We help <div class="demo-txt"></div> </h4>
                </div>
              </div>

              <div class="item">
                <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Flower">
                <div class="caption">
                <div class="mystring hide">3companies with Inbound Marketing</div>

                  <h4>We help <div class="demo-txt"></div> </h4>
                </div>
              </div>
              <div class="overlay-effect"></div>
            </div>
          </div>
        </div> 
      </div>
    </main>

JS:

$(document).ready(function() {    
     $('#js-carousel').carousel({
        interval: 5000
    });

     $('#js-carousel').on('slid.bs.carousel', function () {
      var showText = function (target, message, index, interval) { 
        if (index < message.length) { 
          $(target).append(message[index++]); 
          setTimeout(function () { showText(target, message, index, interval); }, interval); 
        } 
      }                 
       var str = $(this).find(".active .mystring").html();
          $('.active .demo-txt').html("");         
          showText(".active .demo-txt", str, 0, 100);          
     });
    });

Answer 1

Instead of settimeout use setInterval function. Also use clearInterval to clear schedular when a new slide begin. (I think this is your second problem.)

Here is your target js file:

$(document).ready(function() {    
    $('#js-carousel').carousel({
        interval: 5000
    });
    var handler;
    var interval = 5000;
    var index = 0;
    function showText(target, message, index, interval) { 
        if (index < message.length) { 
            $(target).append(message[index]); 
        }
    }

    function iteration() {
        if(handler){
            clearInterval(handler);
        }
        index = 0;
        var str = $(this).find(".active .mystring").html();
        $('.active .demo-txt').html("");
        showText(".active .demo-txt", str, index++, 100);         
        handler = setInterval(function(){
            showText(".active .demo-txt", str, index++, 100);
        }, 100);
     }

     //on each carousel slide change: 
     $('#js-carousel').on('slid.bs.carousel', iteration);
     //start immediately for your first problem:
     iteration.bind($('#js-carousel'))();
});

Answer 2

It's because your function is inside the slide event. At starting, the carousel doesn't slide...

Fiddle: https://jsfiddle.net/Lbasa2jh/5/

JS:

$(document).ready(function() {  
    var showText = function (target, message, index, interval) { 
    if (index < message.length) { 
          $(target).append(message[index++]); 
          setTimeout(function () { showText(target, message, index, interval); }, interval); 
        } 
      };

    $('#js-carousel').carousel({
        interval: 5000
    });

       var str0 = $(this).find(".active .mystring").html();
       $('.active .demo-txt').html("");         
       showText(".active .demo-txt", str0, 0, 100);    

     $('#js-carousel').on('slid.bs.carousel', function () {

       var str = $(this).find(".active .mystring").html();
          $('.active .demo-txt').html("");         
          showText(".active .demo-txt", str, 0, 100);          
     });
    });