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 .
Comments
Post a Comment