html - jquery mouse hover scroll the div -


i trying make plugin. there logos of clients , 2 buttons on both ends ,if user hover on left button logos move right left , if hover on right button logos move left right (till last logo after stop animation) able code below ,but problem after last logo if again hover on button shows white space . same problem previous button if hover on button showing white space .

var kiu = $('#cont1').width();     var screenwidth = $(window).width();     var realwid = kiu - screenwidth;           $(".nextb").hover(function () {             $('#conts').stop().animate({ 'margin-left': '-=' + realwid }, 4500);          }, function () {             $('#conts').stop().animate();         });            $(".prevb").hover(function () {             $('#conts').stop().animate({ 'margin-left': '+=' + realwid }, 4500);         }, function () {             $('#conts').stop().animate();         }) 

html

<div class="cont">                      <div id="cont1" class=" wow fadeinup" data-wow-delay="0.5s">                     <div class="nprev">                  <span class="prevb"><i class="fa fa-angle-left"></i></span>                 <span class="nextb"><i class="fa fa-angle-right"></i></span>                 </div>                         <div class="kk">                             <div class="ki kk1">                             </div>                             <div class="ki kk2">                             </div>                         </div>                         <div id="conts" class="img_cl1">                             <div class="col-md-12 fdfll  scroll-left">                                 <a target="_blank" href="http://www.meraevents.com/">                                     <div class=" cl1 hde ">                                         <img alt="client" src="img/clients/1.png" />                                     </div>                                 </a><a target="_blank" href="http://www.appvirality.com/">                                     <div class=" cl2 hde">                                         <img alt="client" src="img/clients/2.png" />                                     </div>                                 </a>                                 <style>                                  </style>                                 <a target="_blank" href="http://www.customfurnish.com/">                                     <div class=" cl3 hde ">                                         <img style="max-width: 120px !important; margin-top: 20px;" alt="client" src="img/clients/3.png" />                                     </div>                                 </a><a target="_blank" href="http://www.medplusmart.com/home.mart">                                     <div class="  cl4 hde ">                                         <img alt="client" src="img/clients/4.png" />                                     </div>                                 </a><a target="_blank" href="http://www.ishyd.org/">                                     <div class=" cl5 hde ">                                         <img alt="client" src="img/clients/5.png" />                                     </div>                                 </a><a target="_blank" href="http://www.stileeye.com/">                                     <div class=" cl6 hde ">                                         <img alt="client" src="img/clients/6.png" />                                     </div>                                 </a><a target="_blank" href="http://vuego.tv/index.html">                                     <div class=" cl7 hde ">                                         <img alt="client" src="img/clients/7.png" />                                     </div>                                 </a><a target="_blank" href="http://www.veooz.com/">                                     <div class=" cl8 hde ">                                         <img alt="client" src="img/clients/8.png" />                                     </div>                                 </a><a target="_blank" href="http://www.zapevent.com/">                                     <div class=" cl9 hde ">                                         <img alt="client" src="img/clients/9.png" />                                     </div>                                 </a><a target="_blank" href="https://www.doctrz.com/">                                     <div class=" cl10 hde ">                                         <img alt="client" src="img/clients/10.png" />                                     </div>                                 </a><a target="_blank" href="http://reveye.in/">                                     <div class=" cl11 hde ">                                         <img style="margin-top: 0px !important;" alt="client" src="img/clients/11.png" />                                     </div>                                 </a><a target="_blank" href="http://www.leonia.in/">                                     <div class=" hde cl12 ">                                         <img style="margin-top: 0px !important;" alt="client" src="img/clients/12.png" />                                     </div>                                 </a>                             </div>                         </div>                     </div>                 </div> 

i have attached image of output please me . enter image description here


Comments

Popular posts from this blog

facebook - android ACTION_SEND to share with specific application only -

python - Creating a new virtualenv gives a permissions error -

javascript - cocos2d-js draw circle not instantly -