私はカウンタスライダを必要とするjQueryカルーセル/スライダを持っています

Question

Updated Demo : 何か助けが大変ありがとう！

私は垂直のサムネイルを使って完璧に動作しているカルーセル/スライダを開発しましたが、次のカウントをスクロールするたびにスライド数を表示する必要があります。 yahoo.comスライダー（https://www.yahoo.com/news/）のように、矢印が下向き矢印&となります。

HTML：

<div id="featured"> 

     <!-- First Content --> 
     <div id="fragment-1" class="ui-tabs-panel" style=""> 
     <a href="#" target="_blank"> 
      <img src="images/image1.jpg" alt=""> 
      <div class="info"> 
       <h2><a href="#">15+ Excellent High Speed Photographs</a></h2> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#">read more</a></p> 
      </div> 
     </a> 
     </div> 

     <!-- Second Content --> 
     <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""> 
     <a href="#" target="_blank"> 
     <img src="images/image2.jpg" alt=""> 
     <div class="info"> 
      <h2><a href="#">20 Beautiful Long Exposure Photographs</a></h2> 
      <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#">read more</a></p> 
     </div> 
     </a> 
     </div> 

     <!-- Third Content --> 
     <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""> 
     <a href="#" target="_blank"> 
     <img src="images/image3.jpg" alt=""> 
     <div class="info"> 
      <h2><a href="#">35 Amazing Logo Designs</a></h2> 
      <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#">read more</a></p> 
     </div> 
     </a> 
     </div> 
     <!-- Fourth Content --> 
     <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""> 
     <a href="#" target="_blank"> 
     <img src="images/image4.jpg" alt=""> 
     <div class="info"> 
      <h2><a href="#">Create Vintage Photograph in Photoshop</a></h2> 
      <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#">11read more</a></p> 
     </div> 
     </a> 
     </div> 
     <!-- 5 Content --> 
     <div id="fragment-5" class="ui-tabs-panel ui-tabs-hide" style=""> 
     <a href="#" target="_blank"> 
     <img src="images/image4.jpg" alt=""> 
     <div class="info"> 
      <h2><a href="#">Create Vintage Photograph in Photoshop</a></h2> 
      <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#">11read more</a></p> 
     </div> 
     </a> 
     </div> 

     <ul class="ui-tabs-nav"> 
      <li class="ui-tabs-nav-item" id="nav-fragment-1"> 
       <a class="nav-bg-full" href="#fragment-1"> 
        <div class="img-bg hide-for-small" style="background:url('images/image1-small.jpg') no-repeat; width:100%; background-size: 100%; position:relative"> 
         <span>15+ Excellent High Speed Photographs</span> 
        </div> 

        <div class="show-for-small"> 
         <div class="mob-img"> 
          <img src="images/image1-small.jpg" alt="" /> 
         </div> 
         <span>15+ Excellent High Speed Photographs</span> 
        </div> 

       </a> 

      </li> 

      <li class="ui-tabs-nav-item" id="nav-fragment-2"> 
       <a class="nav-bg-full" href="#fragment-2">    
       <div class="img-bg hide-for-small" style="background:url('images/image2-small.jpg') no-repeat; width:100%; background-size: 100%; position:relative"> 
         <span>15+ Excellent High Speed Photographs</span> 
       </div> 


       <div class="show-for-small"> 
        <div class="mob-img"> 
         <img src="images/image2-small.jpg" alt="" /> 
        </div> 
        <span>15+ Excellent High Speed Photographs</span> 
       </div> 

       </a> 
      </li> 

      <li class="ui-tabs-nav-item" id="nav-fragment-3"> 
       <a class="nav-bg-full" href="#fragment-3"> 
        <div class="img-bg hide-for-small" style="background:url('images/image3-small.jpg') no-repeat; width:100%; background-size: 100%; position:relative"> 
         <span>15+ Excellent High Speed Photographs</span> 
        </div> 

        <div class="show-for-small"> 
         <div class="mob-img"> 
          <img src="images/image3-small.jpg" alt="" /> 
         </div> 
         <span>15+ Excellent High Speed Photographs</span> 
        </div> 
       </a> 

      </li> 


      <li class="ui-tabs-nav-item" id="nav-fragment-4"> 
       <a class="nav-bg-full" href="#fragment-4"> 

        <div class="img-bg hide-for-small" style="background:url('images/image4-small.jpg') no-repeat; width:100%; background-size: 100%; position:relative"> 
         <span>15+ Excellent High Speed Photographs</span> 
        </div> 

        <div class="show-for-small"> 
         <div class="mob-img"> 
          <img src="images/image4-small.jpg" alt="" /> 
         </div> 
         <span>15+ Excellent High Speed Photographs</span> 
        </div> 

       </a> 
      </li> 

      <li class="ui-tabs-nav-item" id="nav-fragment-5"> 
       <a class="nav-bg-full" href="#fragment-5"> 

        <div class="img-bg hide-for-small" style="background:url('images/image1-small.jpg') no-repeat; width:100%; background-size: 100%; position:relative"> 
         <span>15+ Excellent High Speed Photographs</span> 
        </div> 

        <div class="show-for-small"> 
         <div class="mob-img"> 
          <img src="images/image4-small.jpg" alt="" /> 
         </div> 
         <span>15+ Excellent High Speed Photographs</span> 
        </div> 

       </a> 
       </li> 

     </ul> 
     <div class="slide-counter"> 
      <span class="s-counter">1-4 of 20</span> 
      <span class="s-arrow"> 
       <div class="up-arrow">Scroll up</div> 
       <div class="down-arrow">Scroll down</div> 
      </span> 
     </div> 

    </div> 

CSS：

#featured { 
    width: 920px; 
    position: relative; 
    border: 1px solid #ccc; 
    height: 400px; 
    background: #fff; 
    margin:0 auto; 
    border-radius: 5px; 
    /*overflow: hidden;*/ 
} 
#featured ul.ui-tabs-nav { 
    position: absolute; 
    top: 0; 
    right: 0; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    width: 300px; 
    height: 100%; 
    overflow-y: auto; 
} 
#featured ul.ui-tabs-nav li { 
    padding: 0; 
    font-size: 12px; 
    color: #666; 
} 
#featured ul.ui-tabs-nav li img { 
    float: left; 
    margin: 2px 5px; 
    background: #fff; 
    padding: 2px; 
    border: 1px solid #eee; 
} 
#featured ul.ui-tabs-nav li span { 
    font-size: 12px; 
    font-family: Verdana; 
    line-height: 18px; 
    padding: 10px; 
    bottom: 0; 
    position: absolute; 
    color:#fff; 
    background: rgba(255,255,255,0); 
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%); 
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(0,0,0,0.5))); 
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%); 
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%); 
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%); 
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', GradientType=0); 
    width: 93%; 
} 
#featured li.ui-tabs-nav-item a { 
    display: block; 
    height: 90px; 
    color: #333; 
    background: #fff; 
    line-height: 20px; 
    text-decoration:none; 
    border-bottom: 1px solid #fff; 
} 
#featured li.ui-tabs-nav-item a:hover { 
    background: #f2f2f2; 
} 
#featured li.ui-tabs-selected { 
    background: url('images/selected-item.gif') top left no-repeat; 
} 
#featured ul.ui-tabs-nav li.ui-tabs-selected a { 
    background: #ccc; 
} 
#featured .ui-tabs-panel { 
    width: 620px; 
    /*height: 250px;*/ 
    background: #999; 
    position: relative; 
} 
#featured .ui-tabs-panel img { 
    width:100%; 
    height:100%; 
} 
#featured .ui-tabs-panel .info { 
    position: absolute; 
    bottom:0; 
    left: 0; 
    height: 70px; 
    background: rgba(255,255,255,0); 
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%); 
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(0,0,0,0.5))); 
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%); 
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%); 
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%); 
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', GradientType=0); 
    width:620px; 
} 
#featured .info h2 { 
    font-size: 18px; 
    font-family: Georgia, serif; 
    color: #fff; 
    padding: 5px; 
    margin: 0; 
    overflow: hidden; 
} 
#featured .info p { 
    margin: 0 5px; 
    font-family: Verdana; 
    font-size: 11px; 
    line-height: 15px; 
    color: #f0f0f0; 
} 
#featured .info a { 
    text-decoration: none; 
    color: #fff; 
    font-size: 18px; 
    font-family: arial; 
} 
#featured .info a:hover { 
    text-decoration: underline; 
} 
#featured .ui-tabs-hide { 
    display: none; 
} 
.ui-tabs-nav::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    background-color: #F5F5F5; 
} 
.ui-tabs-nav::-webkit-scrollbar { 
    width: 6px; 
    background-color: #F5F5F5; 
} 
.ui-tabs-nav::-webkit-scrollbar-thumb { 
    background-color: #000000; 
} 
.show-for-small { 
    display:none !important; 
} 
.img-bg { 
    width: 100%; 
    height: 100%; 
    float: left; 
} 


/*slider count starts*/ 
.slide-counter { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    width: 280px; 
    background: #f00; 
    padding: 10px; 
    color: #fff; 
} 
.s-arrow { 
    float:right; 
} 
.up-arrow { 
    cursor: pointer; 
} 
.down-arrow { 
    cursor: pointer; 
} 
/*slider count ends*/ 


@media only screen and (min-width:300px) and (max-width:760px) { 
    #featured { 
     width: 300px; 
     border-radius: 0; 
    } 
    #featured .ui-tabs-panel { 
     width:300px; 
     height: 150px; 
    } 
    #featured ul.ui-tabs-nav { 
     position: relative; 
     height: auto; 
     overflow-y: auto; 
    } 
    #featured .ui-tabs-panel .info { 
     width:auto; 
    } 
    #featured li.ui-tabs-nav-item a { 
     height:auto; 
     background:#004990; 
     float:left; 
     width:100%; 
    } 
    #featured .info a { 
     font-size: 14px; 
    } 
    .hide-for-small { 
     display:none !important; 
    } 
    .show-for-small { 
     display:block !important; 
    } 
    .mob-img { 
     float:left; 
     width:100px; 
    } 
    #featured ul.ui-tabs-nav li span { 
     position: relative; 
     background: none; 
     float: left; 
     width: 170px; 
    } 
} 

JS：

$（ドキュメント）.ready（関数（）{

$("#featured > ul").tabs({fx:{opacity: "toggle"}})//.tabs("rotate", 5000, true); 
var sliderNavLength = $('.ui-tabs-nav li').length; 

$('.slide-counter').find('.s-counter').text("1 - " + sliderNavLength); 

alert(" sliderNavLength - " + sliderNavLength); 

}）。

Answer 1

私はそれを作った.. をここdemo

DEMO with disabled Arrow keys

JSです：

$(document).ready(function(){ 
     $("#featured").tabs({fx:{opacity: "toggle", duration: "fast"}}); 

     var sliderNavLength = $('.ui-tabs-nav li').length; 
     var sliderNavUlHeight = $(".ui-tabs-nav")[0].scrollHeight; 

     var sliderNavLiHeight = 0; 

     $(".ui-tabs-nav li:lt(3)").each(function() { 
      sliderNavLiHeight += $(this).height(); 
     }); 
     var recCount = 3; 

     $('.ui-tabs-nav li:first-child()').addClass('firstChild'); 
     $('.ui-tabs-nav li:last-child()').addClass('lastChild'); 

     $('.slide-counter').find('.s-counter').text(" of " + sliderNavLength);  

     $('.up-arrow').click(function(e){    

      if (recCount > 3) { 

       var sliderScrollCountMinus = $('.ui-tabs-nav').scrollTop() - sliderNavLiHeight; 
       $('.ui-tabs-nav').animate({ scrollTop: sliderScrollCountMinus }, 1000); 
       $('.counter').val(parseInt($('.counter').val()) - 3); 
       $('.counterSingle').val(parseInt($('.counterSingle').val()) - 3); 

       recCount = recCount - 3; 
      } 

     }); 

     $('.down-arrow').click(function(e){   
      if (sliderNavLength > recCount) { 
       var sliderScrollCountPlus = $('.ui-tabs-nav').scrollTop() + sliderNavLiHeight; 
       $('.ui-tabs-nav').animate({ scrollTop: sliderScrollCountPlus }, 1000); 

       $('.counter').val(parseInt($('.counter').val()) + 3); 
       $('.counterSingle').val(parseInt($('.counterSingle').val()) + 3); 

       recCount = recCount + 3;    
      }   
     }); 

     });