메시지가 3 개 이상인 경우 텍스트 캐 러셀이 작동하지 않습니다.

Question

jQuery로 매우 간단한 texte 캐로 셀을 만들고 싶습니다. 내가 3 메시지가있을 때하지만 난 2 내가이 문제를 해결하려면 어떻게

이상 3.이 없을 때

작업 보인다?

또한 메시지 번호 (1 개)를 어떻게 업데이트 할 수 있습니까?

JsFiddle : https://jsfiddle.net/rm7ukmar/

$(function() { 
    var quotes = $(".message"); 
    var quoteIndex = -1; 

    function showQuote(change) { 
     quoteIndex += change; 
     if (quoteIndex < 0) { 
      quoteIndex += quotes.length; 
     } 
     else if (quoteIndex >= quotes.length) { 
      quoteIndex -= quotes.length; 
     } 
     quotes.stop(true, true).hide().eq(quoteIndex) 
      .fadeIn(1) 
      .delay(1) 
      .fadeOut(1) 
      .queue(function() { showQuote(1); }); 
    } 
    showQuote(1); 

    $('#prev').on('click', function() { 
     showQuote(-1); 
    }); 

    $('#next').on('click', function() { 
     showQuote(1); 
    }); 
}); 

Answer 1

당신은 거기에 값을 바인딩하고 값을 바인딩 $('.sliderCount').text(quotes.length);를 사용하도록 범위를 사용하여 대신 ?의 수를 얻을 수 있습니다.

$(function() { 
 
    var quotes = $(".message"); 
 
    var quoteIndex = -1; 
 
    $('.sliderCount').text(quotes.length); 
 

 
    function showQuote(change) { 
 
    quoteIndex += change; 
 
    if (quoteIndex < 0) { 
 
     quoteIndex += quotes.length; 
 
    } else if (quoteIndex >= quotes.length) { 
 
     quoteIndex -= quotes.length; 
 
    } 
 
    quotes.stop(true, true).hide().eq(quoteIndex) 
 
     .fadeIn(1) 
 
     .delay(1000) 
 
     .fadeOut(1) 
 
     .queue(function() { 
 
     showQuote(1); 
 
     }); 
 
    } 
 
    showQuote(1); 
 

 
    $('#prev').on('click', function() { 
 
    showQuote(-1); 
 
    }); 
 

 
    $('#next').on('click', function() { 
 
    showQuote(1); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-xs-10"> 
 
    <div class="message"> 
 
     Message 1 
 
    </div> 
 
    <div class="message"> 
 
     Message 2 
 
    </div> 
 
    <div class="message"> 
 
     Message 3 
 
    </div> 
 
    <div class="message"> 
 
     Message 4 
 
    </div> 
 
    <div class="message"> 
 
     Message 5 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-2"> 
 
    1 of <span class="sliderCount"></span> 
 
    <ul class="pagination"> 
 
     <li> 
 
     <a href="#" id="prev"> 
 
      <</a> 
 
     </li> 
 
     <li><a href="#" id="next">></a></li> 
 
    </ul> 
 
    </div> 
 
</div>

는 업데이트 : 조각 아래 점검 autoplay

$(function() { 
 
    var quotes = $(".message"); 
 
    var quoteIndex = -1; 
 
    $('.sliderCount').text(quotes.length); 
 

 
    function showQuote(change) { 
 
    quoteIndex += change; 
 
    if (quoteIndex < 0) { 
 
     quoteIndex += quotes.length; 
 
    } else if (quoteIndex >= quotes.length) { 
 
     quoteIndex -= quotes.length; 
 
    } 
 
    quotes.stop(true, true).hide().eq(quoteIndex) 
 
     .fadeIn(1) 
 
     .delay(1000); 
 
    } 
 
    showQuote(1); 
 

 
    $('#prev').on('click', function() { 
 
    showQuote(-1); 
 
    }); 
 

 
    $('#next').on('click', function() { 
 
    showQuote(1); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-xs-10"> 
 
    <div class="message"> 
 
     Message 1 
 
    </div> 
 
    <div class="message"> 
 
     Message 2 
 
    </div> 
 
    <div class="message"> 
 
     Message 3 
 
    </div> 
 
    <div class="message"> 
 
     Message 4 
 
    </div> 
 
    <div class="message"> 
 
     Message 5 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-2"> 
 
    1 of <span class="sliderCount"></span> 
 
    <ul class="pagination"> 
 
     <li> 
 
     <a href="#" id="prev"> 
 
      <</a> 
 
     </li> 
 
     <li><a href="#" id="next">></a></li> 
 
    </ul> 
 
    </div> 
 
</div>