CODEWITHSUNDEEP
jqueryhtmlcss
ashi
ashi

Reputation: 108

JQuery - on hover move images left to right in a loop

In order to make a rotating carousel with JQuery, I am trying to write a script where if you hover an element, the images in that element will move left to right in an endless loop.

I have half achieved the goal with the below code, however it's not looping, it always going left. How can i make this code working ?

var $content = $('#contS'); // Cache your 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 a {
    color:White !important;
    border:1px solid #ff2c7e;
    border-radius:6px;
    font-size:13px;
}
.navigation ul li a {
    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 a 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;
}
a {
    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 a {
    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 a {
    color:White !important;
}
.map {
    min-height:100px;
}
.msgg {
    min-height:100px;
    background-color:#f3f3f3;
}
.link_social_connect li a 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 a {
    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 a {
    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 a {
    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) and (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) and (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>

Jsfiddle

Upvotes: 2

Views: 1257

Answers (3)

North
North

Reputation: 1434

Try This:

     var $content = $('#contS'); // Cache your selectors!
$(".cont").hover(
        function loop() {
            var first_node = $('.hde')[0];
            if(-parseInt($content.css('marginLeft'), 10)>=$('.hde').width()) {
                $content.css('marginLeft', '+=' + $('.hde').width());
                $('.hde')[0].remove();
                $('.hde').last().after(first_node);
            }
            $content.stop().animate({ marginLeft: '-=20' }, 50, 'linear', loop);
        },
        function stop() {
            $content.stop();
        });

When the marginLeft greater than node width, move the first node to the last.

Check here: https://jsfiddle.net/m0ajvjgL

Upvotes: 0

Ludovic Feltz
Ludovic Feltz

Reputation: 11916

Here is your solution:

var $content = $('#imgsList'); // Cache your selectors!
$(".cont").hover( function loop() {
    $content.stop().animate({  marginLeft: '-=1600' }, 5000, 'linear', function(){
        $content.css({ marginLeft : "0px" });
        loop();
    });
}, function stop() {
    $content.stop();
});

You just need to scrool through your entire image set then reset the margin left to 0px.

fiddle

Upvotes: 1

Reena Parekh
Reena Parekh

Reputation: 941

Try this:

var $content = $('#contS'); // Cache your selectors!
var ExceedFlag = false;
var sign = '+';
$(".cont").hover( function loop() {
    var test = $content.css('marginLeft');    
    test = parseInt(test, 10);

    if(ExceedFlag == false) {
        if(test >= $(window).width()){               
             sign = '-';            
        } 
    }

    var marginLeftText = sign + "=20";

       $content.stop().animate({
           marginLeft: marginLeftText
       }, 50, 'linear', loop);        


}, function stop() {
    $content.stop();
});

As soon as marginLeft exceeds window width it will reverse the direction of loop and images will come back in screen.

Check here: http://jsfiddle.net/gchgftxh/3/

Hope this helps!!

Upvotes: 0

Related Questions