I want to make a made this thumbnail scroll bar for woocommerce But it is not working correct and I can't get it to work. This is for woocommerce product gallery so I can't really make changes to the html thats why there are ol
Is it also possible to have te scrollbar scroll to the item that is clicked?
$(document).ready(function() {
var scrollTo = 0;
$('.flex-control-nav').on('click', "img", function() {
var activeItem = $('li.active');
var selectedItem = $(this).parent()
var activeIndex = $('li').index(activeItem);
var selectedIndex = $('li').index(selectedItem);
scrollTo = $('.flex-control-nav li').scrollLeft() -selectedItem.position().left + ($('.flex-control-nav').width() / 2) - (selectedItem.width() / 2);
$('.flex-control-nav').css('transform', 'translateX(' + scrollTo + 'px)');
activeItem.removeClass('active');
selectedItem.addClass('active');
});
});
.flex-control-thumbs li {
display: flex;
overflow-x: visible;
flex: 1 0 40%;
}
ol>li {
padding: 2px;
}
li {
width: 50px;
margin: 0;
cursor: pointer;
height: 100px;
}
img{
background: blue;
}
ol{
list-style: none;
}
.flex-control-thumbs {
display: flex;
flex-wrap: nowrap;
overflow-x: scroll;
margin: 0 50px;
}
ul {
margin: 25px -2px 0;
max-width: 68%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<ol class="flex-control-nav flex-control-thumbs">
<li>
<img src="" alt="img" class="" draggable="false">
</li>
<li>
<img src="" alt="img" class="" draggable="false">
</li>
<li>
<img src="" alt="img" class="" draggable="false">
</li>
<li>
<img src="" alt="img" class="" draggable="false">
</li>
<li>
<img src="" alt="img" class="" draggable="false">
</li>
<li>
<img src="" alt="img" class="" draggable="false">
</li>
</ol>
Related
I am trying to make my slider slide to the next 3 slides in my carousel.How it should work is the first 3 images should show, and then when you click the next arrow the next 3 images should show.
I am not sure where I am going wrong. Basically the opacity of the last 3 pictures should be 0 until you click next then the opacity becomes 1 for the next 3 pictures.
This is what I have done so far:
HTML:
<section>
<div class="immigration-service">
<h1>Cross-border financial and immigration services</h1>
<div class="carousel">
<ul>
<li>
<img
class="slide"
src="images/British citizenship and Immigration.jpg"
alt="British citizenship and Immigration Image"
/>
</li>
<li>
<img
class="slide"
src="images/Australian Migration.jpg"
alt="Australian Migration Image"
/>
</li>
<li>
<img
class="slide"
src="images/Citizenship by investment.jpg"
alt="Citizenship by investment Image"
/>
</li>
<li>
<img
class="slide-2"
src="images/British citizenship and Immigration.jpg"
alt="British citizenship and Immigration Image"
/>
</li>
<li>
<img
class="slide-2"
src="images/Australian Migration.jpg"
alt="Australian Migration Image"
/>
</li>
<li>
<img
class="slide-2"
src="images/Citizenship by investment.jpg"
alt="Citizenship by investment Image"
/>
</li>
</ul>
<button class="button prev" data-carousel-button="prev">
<
</button>
<button class="button next" data-carousel-button="next">
>
</button>
</div>
</div>
</section>
CSS:
.immigration-service
{
margin-top: 34vh;
}
.immigration-service h1
{
padding-top: 113px;
text-align: center;
}
.immigration-service ul
{
display: flex;
margin:0;
padding:0;
overflow:hidden;
}
.immigration-service li
{
display: block;
list-style-type: none;
}
.button {
display: flex;
font-size: 60px;
align-items: center; justify-content: center;
color: #115577;
width: 30px;
height: 50px;
border: 0px;
}
button.prev {
position: absolute;
left: 0;
top: 106vw;
}
button.next {
position: absolute;
right: 55vw;
top: 106vw;
}
Javascript:
let images = document.querySelectorAll('ul li');
let index = 0;
window.show = function(increase) {
index = index + increase;
index = Math.min(Math.max(index,0), images.length-1);
images[index].scrollIntoView({behavior: 'smooth'});
}
What I am looking to achieve is to make the items in the list continue scrolling even at the last item in both directions. i.e: Let it continue to scroll starting from the first OR last item all over again. I have worked out the HTML and CSS but don't know what method to use in js/jquery. I'd really appreciate any help or a good pointer.
Here is the HTML
<html>
<div class="container">
<ul class="horscroll" id="autoscrollR">
<li>
<a href="#myGallery" data-slide-to="0" data-tooltip="acci"><img
class="img-thumbnail"
src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=1" >
</a>
</li>
<li>
<a href="#myGallery2" data-slide-to="1" data-tooltip="aiico"><img
class="img-thumbnail"
src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2">
</a>
</li>
<li>
<a href="#myGallery3" data-slide-to="2" data-tooltip="asaba"><img
class="img-thumbnail"
src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=3">
</a>
</li>
...........
</ul>
</div> </html>
And the CSS is used is very basic for an example:
.container{
max-width: 100%;
}
.horscroll {
display: -webkit-inline-box;
width: 100%;
overflow: auto;
margin:10px;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
.img-thumbnail {
margin: 5px 5px 0px 5px;
border: 1px solid #;
border-radius: 4px;
}
Now the Js function to use is where I am stuck.
Here is the FIDDLE LINK
So you are looking for something like this:-
var bgWidth = 350; //Max-width of <li> you would like to set.
var scrollPos = Math.ceil($('body').width() / 20);
$(document).ready(function() {
$('body').width(bgWidth + $(window).width());
$(window).scroll(function() {
if ($(window).scrollLeft() >= ($('body').width() - $(window).width())) {
$(window).scrollLeft(1 + scrollPos / 4);
} else if ($(window).scrollLeft() == 0) {
$(window).scrollLeft($('body').width() - $(window).width() - scrollPos / 4);
}
});
});
$(window).resize(function() {
$('body').width(bgWidth + $(window).width());
});
.container {
max-width: 100%;
}
.horscroll {
display: -webkit-inline-box;
width: 100%;
overflow: auto;
margin: 10px;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
.img-thumbnail {
margin: 5px 5px 0px 5px;
border: 1px solid #;
border-radius: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul class="horscroll" id="autoscrollR">
<li>
<a href="#myGallery" data-slide-to="0" data-tooltip="acci"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=1">
</a>
</li>
<li>
<a href="#myGallery2" data-slide-to="1" data-tooltip="aiico"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2">
</a>
</li>
<li>
<a href="#myGallery3" data-slide-to="2" data-tooltip="asaba"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=3">
</a>
</li>
<li>
<img class="img-thumbnail " src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=4 ">
</li>
<li>
<a href="#myGallery" data-slide-to="0" data-tooltip="acci"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=5">
</a>
</li>
<li>
<a href="#myGallery2" data-slide-to="1" data-tooltip="aiico"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=6">
</a>
</li>
<li>
<a href="#myGallery3" data-slide-to="2" data-tooltip="asaba"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=7">
</a>
</li>
<li>
<img class="img-thumbnail " src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=8 ">
</li>
</ul>
</div>
Hope this helps you!
i have a typical carousel when i click left button if marginLeft is 0 it doesn't slide but i don't know what limited value to set for the slider when i click right button.
i tried calculating the images width and the margin space between them to set the limit value for the right button so slider doesn't slide past it but that doesn't work if you see it on another device because it's width is higher.
codepen : https://codepen.io/anon/pen/bXBaYW?editors=1010
// caoursel
const carousel = document.getElementById('carousel');
const leftArrow = carousel.querySelector('.carousel-left-arrow');
const rightArrow = carousel.querySelector('.carousel-right-arrow');
const slides = carousel.querySelector('.slides');
const slideImgs = carousel.querySelectorAll('.slide img');
let marginLeft = 0;
// works fine
function scrollLeft() {
if (getComputedStyle(slides).marginLeft >= '0px') return;
marginLeft += 310;
slides.style.marginLeft = marginLeft + "px";
}
// need to set right slide a limited value.
function scrollRight() {
if (getComputedStyle(slides).marginLeft <= '-1240px') return; // dont scroll past this value
marginLeft -= 310;
slides.style.marginLeft = marginLeft + "px";
}
leftArrow.addEventListener('click', scrollLeft);
rightArrow.addEventListener('click', scrollRight);
i want the slider to stop sliding when i reach the last image.
What you need to do is to not hardcode the width of the .slides container in CSS and JS.
Thus allowing you to dynamically compute the width of the .slides container, and the remaining space you can scroll/slide.
Below is an illustration of the variable and their values in relation to the whole component.
remainingSpaceToScroll will tell you how much space you have on the right, so you can not exceed the limit. The value of it can be found with simple math, by subtracting the sum of parentWidth and currentScroll from the value in scrollWidth.
Here is the code from your example updated so you can inspect.
I've removed the space between the slides for the simplicity sake.
https://codepen.io/anon/pen/BXpaNv
const carousel = document.getElementById("carousel");
const leftArrow = carousel.querySelector(".carousel-left-arrow");
const rightArrow = carousel.querySelector(".carousel-right-arrow");
const slides = carousel.querySelector(".slides");
const slideImgs = carousel.querySelectorAll(".slide img");
let marginLeft = 0;
let carouselImageWidth = 300;
function scrollLeft() {
let parentWidth = carousel.offsetWidth;
let scrollWidth = parseInt(getComputedStyle(slides).width, 10);
let currentScroll = Math.abs(
parseInt(getComputedStyle(slides).marginLeft, 10)
);
let remainingSpaceToScroll = currentScroll;
if (remainingSpaceToScroll <= 0) {
return;
} else if (remainingSpaceToScroll >= carouselImageWidth) {
marginLeft = -(currentScroll - carouselImageWidth);
} else {
marginLeft = -(currentScroll - remainingSpaceToScroll);
}
slides.style.marginLeft = marginLeft + "px";
}
function scrollRight() {
let parentWidth = carousel.offsetWidth;
let scrollWidth = parseInt(getComputedStyle(slides).width, 10);
let currentScroll = Math.abs(
parseInt(getComputedStyle(slides).marginLeft, 10)
);
let remainingSpaceToScroll = scrollWidth - (parentWidth + currentScroll);
if (remainingSpaceToScroll <= 0) {
return;
} else if (remainingSpaceToScroll >= carouselImageWidth) {
marginLeft = -(currentScroll + carouselImageWidth);
} else {
marginLeft = -(currentScroll + remainingSpaceToScroll);
}
slides.style.marginLeft = marginLeft + "px";
}
leftArrow.addEventListener("click", scrollLeft);
rightArrow.addEventListener("click", scrollRight);
HTML below:
<p>click right arrow till end</p>
<div id="carousel">
<span class="carousel-left-arrow arrow"><</span>
<ul class="slides">
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
</ul>
<span class="carousel-right-arrow arrow">></span>
</div>
CSS below:
#carousel {
width: 90%;
margin: 0 auto;
margin-top: 20px;
overflow: hidden;
position: relative;
height: 122px;
}
#carousel .arrow {
position: absolute;
top: 32%;
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid #000;
border-radius: 0%;
cursor: pointer;
width: 20px;
z-index: 1;
}
#carousel .arrow img {
margin-top: 10px;
max-width: 100%;
}
#carousel .carousel-left-arrow {
width: 25px;
left: 0;
margin-left: 5px;
}
#carousel .carousel-right-arrow {
right: 0;
width: 25px;
}
#carousel .slides {
overflow: hidden;
list-style: none;
padding: 0;
transition: 0.2s;
margin-left: 0;
margin-right: 0;
border: 1px solid red;
height: 120px;
position: absolute;
left: 0;
top: 0;
margin: 0;
display: flex;
}
#carousel .slide {
float: left;
margin: 0;
text-decoration: none;
color: whitesmoke;
}
#carousel .slide > a {
display: block;
}
#carousel .slides img {
width: 300px;
display: block;
}
$().ready(function() {
// Case : 1
$("li.products").hover(function() {
$(this).parents(".cotnainer-fluid").next().toggleClass("show");
//$("#category-list").css("opacity","1 !important");
});
})
div.banner {
width: 100%;
height: 379px;
}
div.banner>.row {
padding: 0 35px;
}
/* .menu{
background: transparent;
opacity: 0.5;
} */
.menu {
margin-right: 0;
margin-left: 0;
}
#menu-items {
background: #121212;
opacity: 0.7;
}
#menu-items {
padding: 22px;
margin: 0 25px;
text-align: center;
border-radius: 0 0 4px 4px;
}
ul#menu-items li {
list-style: none;
display: inline;
color: #939598;
font: normal 12px/16px Gotham-Medium;
}
ul#menu-items li a {
padding-bottom: 20px;
}
ul#menu-items li>a:hover {
color: #fff;
border-bottom: 4px solid #76bd1c;
}
li.item {
padding: 25px;
}
li.search {
margin-left: 145px;
}
#category-list {
width: 900px;
height: 180px;
margin: 0 auto;
/*
margin-top: -380px;
*/
background-color: #f7f6f5;
position: relative;
top: -380px;
z-index: -1;
display: none;
}
.show {
display: block;
}
/* li.products:hover #category-list{
display: block;
} */
#category-list ul li {
list-style: none;
display: inline-block;
}
.category-menu {
padding-top: 80px;
}
.category-menu {
font: normal 12px/16px Gotham-Medium;
color: #603913;
}
#category-menu-items {
margin-top: 5px;
}
#category-menu-items li {
text-align: center;
}
.padding-left60 {
padding-left: 60px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<srcipt src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<div class="cotnainer-fluid" style="margin-top: 40px;">
<div class="banner">
<div class="row menu">
<ul id="menu-items">
<li class="item">HOME
</li>
<li class="item">ABOUT US
</li>
<li class="item products dropdown">PRODUCTS
</li>
<li class="item">STORE
</li>
<li class="item">CONTACT
</li>
<li class="item">LOGIN
</li>
<li class="item search"><i class="search-icon-header" style="font-size: 16px;"></i>
</li>
<li class="item basket"><i class="glyphicon glyphicon-shopping-cart" style="font-size: 16px;"></i>
</li>
</ul>
</div>
<h1 class="page-title">Some Title</h1>
</div>
</div>
<!-- End Nav items -->
<div id="category-list">
<div class="row category-menu">
<ul id="category-menu-items">
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-biopesticides.png" alt="">
</p>
<p>BIOPESTIDES</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-nutrients.png" alt="">
</p>
<p>NUTRIENTS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-biofertilizers.png" alt="">
</p>
<p>BIOFERTILIZERS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-seeds.png" alt="">
</p>
<p>SEEDS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-garden_Acc.png" alt="">
</p>
<p>GARDEN ACCESSORIES</p>
</a>
</li>
</ul>
</div>
</div>
I have a list of items in navbar, now on hovering on one of the list items i want to display a hidden div which contains another list of items which should be clickable.
In the above code, When I hover on PRODUCTS link; a div shows up. Now, I want to click on items in this div!!!!
I guess I need to check for hasClass('show'), and if so then i should be able to hover and click on the div items.
Any suggestions or help on how to move forward with this?
Priority of ID selector is higher than class selector.
Ref.
//Make sure this style is overwrite the style of #category-list
#category-list.show{
display: block;
}
Replace the style with the below one and try and adjust the position using top of category list
<style>
#category-list {
width: 900px;
height: 180px;
margin: 0 auto;
background-color: #f7f6f5;
position: absolute;
/*top: -380px;*/
z-index: -1;
display: none;
}
#category-list ul li {
list-style: none;
display: inline-block;
}
.show {
display: block !important;
}
Did some work in that jsfiddle.
// Show sub-menu with jQuery
$("ul#menu-items li.products a, ul#menu-items li.products").hover(function(){
console.log("show sub menu");
$("#category-list").show();
});
// Hide sub-menu with jQuery
$("body *").not("#menu-items, li.products, li.products a, #category-list, #category-list *, #category-menu-items, div.categories").hover(function(){
console.log($(this)); // Log the elements that triggers hide of sub menu
$("#category-list").hide();
});
Don't know the pure CSS sub-menu technique yet.
https://jsfiddle.net/mantisse_fr/p1eupdo3/1/
I am trying to make this carousel of logos to run continuously automatically. Right now it is still pausing at each logo before going to the next.
$(function() {
// vars for clients list carousel
// http://stackoverflow.com/questions/6759494/jquery-function-definition-in-a-carousel-script
var $clientcarousel = $('#clients-list');
var clients = $clientcarousel.children().length;
var clientwidth = (clients * 220); // 140px width for each client item
$clientcarousel.css('width', clientwidth);
var rotating = true;
var clientspeed = 0;
var seeclients = setInterval(rotateClients, clientspeed);
$(document).on({
mouseenter: function() {
rotating = false; // turn off rotation when hovering
},
mouseleave: function() {
rotating = true;
}
}, '#clients');
function rotateClients() {
if (rotating != false) {
var $first = $('#clients-list li:first');
$first.animate({
'margin-left': '-220px'
}, 2000, function() {
$first.remove().css({
'margin-left': '0px'
});
$('#clients-list li:last').after($first);
});
}
}
});
/*Logo carousel*/
#clients {
display: block;
margin-left: auto;
margin-right: auto;
}
#clients .clients-wrap {
display: block;
width: 95%;
margin: 0 auto;
overflow: hidden;
}
#clients .clients-wrap ul {
display: block;
list-style: none;
position: relative;
margin-left: auto;
margin-right: auto;
}
#clients .clients-wrap ul li {
display: block;
float: left;
position: relative;
width: 220px;
height: 100px;
line-height: 100px;
text-align: center;
}
#clients .clients-wrap ul li img {
vertical-align: middle;
max-width: 100%;
max-height: 100%;
-webkit-transition: 0 linear left;
-moz-transition: 0 linear left;
transition: 0 linear left;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
filter: alpha(opacity=65);
opacity: 0.65;
}
#clients .clients-wrap ul li img:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1.0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="clients">
<div class="clients-wrap">
<ul id="clients-list" class="clearfix">
<li>
<img src="images/logos/BlaceAce-grayscale.png" alt="Black Ace">
</li>
<li>
<img src="images/logos/WBPN-grayscale.png" alt="First State Bank">
</li>
<li>
<img src="images/logos/CA-grayscale.png" alt="Custom Aire">
</li>
<li>
<img src="images/logos/GVAH-grayscale.png" alt="First State Bank">
</li>
<li>
<img src="images/logos/DM-grayscale.png" alt="Dakota Molding">
</li>
<li>
<img src="images/logos/DP-grayscale.png" alt="Dakota Peat">
</li>
<li>
<img src="images/logos/IH-grayscale.png" alt="First State Bank">
</li>
<li>
<img src="images/logos/EBC-grayscale.png" alt="Eastbay Campground">
</li>
<li>
<img src="images/logos/NDTC-grayscale.png" alt="First State Bank">
</li>
<li>
<img src="images/logos/Nutrena-grayscale.png" alt="First State Bank">
</li>
<li>
<img src="images/logos/NWB-grayscale.png" alt="First State Bank">
</li>
<li>
<img src="images/logos/RHS-grayscale.png" alt="First State Bank">
</li>
<li>
<img src="images/logos/Sertoma-grayscale.png" alt="First State Bank">
</li>
<li>
<img src="images/logos/FSB-grayscale.png" alt="First State Bank">
</li>
<li>
<img src="images/logos/TM-grayscale.png" alt="First State Bank">
</li>
<li>
<img src="images/logos/TP-grayscale.png" alt="First State Bank">
</li>
<li>
<img src="images/logos/UC-TMC-grayscale.png" alt="First State Bank">
</li>
<li>
<img src="images/logos/Vilandre-grayscale.png" alt="First State Bank">
</li>
</ul>
</div>
<!-- #end .clients-wrap -->
</div>
<!-- #end #clients -->
JSFIDDLE:
http://jsfiddle.net/yetanrj6/
You need to add "linear" easing to the .animate()
Line 25:
$first.animate({ 'margin-left': '-220px' }, 2000, "linear", function() {
jsfiddle demo