jQuery text flip не работает должным образом

Я добавил текст, который перелистал библиотеки jQuery fliptext и lettering. Я помещаю их в слайдеры, первый слайд работает нормально, но слайды слайдов имеют проблемы с текстом. как его достичь? вот моя ссылка Here is working codejQuery text flip не работает должным образом

<!DOCTYPE html> 
<html> 

<head> 
    <title>Find A Gamer</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
    <link href="css/style.css" rel="stylesheet" type="text/css" /> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="js/jquery.lettering.js" type="text/javascript"></script> 
    <script src="js/eliptext.js" type="text/javascript"></script> 
    <script src="js/main.js" type="text/javascript"></script> 
</head> 

<body> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
     <!-- Indicators --> 
     <!-- Wrapper for slides --> 
     <div class="carousel-inner" role="listbox"> 
      <div class="item active"> 
       <div id="gc"> 
        <span class="username">Game username</span> 
        <span class="level">Level: intermediate</span> 
        <span class="wager">Wager 
      <span class="count">500</span> 
        <span class="blink_glare"></span> 
        </span> 
        <span class="sp">sp 
      <span class="count">45%</span> 
        <span class="blink_glare"></span> 
        </span> 
        <a href="#" class="accept">accept</a> 
        <a class="decline" href="#myCarousel" role="button" data-slide="next">decline</a> 

        <span class="ring_1"></span> 
        <span class="tickers"></span> 
        <figure class="user"> 
         <img src="images/user.jpg" alt=""> 
        </figure> 

       </div> 
      </div> 

      <div class="item"> 
       <div id="gc"> 
        <span class="username">Game username</span> 
        <span class="level">Level: intermediate</span> 
        <span class="wager">Wager 
      <span class="count">500</span> 
        <span class="blink_glare"></span> 
        </span> 
        <span class="sp">sp 
      <span class="count">45%</span> 
        <span class="blink_glare"></span> 
        </span> 
        <a href="#" class="accept">accept</a> 
        <a class="decline" href="#myCarousel" role="button" data-slide="next">decline</a> 

        <span class="ring_1"></span> 
        <span class="tickers"></span> 
        <figure class="user"> 
         <img src="images/user.jpg" alt=""> 
        </figure> 

       </div> 
      </div> 

      <div class="item"> 
       <div id="gc"> 
        <span class="username">Game username</span> 
        <span class="level">Level: intermediate</span> 
        <span class="wager">Wager 
      <span class="count">500</span> 
        <span class="blink_glare"></span> 
        </span> 
        <span class="sp">sp 
      <span class="count">45%</span> 
        <span class="blink_glare"></span> 
        </span> 
        <a href="#" class="accept">accept</a> 
        <a class="decline" href="#myCarousel" role="button" data-slide="next">decline</a> 

        <span class="ring_1"></span> 
        <span class="tickers"></span> 
        <figure class="user"> 
         <img src="images/user.jpg" alt=""> 
        </figure> 

       </div> 
      </div> 

      <div class="item"> 
       <div id="gc"> 
        <span class="username">Game username</span> 
        <span class="level">Level: intermediate</span> 
        <span class="wager">Wager 
      <span class="count">500</span> 
        <span class="blink_glare"></span> 
        </span> 
        <span class="sp">sp 
      <span class="count">45%</span> 
        <span class="blink_glare"></span> 
        </span> 
        <a href="#" class="accept">accept</a> 
        <a class="decline" href="#myCarousel" role="button" data-slide="next">decline</a> 

        <span class="ring_1"></span> 
        <span class="tickers"></span> 
        <figure class="user"> 
         <img src="images/user.jpg" alt=""> 
        </figure> 

       </div> 
      </div> 
     </div> 
    </div> 


    <script> 
     $('.carousel').carousel({ 
      interval: false 
     }) 
    </script> 

</body> 

</html>

источник

2015-07-27 Junaid Khawaja

где код? – Sushil

Извините, что текст «вот рабочий код» сам по себе имеет ссылку на мой код. –

Вам необходимо разместить здесь код. никто не пойдёт на ваш сайт и не просмотрит источник и не проверит код – Sushil

Проблема заключается в том, что вы не звоните elip функции для других слайдов. Сначала отображается только один слайд, а elipText использует размеры элемента для вычисления позиции букв.

Вы могли бы назвать эту функцию, когда слайд-переключатели:

$('.carousel').on('slid.bs.carousel', function() { 
    elip(); 
});

источник

2015-07-27 23:14:56 lukbl

jQuery text flip не работает должным образом

ответ

Смежные вопросы