in order make rotating carousel jquery, trying write script if hover element, images in element move left right in endless loop.
i have half achieved goal below code, it's not looping, going left. how can make code working ?
var $content = $('#conts'); // cache selectors! $(".cont").hover( function loop() { $content.stop().animate({ marginleft: '-=20' }, 50, 'linear', loop); }, function stop() { $content.stop(); });@font-face { font-family: 'fira'; src: url('../font/fira-webfont.eot'); src: url('../font/fira-webfont.eot?#iefix') format('embedded-opentype'), url('../font/fira-webfont.woff') format('woff'), url('../font/fira-webfont.ttf') format('truetype'), url('../font/fira-webfont.svg#abril_fatfaceregular') format('svg'); font-weight: normal; font-style: normal; } body { background-color:white; height:100%; width:100%; padding:0px; margin:0px; font-family:'lato', sans-serif !important; } ul { list-style-type:none; padding:0px; margin:0px; } .hde img { width:80px; margin:18px 0px; } #content { margin-top:10px; float:left; width:100%; } #content img { width:100%; } li { float:left; } .homepage, .bgpink { background-color:#ff2c7e !important; color:white; } .layout { float:left; width:100%; } h1 { margin-top: 20%; left: 0px; text-align: left; font-weight: bold; letter-spacing: 1px; font-family:'lato', sans-serif !important; color:#ffffcc; } .bottom_div { text-align:left; width:100%; } .logo_on_homepage { margin-top:400px; text-align:center; color:white; } .logo_on_homepage img { max-width: 188px; margin-bottom: 10px; margin-left: -3px; } .navigation ul li { color:white !important; border:1px solid #ff2c7e; border-radius:6px; font-size:13px; } .navigation ul li { margin:0px 1px; padding: 5px 11px; } a:hover { text-decoration:none; } .navigation { margin: 0px auto; width: 100%; text-align: center; max-width: 233px; margin-top: 8px; font-size: 18px; } .navigation ul li a:hover { border:1px solid #ffffff !important; border-radius:6px; } .copyright { vertical-align: 0px; margin-top: 7px; margin-left: 15px; font-size: 12px; letter-spacing: 0.2px; display: inline-block; } .bottom_div ul li img { width:26px; vertical-align:top !important; } .linkedinicon { width:26px; } .fbicon { width: 17px !important; margin-top: 5px; } /*----------------------------stories--------------------------------------*/ .container { width:90%; margin:0px auto; } .wholeview { overflow:hidden; box-shadow:0 1px 2px rgba(0, 0, 0, 0.08); -o-box-shadow:0 1px 2px rgba(0, 0, 0, 0.08); -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.08); -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.08); -ms-box-shadow:0 1px 2px rgba(0, 0, 0, 0.08); width:100%; margin-top:0px; padding:0px; height:auto; } /*.wholeview:hover { border-bottom:1px solid #ff2c7e; transition:all 0.5s; -o-transition:all 0.5s; -moz-transition:all 0.5s; -webkit-transition:all 0.5s; -ms-transition:all 0.5s; }*/ .logomid { text-align: center; margin-top: 21px; margin-bottom: 5px; margin-left: 35px; } { text-decoration:none !important; } .commonnavigation { width: auto; margin: 0px auto; font-size: 14px; margin: 4px auto; display: table; margin-top: 9px; } .commonnavigation ul li { text-align: center; margin: 0px 0px; padding-bottom: 23px; font-size: 14px; } .commonnavigation ul li { color:#ff2c7e; } .active { font-weight:bold; } .imagesec { cursor:pointer; } .imagesec img { width: 100%; } .wholeview h3 { font-size: 14px; text-align: center; line-height: 18px; text-transform: uppercase; color: #333333; display: inline-block; width:100%; min-height:45px; } .overlaysec { cursor: pointer; background-size:100%; z-index: 9999; display:none; } /* .img1hover { background-image: url(../img/work/1hover.png); } .img2hover { background-image: url(../img/work/2hover.png); } .img3hover { background-image: url(../img/work/3hover.png); } .img4hover { background-image: url(../img/work/4hover.png); } .img5hover { background-image: url(../img/work/5hover.png); } .img6hover { background-image: url(../img/work/6hover.png); } .img7hover { background-image: url(../img/work/7hover.png); } .img8hover { background-image: url(../img/work/1hover.png); } .img9hover { background-image: url(../img/work/9hover.png); } .img10hover { background-image: url(../img/work/10hover.png); } .img11hover { background-image: url(../img/work/11hover.png); } .img12hover { background-image: url(../img/work/12hover.png); } */ .circlebox { height: 70px; width: 70px; margin: 0px auto; margin-top: 39%; background-image: url(../img/thumb.png); background-size: 60px; background-position: center; background-repeat:no-repeat; } .start { text-align:center; } .always { display: none; position: fixed; background-color: white; } .total { float:left; width:100%; margin-bottom:20px; } .dnn { opacity:0; transition:all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; -ms-transition:all 0.5s; } .dbb { opacity:1; transition:all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; -ms-transition:all 0.5s; } .kkkw { float: left; width: 100%; background-color: white; z-index: 999999; } .kkkwfn { margin: 0px auto; text-align: center; left: 50%; margin-left: 0px; z-index: 999999; } .bgw { width: 100%; background-color: white; float: left; position: fixed; z-index: 999999; box-shadow:0 0 6px rgba(0, 0, 0, 0.25); -o-box-shadow:0 0 6px rgba(0, 0, 0, 0.25); -moz-box-shadow:0 0 6px rgba(0, 0, 0, 0.25); -ms-box-shadow:0 0 6px rgba(0, 0, 0, 0.25); -webkit-box-shadow:0 0 6px rgba(0, 0, 0, 0.25); } /*.kkkwact { background-color:white; margin:0px auto; position:fixed; top:0px; transition:top 1s; -o-transition:top 1s; -moz-transition:top 1s; -webkit-transition:top 1s; -ms-transition:top 1s; }*/ .kiu { position: absolute; bottom: 0px; left: 0px; right: 0px; } .stories h1 { margin:0px; padding:0px; color:gray; text-align:center; font-weight:normal; font-family:'lato', sans-serif !important; color:#8c8c8c; margin-top:64px; font-size:44px; font-weight:bold; margin-bottom:60px; margin-top:40px; text-transform:uppercase; } .mobilenavi { height:60px; background-color:white; text-align:left; position:fixed; width:100%; z-index:999999; margin-bottom:20px; } .mobilenavi span { font-size: 26px; margin-left: 14px; color: #ff2c7e; margin-top: 9px; float: left; } .mobilenavi img { width: 23px; margin-top: 21px; margin-left: 20px; float: left; } /*----------------------people page-----------------------*/ .people { margin-top:25px; } .people h1 { margin: 0px; padding: 0px; color: #ff2c7e; font-size: 53px; text-align: right; margin-top: 40px; font-weight: bold; letter-spacing: 0.5px; text-transform: uppercase; line-height: 52px; font-family:'lato', sans-serif !important; } .logo_people { margin-top:30px; } .uimg img { width: 100%; float: left; } .block_for_user { margin-top:30px; } .block_for_user h2 { margin-top: 0px; color:#333333; } .social_round img { width:100%; max-width:35px; margin-right:5px; } .people_div { margin-top:20px; } /*-----------------------contact page-----------------------------------*/ .outer_head { background-color:#333333; float:left; width:100%; } .contact_black { color:white; font-family:'lato', sans-serif !important; padding-top:42px; } .fr { text-align:right; } .fc { text-align:center; } .fl { text-align:left; } .big_text { font-family:'lato', sans-serif !important; font-size: 45px; color: white; line-height: 96px; font-weight: lighter; letter-spacing: 0.5px; margin-bottom: 32px; } .wt li { color:white !important; } .map { min-height:100px; } .msgg { min-height:100px; background-color:#f3f3f3; } .link_social_connect li img { max-width: 35px; margin: 0px 0px; margin-right: 5px; } .contact_body input { padding: 8px; margin-top: 5px; width: 100%; float: left; color: #808080; margin-bottom: 15px; } .sendbutton { background-color: #ff2c7e; color: white; text-transform: uppercase; text-align: center; width: 210px; padding: 6px 0px; margin-top: 20px; float: left; margin-left: 0px; font-size: 12px; cursor: pointer; letter-spacing: 1.5px; } .contact_body textarea { margin-top: 4px; padding:4px; width: 100%; height: 120px; color: #808080; font-family:'lato', sans-serif !important; } .msgg span { color:#808080; } .contact_body h3 { text-align: center; margin: 37px 0px; font-size: 35px; font-weight: lighter; font-family:'lato', sans-serif !important; letter-spacing: 0.5px; color: #808080; } .limi { display: inline-block; float: right; margin-right: 38px; } .mob_black { background-color:#333333; } .as1 { text-align:right; } .as2 { text-align:center; } .as3 { text-align:left; } .col-md-5 { position:static !important; } .map-container { position: relative; padding-bottom: 26.25%; padding-top: 30px; height: 0; overflow: hidden; } .map-container iframe, .map-container object, .map-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .pd30as { padding:0px 30px !important; } /*----------------------mobi navigation------------------------*/ .linknav { top:60px; height:auto; width:100%; background-color:white; position:fixed; z-index:99999999; color:#ff2c7e; font-family:'lato', sans-serif !important; } .linknav ul li { float:left; width:100%; margin-left:20px; } .linknav ul li { color: #ff2c7e; font-family:'lato', sans-serif !important; font-size: 21px; line-height: 55px; font-weight: normal; letter-spacing: 0.5px; } .linknav { display:none; } .click_nav { cursor:pointer; } .pad_se li { margin: 0px 12px; font-family:'lato', sans-serif !important; font-size: 48px; letter-spacing: 0.5px; text-transform: uppercase; margin-left: 17px; } .pad_se { width: auto; display: table; margin: 0px auto; padding-left:35px; } .commonnavigation ul li { border: 1px solid transparent; border-radius: 6px; padding:5px 11px; margin-top:10px; } .commonnavigation ul li a:hover { border: 1px solid #ff2c7e; border-radius: 6px; padding:5px 11px; } .commonnavigation ul li > .active { border-radius: 0px; padding: 5px 11px; border-bottom: 2px dotted #ff2c7c; } .cnb ul li { border: 1px solid #333333; border-radius: 6px; padding:5px 11px; margin-top:10px; } .cnb ul li a:hover { border: 1px solid white; border-radius: 6px; padding:5px 11px; } @media (min-width:1023px) , (max-width:4000px) { .threecolumn { width:28%; } .fourpointfive { width:35%; } } .hde { height:67px; overflow:hidden; margin-top:9px; } .img_cl1 .hde img { width: 112px; margin: 18px 0px; } .cl1 img:hover { margin-top:-35px; } .cl2 img:hover { margin-top:-34px; } .hde1 { visibility:hidden !important; } .kkkwact { display:none !important; } .cl3 img:hover { margin-top:-35px; } .cl4 img:hover { margin-top:-36px; } .cl5 img:hover { margin-top:-48px; } .cl6 img:hover { margin-top:-45px; } .cl7 img:hover { margin-top:-34px; } .cl8 img:hover { margin-top:-47px; } .cl9 img:hover { margin-top:-51px; } .cl10 img:hover { margin-top:-51px; } .cl11 img:hover { margin-top:-37px; } .cl12 img:hover { margin-top:-37px; } /*.imagesecac { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } */ .imagesec img { -webkit-transition: -webkit-transform 0.4s ease; -moz-transition: -moz-transform 0.4s ease; -o-transition: -o-transform 0.4s ease; transition: transform 0.4s ease; } .imagesec img { overflow: hidden; width: 100%; height: auto; } .later_change { padding: 0px !important; position: fixed !important; top: 0px !important; margin-top: -61px !important; } .loader_d { width:100%; position:absolute; height:auto; min-height:100%; z-index:999999; background-color:white; text-align:center; } .icon_nnp2 h3 { text-transform:uppercase; } .icon_nnp2 h3 span { text-transform:lowercase; float:left; margin-top:-6px; } .link_social_connect { float:left; margin-top:3px; } .user1 { background-position: right; background-size: 21px; background-image: url('../img/user.png'); background-repeat: no-repeat; border:1px solid #808080; } .phone { background-position: right; background-size: 19px; background-image: url('../img/phone.png'); background-repeat: no-repeat; border:1px solid #808080; } .envelop { background-position: right; background-size: 25px; background-image: url('../img/envelop.png'); background-repeat: no-repeat; border:1px solid #808080; } .address { font-family: inherit; text-align: right; padding: 0px; margin: 0px; margin-top: 20px; font-size: 16px; font-weight: normal; } .fbadd { width: 25px; vertical-align: text-bottom; display: inline-block; text-align: left; margin-right: 5px; } .pnk { color:#ff2c7e; } .threewords { } .threewords ul { padding:0px; display: table; text-align: center; margin: 0px auto; margin-top:35px; } .threewords ul li { padding: 0px; float: left; font-family:'lato', sans-serif !important; color: white !important; margin: 0px 10px; font-size: 78px; font-weight: lighter; letter-spacing: 0px; } .headtextlines ul { margin-left:28px; } .headtextlines ul li { width: 100%; text-align: center; color: white; font-family:'lato', sans-serif; font-size: 14px; margin-top: 20px; line-height: 18px; } .wpb_wrapper { } .wpb_wrapper img { width:auto !important; } .itemboxphilo { /*background-color: #e1e1e1;*/ background-image:url('../img/bg_trans.png'); background-repeat:repeat; width: 100%; text-align: center; padding: 0px 10px; margin-top: 25px; cursor: pointer; } .itemboxphilo img { width:auto; margin:0px auto; max-width:90%; } .itmbb { float:left; width:100%; } .itmbb h3 { float: left; width: 100%; font-size: 22px; padding: 0px 22px; margin-top: 32px; margin-bottom: 26px; text-transform: uppercase; line-height: 29px; color:white; } .itmbb h3:hover { color:white !important; } .philohd h1 { margin-top: 70px; margin-bottom: 0px; } .mainimg img { width:100%; } .whole_view { overflow:hidden; } .hover_shot { position: absolute; background-color: #ff2c7c; z-index: 99999; top: 0px; width: 90%; text-align: center; opacity: 0.8; color: white; margin-top:2% 0%; margin-top:40px; } .hover_shot h3 { margin: 0px; padding: 0px; font-size: 30px; margin-top: 170px; color: white; text-align: center; width: 100%; vertical-align: middle; line-height:35px; } .hover_shot p { font-size: 18px; letter-spacing: 0.5px; margin: 0px; padding: 0px; margin-top: -15px; letter-spacing: 0.8px; } .bgtxt { font-size: 44px !important; font-weight: bold !important; line-height: 51px !important; } #main .vc_text_separator div { background-color:transparent !important; color:#333; } .horilogo img { width:100%; } @media (min-width:100px) , (max-width:800px) { .wpb_wrapper img { width:100% !important; height:auto !important; } } .img_cl1 .hde { float:left !important; width:200px !important; text-align:center; } .fdfll { width:2455px; float:left; overflow:hidden; } #cont1 { float:left; } #conts { width:100%; float:left; } .wholeview { width:90%; margin-top:40px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="cont"> <div id="cont1"> <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="http://commons.wikimedia.org/wiki/file:vanamo_logo.png" /> </div> </a> <a target="_blank" href="http://www.appvirality.com/"> <div class=" cl2 hde"> <img alt="client" src="http://commons.wikimedia.org/wiki/file:vanamo_logo.png" /> </div> </a> <a target="_blank" href="http://www.customfurnish.com/"> <div class=" cl3 hde "> <img alt="client" src="http://commons.wikimedia.org/wiki/file:vanamo_logo.png" /> </div> </a> <a target="_blank" href="http://www.medplusmart.com/home.mart"> <div class=" cl4 hde "> <img alt="client" src="http://commons.wikimedia.org/wiki/file:vanamo_logo.png" /> </div> </a> <a target="_blank" href="http://www.ishyd.org/"> <div class=" cl5 hde "> <img alt="client" src="http://commons.wikimedia.org/wiki/file:vanamo_logo.png" /> </div> </a> <a target="_blank" href="http://www.stileeye.com/"> <div class=" cl6 hde "> <img alt="client" src="http://commons.wikimedia.org/wiki/file:vanamo_logo.png" /> </div> </a> <a target="_blank" href="http://vuego.tv/index.html"> <div class=" cl7 hde "> <img alt="client" src="http://commons.wikimedia.org/wiki/file:vanamo_logo.png" /> </div> </a> <a target="_blank" href="http://www.veooz.com/"> <div class=" cl8 hde "> <img alt="client" src="http://commons.wikimedia.org/wiki/file:vanamo_logo.png" /> </div> </a> <a target="_blank" href="http://www.zapevent.com/"> <div class=" cl9 hde "> <img alt="client" src="http://commons.wikimedia.org/wiki/file:vanamo_logo.png" /> </div> </a> <a target="_blank" href="https://www.doctrz.com/"> <div class=" cl10 hde "> <img alt="client" src="http://commons.wikimedia.org/wiki/file:vanamo_logo.png" /> </div> </a> <a target="_blank" href="http://reveye.in/"> <div class=" cl11 hde "> <img alt="client" src="http://commons.wikimedia.org/wiki/file:vanamo_logo.png" /> </div> </a> <a target="_blank" href="http://www.leonia.in/"> <div class=" hde cl12 "> <img alt="client" src="http://commons.wikimedia.org/wiki/file:vanamo_logo.png" /> </div> </a> </div> </div> </div> </div>
here solution:
var $content = $('#imgslist'); // cache selectors! $(".cont").hover( function loop() { $content.stop().animate({ marginleft: '-=1600' }, 5000, 'linear', function(){ $content.css({ marginleft : "0px" }); loop(); }); }, function stop() { $content.stop(); }); you need scrool through entire image set reset margin left 0px.
Comments
Post a Comment