1. Zuhause
  2. Frage und Antwort
  3. Ich habe ein jQuery Karussell/Schieberegler, der Zähler Schieberegler benötigt

Ich habe ein jQuery Karussell/Schieberegler, der Zähler Schieberegler benötigt

2017-04-04 4 views
2

Updated Demo : Jede Hilfe wird sehr geschätzt!Ich habe ein jQuery Karussell/Schieberegler, der Zähler Schieberegler benötigt

Ich habe ein Karussell/Slider mit vertikalen Thumbnails entwickelt, das perfekt funktioniert, aber ich habe eine extra Anforderung, dass die Anzahl der Slides angezeigt werden muss, wann immer der Benutzer scrollt, muss der nächste Countdown aktualisiert werden. genau wie yahoo.com Schieberegler (https://www.yahoo.com/news/) mit bis & Pfeile nach unten.

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:

$ (document) .ready (function() {

$("#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);

});

Quelle

2017-04-04 Syed Azam

Antwort

1

ich habe es gemacht .. hier ist die 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;    
      }   
     }); 

     });

Quelle

2017-04-05 10:43:50

Verwandte Themen

 Verwandte Themen