Carousel animation for left button works incorrectly - javascript

I am currently working on my own carousel script, but the transition animation for the left button is not working correctly.
I think the problem is in the test function under if($move=="left"), but I am unable to figure out what is causing this.
$(document).ready(function() {
/*********** CAROUSEL **********/
var carouselInterval = setInterval(function() {
moveCarousel();
}, 3000);
var carouselImageCount = $("#carousel li").length; // count the number of images
var transitionCount = 0;
function moveCarousel() {
transitionCount++;
if (transitionCount == carouselImageCount) {
transitionCount = 0;
$(this).css({
marginLeft: 0
});
}
$("#carousel ul").animate({
marginLeft: "-100%"
}, 1000, function() {
$(this).find("li:last").after($(this).find("li:first"));
$(this).css({
marginLeft: 0
});
});
}
// when the cursur hovers on the image
$("#carousel,.carouselArrowRight,.carouselArrowLeft").hover(function() {
clearInterval(carouselInterval);
}, function() {
carouselInterval = setInterval(function() {
moveCarousel();
}, 3000);
});
/*********** CAROUSEL **********/
/*********** CAROUSEL ARROWS ************/
$(".carouselArrowRight").click(function() {
//moveCarousel();
test("right");
});
$(".carouselArrowLeft").click(function() {
test("left");
//moveCarousel();
});
function test($move) {
if ($move == "left") {
transitionCount--;
$(this).css({
"margin-left": "100%"
});
$("#carousel ul").animate({
marginLeft: "100%"
}, 1000, function() {
$(this).find("li:first").before($(this).find("li:last"));
$(this).css({
marginLeft: 0
});
});
} else {
transitionCount++;
if (transitionCount == carouselImageCount) {
transitionCount = 0;
$(this).css({
marginLeft: 0
});
}
$("#carousel ul").animate({
marginLeft: "-100%"
}, 1000, function() {
$(this).find("li:last").after($(this).find("li:first"));
$(this).css({
marginLeft: 0
});
});
}
}
/*********** CAROUSEL ARROWS ************/
});
#carousel {
width: 100%;
overflow: hidden;
}
#carousel ul {
padding: 0px;
margin: 0px;
width: 1920px;
height: 330px;
display: flex;
}
#carousel ul li {
width: 100%;
text-align: left;
list-style: none;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="sectionArea01">
<div class="wrapCarousel">
<div class="carouselAlignment">
<p class="carouselArrowLeft">
<img src="http://placehold.it/30x30" alt="">
</p>
<div class="wrapInner">
<div id="carousel">
<ul id="carouselImages">
<li>
<img src="http://placehold.it/600x330" alt="">
</li>
<li>
<img src="http://placehold.it/600x330" alt="">
</li>
<li>
<img src="http://placehold.it/600x330" alt="">
</li>
</ul>
</div>
</div>
<p class="carouselArrowRight">
<img src="http://placehold.it/30x30" alt="">
</p>
</div>
</div>
</section>
enter link description here


You should change items before animation. Also fixed margins in animations to absolute values.
$(document).ready(function() {
/*********** CAROUSEL **********/
var carouselInterval = setInterval(function() {
moveCarousel();
}, 3000);
var carouselImageCount = $("#carousel li").length; // count the number of images
var transitionCount = 0;
function moveCarousel() {
transitionCount++;
if (transitionCount == carouselImageCount) {
transitionCount = 0;
$(this).css({
marginLeft: 0
});
}
$("#carousel ul").animate({
marginLeft: "-600px"
}, 2500, function() {
$(this).find("li:last").after($(this).find("li:first"));
$(this).css({
marginLeft: 0
});
});
}
// when the cursur hovers on the image
$("#carousel,.carouselArrowRight,.carouselArrowLeft").hover(function() {
clearInterval(carouselInterval);
}, function() {
carouselInterval = setInterval(function() {
moveCarousel();
}, 5000);
});
/*********** CAROUSEL **********/
/*********** CAROUSEL ARROWS ************/
$(".carouselArrowRight").click(function() {
//moveCarousel();
test("right");
});
$(".carouselArrowLeft").click(function() {
test("left");
//moveCarousel();
});
function test($move) {
if ($move == "left") {
transitionCount--;
$("#carousel ul").find("li:first").before($("#carousel ul").find("li:last"));
$("#carousel ul").css({marginLeft: "-600px"})
.animate({marginLeft: "0"}, 2500);
} else {
transitionCount++;
if (transitionCount == carouselImageCount) {
transitionCount = 0;
$(this).css({
marginLeft: 0
});
}
$("#carousel ul").animate({
marginLeft: "-600px"
}, 2500, function() {
$(this).find("li:last").after($(this).find("li:first"));
$(this).css({
marginLeft: 0
});
});
}
}
/*********** CAROUSEL ARROWS ************/
});
#carousel {
width: 100%;
overflow: hidden;
}
#carousel ul {
padding: 0px;
margin: 0px;
width: 1920px;
height: 330px;
display: flex;
}
#carousel ul li {
width: 100%;
text-align: left;
list-style: none;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="sectionArea01">
<div class="wrapCarousel">
<div class="carouselAlignment">
<p class="carouselArrowLeft">
<img src="http://placehold.it/30x30" alt="">
</p>
<div class="wrapInner">
<div id="carousel">
<ul id="carouselImages">
<li id="black">
<img src="http://placehold.it/600x330/000000/eeeeee" alt="">
</li>
<li id="red">
<img src="http://placehold.it/600x330/ff0000/eeeeee" alt="">
</li>
<li id="green">
<img src="http://placehold.it/600x330/00ff00/dddddd" alt="">
</li>
<li id="blue">
<img src="http://placehold.it/600x330/0000ff/aaaaaa" alt="">
</li>
</ul>
</div>
</div>
<p class="carouselArrowRight">
<img src="http://placehold.it/30x30" alt="">
</p>
</div>
</div>
</section>

Related

Custom dynamical slideshow with jQuery

I am trying to make my own slideshow from scratch using mainly jQuery. The problem I got stuck on is when I tried to adapt it for phones and tablets (smaller screen in general). So my first thought was just to change all px to % but that didn't really work that well and I don't know how to approach this problem the "best" way.
This is how it looks "normally"
The problem occurs when resizing the window, then i get this black bar over the image. My goal is that the whole box should resize and look like the one above. (this is a screenshot from the mobile preview with google chrome)
You can test the snippet bellow and it shows a black bar directly since the window is small.
The #AutoSlider{min-height: 400px;} is just to not get 10 px in height.
var options = {
Image: {
Width: "100%",
Height: "80%",
BackgroundColor: "black",
SecPerSlide: "5000"
},
ThumbnailContainer: {
Width: "15%",
Height: "100%",
RowColor: "black"
},
ThumbnailCell: {
BackgroundColor: "black",
Space: "3px",
Width: "100%",
Height: "15%",
FadedEdge: "15%"
}
}
carsGallery = [];
var container = $("#AutoSlider");
var thumbnailContainer;
var thumbnailCell;
var activeImage;
var autoCount = 1;
var stopSlider = false;
var subImageSliderPage = 0;
$(document).ready(function () {
GetImages();
BuildImageSlider();
SetStyles();
startSlider();
});
function SetStyles() {
container.css({
'width': options.Image.Width,
'height': options.Image.Height,
'max-height': '650px',
'background-color': options.Image.BackgroundColor,
'position': 'relative',
'overflow': 'hidden'
});
thumbnailContainer.css({
'width': options.ThumbnailContainer.Width,
'height': options.ThumbnailContainer.Height,
'background-color': options.ThumbnailContainer.RowColor,
'position': 'absolute',
'right': '0'
});
thumbnailCell.css({
'width': options.ThumbnailCell.Width,
'height': options.ThumbnailCell.Height,
'background-color': options.ThumbnailCell.BackgroundColor,
'margin-bottom': options.ThumbnailCell.Space
});
thumbnailCellImage.css({
'max-width': '100%',
'max-height': '100%',
'height': '100%',
'width': '100%'
});
activeImage.css({
'max-width': '85%',
'max-height': '100%',
'vertical-align': 'middle'
});
$('.thumbnailCell img').last().css('margin-bottom', '-37px');
$('.thumbnailCell img').last().css('margin-top', '-37px');
}
function BuildImageSlider() {
container.append('<div class="dragscroll" id="ThumbNail"></div>');
thumbnailContainer = $("#ThumbNail");
container.append('<span style="display: inline-block;height: 100%;vertical-align: middle;" class="helper"></span><img style="position: absolute; left: -15%; right: 0; bottom: 0; margin: auto;" id="ActiveImage"/>');
for (var i = 0; i < carsGallery.length; i++) {
thumbnailContainer.append('<div class="thumbnailCell"><span style="display: inline-block;height: 100%;vertical-align: middle;"></span><img index="' + i + '" src="' + carsGallery[i].mainImages + '"/></div>');
}
container.append('<div style="pointer-events: none; background-image: linear-gradient(black, rgba(1, 0, 0, 0.0)); top: 0; right: 0; position: absolute; height: 50px; width: ' + options.ThumbnailCell.FadedEdge + ';"></div>');
container.append('<div style="pointer-events: none; background-image: linear-gradient(rgba(1, 0, 0, 0.0), black); bottom: 0; right: 0; position: absolute; height: 50px; width: ' + options.ThumbnailCell.FadedEdge + ';"></div>');
container.prepend('<img src="/images/Icons/defforward.png" onmouseover="pauseSlider(true);" onmouseout="pauseSlider(false);" style="bottom: 50%; right: 15%; position: absolute; z-index: 100;" class="arrow" id="rightArrow"/>');
container.prepend('<img src="/images/Icons/defback.png" onmouseover="pauseSlider(true);" onmouseout="pauseSlider(false);" style="bottom: 50%; left: 0; position: absolute; z-index: 100;" class="arrow" id="leftArrow"/>');
activeImage = $("#ActiveImage");
thumbnailCell = $(".thumbnailCell");
thumbnailCellImage = $(".thumbnailCell img");
}
function GetImages() {
for (var i = 0; i < $('.mainPhoto img').length; i++) {
var main = $('.mainPhoto:eq(' + i + ') img').attr('src');
var sub = getSubImages(i);
carsGallery.push({ mainImages: main, subImages: [sub] });
}
}
function getSubImages(main) {
var s = [];
$('.interior' + main).each(function (e) {
s.push($(this).attr('src'));
});
return s;
}
$(document).ready(function () {
$(".thumbnailCell img").click(function () {
$('#ActiveImage').attr('src', $(this).attr('src'));
autoCount = +$(this).attr('index');
});
$('#rightArrow').click(function () {
if (subImageSliderPage >= carsGallery[autoCount].subImages[0].length) {
activeImage.attr('src', carsGallery[autoCount].mainImages).stop(true, true).hide().fadeIn();
subImageSliderPage = 0;
}
else {
activeImage.attr('src', carsGallery[0].subImages[0][subImageSliderPage]).stop(true, true).hide().fadeIn();
subImageSliderPage++;
}
});
$('#leftArrow').click(function () {
});
});
function startSlider() {
activeImage.attr('src', carsGallery[0].mainImages).stop(true, true).hide().fadeIn();
timerId = setInterval(function () {
if (stopSlider != true) {
if (autoCount >= carsGallery.length - 1) {
autoCount = 0;
}
activeImage.attr('src', carsGallery[autoCount].mainImages).stop(true, true).hide().fadeIn();
autoCount++;
}
}, options.Image.SecPerSlide);
}
function pauseSlider(state) {
stopSlider = state;
}
#AutoSlider{
min-height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="col-sm-12 story-for-sale sold-cars-box">
<div class="col-sm-10 col-sm-offset-1 story-for-sale sold-cars-box">
<div id="AutoSlider" onmouseover="pauseSlider(true);" onmouseout="pauseSlider(false);">
<div hidden class="carImages">
<div class="mainPhoto">
<img src="https://cdn.motor1.com/images/mgl/7WjgW/s4/1974-lancia-stratos-hf-stradale-for-sale.jpg"/>
</div>
<div class="interior">
<img src="https://i.pinimg.com/originals/0e/91/97/0e9197574f9f55aec58af0fe5ff265bb.jpg" class="interior0" />
</div>
<div class="mainPhoto">
<img src="http://dmi3w0goirzgw.cloudfront.net/gallery-images/840x560/274000/600/274681.jpg"/>
</div>
<div class="interior">
<img src="https://i.pinimg.com/originals/35/39/bd/3539bdb4edefb3a862e30386b8519ea1.jpg" class="interior1" />
</div>
<div class="mainPhoto">
<img src="https://cdn.motor1.com/images/mgl/7WjgW/s4/1974-lancia-stratos-hf-stradale-for-sale.jpg"/>
</div>
<div class="interior">
<img src="https://i.pinimg.com/originals/0e/91/97/0e9197574f9f55aec58af0fe5ff265bb.jpg" class="interior2" />
</div>
<div class="mainPhoto">
<img src="http://dmi3w0goirzgw.cloudfront.net/gallery-images/840x560/274000/600/274681.jpg"/>
</div>
<div class="interior">
<img src="https://i.pinimg.com/originals/35/39/bd/3539bdb4edefb3a862e30386b8519ea1.jpg" class="interior3" />
</div>
<div class="mainPhoto">
<img src="https://cdn.motor1.com/images/mgl/7WjgW/s4/1974-lancia-stratos-hf-stradale-for-sale.jpg"/>
</div>
<div class="interior">
<img src="https://i.pinimg.com/originals/0e/91/97/0e9197574f9f55aec58af0fe5ff265bb.jpg" class="interior4" />
</div>
<div class="mainPhoto">
<img src="http://dmi3w0goirzgw.cloudfront.net/gallery-images/840x560/274000/600/274681.jpg"/>
</div>
<div class="interior">
<img src="https://i.pinimg.com/originals/35/39/bd/3539bdb4edefb3a862e30386b8519ea1.jpg" class="interior5" />
</div>
<div class="mainPhoto">
<img src="https://cdn.motor1.com/images/mgl/7WjgW/s4/1974-lancia-stratos-hf-stradale-for-sale.jpg"/>
</div>
<div class="interior">
<img src="https://i.pinimg.com/originals/0e/91/97/0e9197574f9f55aec58af0fe5ff265bb.jpg" class="interior6" />
</div>
<div class="mainPhoto">
<img src="http://dmi3w0goirzgw.cloudfront.net/gallery-images/840x560/274000/600/274681.jpg"/>
</div>
<div class="interior">
<img src="https://i.pinimg.com/originals/35/39/bd/3539bdb4edefb3a862e30386b8519ea1.jpg" class="interior7" />
</div>
</div>
</div>
</div>
</div>

I added a VerticalAlign:"top" to your Image options, and the pix show vertically-aligned in the middle (as added). I adjusted the background colour of the container to grey and the height of the AutoSlider to 320, which you can of course adjust back, I just reduced these for testing purposes..
Hope this helps
var options = {
Image: {
Width: "100%",
Height: "80%",
BackgroundColor: "grey",
SecPerSlide: "5000",
VerticalAlign:"top",
},
ThumbnailContainer: {
Width: "15%",
Height: "100%",
RowColor: "black"
},
ThumbnailCell: {
BackgroundColor: "black",
Space: "3px",
Width: "100%",
Height: "15%",
FadedEdge: "15%"
}
}
carsGallery = [];
var container = $("#AutoSlider");
var thumbnailContainer;
var thumbnailCell;
var activeImage;
var autoCount = 1;
var stopSlider = false;
var subImageSliderPage = 0;
$(document).ready(function() {
GetImages();
BuildImageSlider();
SetStyles();
startSlider();
});
function SetStyles() {
container.css({
'width': options.Image.Width,
'height': options.Image.Height,
'max-height': '650px',
'background-color': options.Image.BackgroundColor,
'vertical-align': options.Image.VerticalAlign,
'position': 'absolute',
'overflow': 'hidden'
});
thumbnailContainer.css({
'width': options.ThumbnailContainer.Width,
'height': options.ThumbnailContainer.Height,
'background-color': options.ThumbnailContainer.RowColor,
'position': 'absolute',
'right': '0'
});
thumbnailCell.css({
'width': options.ThumbnailCell.Width,
'height': options.ThumbnailCell.Height,
'background-color': options.ThumbnailCell.BackgroundColor,
'margin-bottom': options.ThumbnailCell.Space
});
thumbnailCellImage.css({
'max-width': '100%',
'max-height': '100%',
'height': '100%',
'width': '100%'
});
activeImage.css({
'max-width': '85%',
'max-height': '100%',
'top': 0,
});
$('.thumbnailCell img').last().css('margin-bottom', '-37px');
$('.thumbnailCell img').last().css('margin-top', '-37px');
}
function BuildImageSlider() {
container.append('<div class="dragscroll" id="ThumbNail"></div>');
thumbnailContainer = $("#ThumbNail");
container.append('<span style="display: inline-block;height: 100%;vertical-align: middle;" class="helper"></span><img style="position: absolute; left: -15%; right: 0; bottom: 0; margin: auto;" id="ActiveImage"/>');
for (var i = 0; i < carsGallery.length; i++) {
thumbnailContainer.append('<div class="thumbnailCell"><span style="display: inline-block;height: 100%;vertical-align: middle;"></span><img index="' + i + '" src="' + carsGallery[i].mainImages + '"/></div>');
}
container.append('<div style="pointer-events: none; background-image: linear-gradient(black, rgba(1, 0, 0, 0.0)); top: 0; right: 0; position: absolute; height: 50px; width: ' + options.ThumbnailCell.FadedEdge + ';"></div>');
container.append('<div style="pointer-events: none; background-image: linear-gradient(rgba(1, 0, 0, 0.0), black); bottom: 0; right: 0; position: absolute; height: 50px; width: ' + options.ThumbnailCell.FadedEdge + ';"></div>');
container.prepend('<img src="/images/Icons/defforward.png" onmouseover="pauseSlider(true);" onmouseout="pauseSlider(false);" style="bottom: 50%; right: 15%; position: absolute; z-index: 100;" class="arrow" id="rightArrow"/>');
container.prepend('<img src="/images/Icons/defback.png" onmouseover="pauseSlider(true);" onmouseout="pauseSlider(false);" style="bottom: 50%; left: 0; position: absolute; z-index: 100;" class="arrow" id="leftArrow"/>');
activeImage = $("#ActiveImage");
thumbnailCell = $(".thumbnailCell");
thumbnailCellImage = $(".thumbnailCell img");
}
function GetImages() {
for (var i = 0; i < $('.mainPhoto img').length; i++) {
var main = $('.mainPhoto:eq(' + i + ') img').attr('src');
var sub = getSubImages(i);
carsGallery.push({
mainImages: main,
subImages: [sub]
});
}
}
function getSubImages(main) {
var s = [];
$('.interior' + main).each(function(e) {
s.push($(this).attr('src'));
});
return s;
}
$(document).ready(function() {
$(".thumbnailCell img").click(function() {
$('#ActiveImage').attr('src', $(this).attr('src'));
autoCount = +$(this).attr('index');
});
$('#rightArrow').click(function() {
if (subImageSliderPage >= carsGallery[autoCount].subImages[0].length) {
activeImage.attr('src', carsGallery[autoCount].mainImages).stop(true, true).hide().fadeIn();
subImageSliderPage = 0;
} else {
activeImage.attr('src', carsGallery[0].subImages[0][subImageSliderPage]).stop(true, true).hide().fadeIn();
subImageSliderPage++;
}
});
$('#leftArrow').click(function() {
});
});
function startSlider() {
activeImage.attr('src', carsGallery[0].mainImages).stop(true, true).hide().fadeIn();
timerId = setInterval(function() {
if (stopSlider != true) {
if (autoCount >= carsGallery.length - 1) {
autoCount = 0;
}
activeImage.attr('src', carsGallery[autoCount].mainImages).stop(true, true).hide().fadeIn();
autoCount++;
}
}, options.Image.SecPerSlide);
}
function pauseSlider(state) {
stopSlider = state;
}
#AutoSlider {
min-height: 320px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="col-sm-12 story-for-sale sold-cars-box">
<div class="col-sm-10 col-sm-offset-1 story-for-sale sold-cars-box">
<div id="AutoSlider" onmouseover="pauseSlider(true);" onmouseout="pauseSlider(false);">
<div hidden class="carImages">
<div class="mainPhoto">
<img src="https://cdn.motor1.com/images/mgl/7WjgW/s4/1974-lancia-stratos-hf-stradale-for-sale.jpg" />
</div>
<div class="interior">
<img src="https://i.pinimg.com/originals/0e/91/97/0e9197574f9f55aec58af0fe5ff265bb.jpg" class="interior0" />
</div>
<div class="mainPhoto">
<img src="http://dmi3w0goirzgw.cloudfront.net/gallery-images/840x560/274000/600/274681.jpg" />
</div>
<div class="interior">
<img src="https://i.pinimg.com/originals/35/39/bd/3539bdb4edefb3a862e30386b8519ea1.jpg" class="interior1" />
</div>
<div class="mainPhoto">
<img src="https://cdn.motor1.com/images/mgl/7WjgW/s4/1974-lancia-stratos-hf-stradale-for-sale.jpg" />
</div>
<div class="interior">
<img src="https://i.pinimg.com/originals/0e/91/97/0e9197574f9f55aec58af0fe5ff265bb.jpg" class="interior2" />
</div>
<div class="mainPhoto">
<img src="http://dmi3w0goirzgw.cloudfront.net/gallery-images/840x560/274000/600/274681.jpg" />
</div>
<div class="interior">
<img src="https://i.pinimg.com/originals/35/39/bd/3539bdb4edefb3a862e30386b8519ea1.jpg" class="interior3" />
</div>
<div class="mainPhoto">
<img src="https://cdn.motor1.com/images/mgl/7WjgW/s4/1974-lancia-stratos-hf-stradale-for-sale.jpg" />
</div>
<div class="interior">
<img src="https://i.pinimg.com/originals/0e/91/97/0e9197574f9f55aec58af0fe5ff265bb.jpg" class="interior4" />
</div>
<div class="mainPhoto">
<img src="http://dmi3w0goirzgw.cloudfront.net/gallery-images/840x560/274000/600/274681.jpg" />
</div>
<div class="interior">
<img src="https://i.pinimg.com/originals/35/39/bd/3539bdb4edefb3a862e30386b8519ea1.jpg" class="interior5" />
</div>
<div class="mainPhoto">
<img src="https://cdn.motor1.com/images/mgl/7WjgW/s4/1974-lancia-stratos-hf-stradale-for-sale.jpg" />
</div>
<div class="interior">
<img src="https://i.pinimg.com/originals/0e/91/97/0e9197574f9f55aec58af0fe5ff265bb.jpg" class="interior6" />
</div>
<div class="mainPhoto">
<img src="http://dmi3w0goirzgw.cloudfront.net/gallery-images/840x560/274000/600/274681.jpg" />
</div>
<div class="interior">
<img src="https://i.pinimg.com/originals/35/39/bd/3539bdb4edefb3a862e30386b8519ea1.jpg" class="interior7" />
</div>
</div>
</div>
</div>
</div>

JS slider while mouseover/mouseleft

Hello I have problems with JS clients slider on website.
I want to stop it while mouseover and resume while mouseleft. I have searched and checked the code but I don't know why it still doesn't work, could somebody help me?
$(function(){
var $clientcarousel = $('#clients-list');
var clients = $clientcarousel.children().length;
var clientwidth = (clients * 400); // 140px width for each client item
$clientcarousel.css('width',clientwidth);
var rotating = true;
var clientspeed = 0;
var seeclients = setInterval(rotateClients, clientspeed);
function rotateClients() {
if(rotating != false) {
var $first = $('#clients-list li:first');
$first.animate({ 'margin-left': '-220px' }, 5000, "linear", function() {
$first.remove().css({ 'margin-left': '0px' });
$('#clients-list li:last').after($first);
});
}
}
});
$(document).on({
mouseover: function(){
rotating = false; // turn off rotation when hovering
},
mouseleave: function(){
rotating = true;
}
}, '#clients');

Please have a look at this approach:
$(function() {
var $clientcarousel = $('#clients-list');
var clients = $clientcarousel.children().length;
var clientwidth = (clients * 400); // 140px width for each client item
$clientcarousel.css('width', clientwidth);
var rotating = true;
var clientspeed = 0;
var seeclients = setInterval(rotateClients, clientspeed);
function rotateClients() {
if (rotating != false) {
var $first = $('#clients-list li:first');
$first.animate({
'margin-left': '-220px'
}, 5000, "linear", function() {
$first.remove().css({
'margin-left': '0px'
});
$('#clients-list li:last').after($first);
});
} else {
$('#clients-list li').stop();
}
}
$(document).on({
mouseenter: function(){
rotating = false; // turn off rotation when hovering
},
mouseleave: function(){
rotating = true;
}
}, '.clients');
});
/*Logo carousel*/
.clients {
display: block;
margin-left: auto;
margin-right: auto;
max-height: 20%;
}
.clients .clients-wrap {
display: block;
max-width: 100%;
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: 60px;
line-height: 60px;
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=40)";
filter: alpha(opacity=40);
filter: grayscale(100%);
opacity: 0.40;
}
.clients .clients-wrap ul li img:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
filter: grayscale(0%);
opacity: 1.0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="clients">
<p></p>
<div class="clients-wrap">
<ul id="clients-list" class="clearfix">
<li>
<img src="http://iconshow.me/media/images/logo/brand-logo-icon/png/256/cocacola-256.png">
</li>
<li>
<img src="img/logos/2.png">
</li>
<li>
<img src="img/logos/3.png">
</li>
<li>
<img src="img/logos/4.png">
</li>
<li>
<img src="img/logos/5.png">
</li>
<li>
<img src="img/logos/6.png">
</li>
<li>
<img src="img/logos/7.png">
</li>
<li>
<img src="img/logos/8.png">
</li>
<li>
<img src="img/logos/9.png">
</li>
<li>
<img src="img/logos/10.png">
</li>
<li>
<img src="img/logos/11.png">
</li>
<li>
<img src="img/logos/12.png">
</li>
<li>
<img src="img/logos/13.png">
</li>
<li>
<img src="img/logos/14.png">
</li>
<li>
<img src="img/logos/15.png">
</li>
</ul>
</div>
<!-- #end .clients-wrap -->
</div>

Simple jQuery carousel
$(window).on("load", makeCarousel);
function makeCarousel() {
var carousel = $('.carousel ul'),
interval = $(carousel).parent().data("interval") * 1000,
speed = $(carousel).parent().data("speed") * 1000,
count = $(carousel).children().length,
width = $(carousel).find("img:first").width(),
id, moveIt;
$(carousel)
.css({
width: count * width,
position: "relative",
margin: 0,
padding: 0,
listStyle: "none"
})
.parent().css({ width: width, overflow: "hidden" })
.animate({opacity: 1}, 250)
.on("mouseover", function() { clearInterval(id) })
.on("mouseout", function() { moveIt() })
.find("li").css({ float: "left" })
.find("img").css({ verticalAlign: "bottom" });
(moveIt = function() {
id = setInterval(function() {
$(carousel).animate({left: -width}, speed, function() {
$(this).css({left: 0});
$(this).children(":last").after($(this).children(":first"));
});
}, interval + speed);
})();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel" data-interval="1" data-speed="0.6" style="opacity:0">
<ul>
<li><img src='http://placehold.it/350x200/111111?text=First Slide'></li>
<li><img src='http://placehold.it/350x200/444444?text=Second Slide'></li>
<li><img src='http://placehold.it/350x200/777777?text=Third Slide'></li>
<li><img src='http://placehold.it/350x200/aaaaaa?text=Fourth Slide'></li>
</ul>
</div>

Hover function loops infinitly in plugin

I am making a simple plugin in which if i hover over an image its background color should change to semi-transparent black.
For that I have placed a tag above it with class name overlay to give the effect. Since height and width will be different for each image, I am taking the height/width from the image and dynamically giving it to overlay class. In the end when mouse goes out I am simply making background color transparent.
Here's the code
<div class="overlay"></div>
<a href="" class="box">
<img src="http://www.cars.co.za/images/specials/ncs-red-renault.jpg" alt="" />
</a>
(function($) {
$.fn.imageOverlay = function() {
return this.each(function() {
var $this = $(this);
var width = $this.width();
var height = $this.height();
$this.hover(function(){
$('.overlay').css({
width: width,
height: height,
backgroundColor: 'rgba(0,0,0,0.5)'
});
console.log('in');
}, function(){
$('.overlay').css({
width: 0,
height: 0,
backgroundColor: 'rgba(0,0,0,0)'
});
console.log('out');
});
});
}
}(jQuery));
(function($){
$('.box').imageOverlay();
}(jQuery));
.overlay {
position: absolute;
display: inline-block;
}
This is working but not as it should be when in and out starts and never stops; kind of going in loop.
Are there any solutions to this? Or is there a correct way to implement the same functionality as a plugin?

There is no real need to have a plugin for this
.box {
display: inline-block;
position: relative;
}
.box .overlay {
position: absolute;
display: none;
background-color: rgba(0, 0, 0, 0.5);
}
.box:hover .overlay {
left: 0;
top: 0;
bottom: 0;
right: 0;
display: inline-block;
}
<div class="box">
<div class="overlay"></div>
<a href="">
<img src="http://www.cars.co.za/images/specials/ncs-red-renault.jpg" alt="" />
</a>
</div>
If you want jQuery plugin
(function($) {
$.fn.imageOverlay = function() {
return this.each(function() {
var $this = $(this),
$overlay = $this.find('.overlay');
$this.hover(function() {
$overlay.show();
}, function() {
$overlay.hide();
});
});
}
}(jQuery));
(function($) {
$('.box').imageOverlay();
}(jQuery));
.box {
display: inline-block;
position: relative;
}
.box .overlay {
position: absolute;
display: none;
background-color: rgba(0, 0, 0, 0.5);
left: 0;
top: 0;
bottom: 0;
right: 0;
}
.box:hover .overlay {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="overlay"></div>
<a href="">
<img src="http://www.cars.co.za/images/specials/ncs-red-renault.jpg" alt="" />
</a>
</div>

Try this updated fiddle
HTML code
<div class="box">
<div class="overlay"></div>
<img src="http://www.cars.co.za/images/specials/ncs-red-renault.jpg" alt="" />
</div>
JS code
(function($){
$.fn.imageOverlay = function(){
return this.each(function(){
var $this = $(this);
var width = $this.find("img").width();
var height = $this.find("img").height();
$this.hover(function(){
$this.find('.overlay').css({
width: width,
height: height,
backgroundColor: 'rgba(0,0,0,0.5)'
});
console.log('in');
}, function(){
$this.find('.overlay').css({
width: 0,
height: 0,
backgroundColor: 'rgba(0,0,0,0)'
});
console.log('out');
});
});
}
}(jQuery));
(function($){
$('.box').imageOverlay();
}(jQuery));

If you are really looking for a jQuery only solution, then you can look at a timer based solution like
(function($) {
$.fn.imageOverlay = function() {
return this.each(function() {
var $this = $(this),
$overlay = $this.find('.overlay'),
$img = $this.find("img"),
timer;
$img.hover(function() {
var width = $img.width();
var height = $img.height();
$overlay.css({
width: width,
height: height
}).show();
}, function() {
timer = setTimeout(function() {
$overlay.hide();
}, 200);
});
$overlay.hover(function() {
clearTimeout(timer);
}, function() {
$overlay.hide();
});
});
}
}(jQuery));
(function($) {
$('.box').imageOverlay();
}(jQuery));
.overlay {
position: absolute;
display: inline-block;
background-color: rgba(0, 0, 0, 0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="overlay"></div>
<a href="">
<img src="http://www.cars.co.za/images/specials/ncs-red-renault.jpg" alt="" />
</a>
</div>

Jquery animation/function help needed

I'm working on my first serious website and i'm stuck on this problem.
First of all I think my JQuery is extremly clumsy and could probably have been done in a more efficient way, would love some help on how to code this better (Feks i probably use to many functions).
Secoundly I need some help with the animation. I want the divs to animate over to the leftside off the container before they open. The way it is now looks so unnatural.
I would appreciate any help.
http://jsfiddle.net/Skaadel/nt8a29gm/1/
HTML
<div class="container">
<div class="row">
<div class="test1 col-sm-3">
<div id="boks1">About Me</div>
</div>
<div class="test2 col-sm-3">
<div id="boks2">Portfolio</div>
</div>
<div class="test3 col-sm-3">
<div id="boks3">Project</div>
</div>
<div class="test4 col-sm-3">
<div id="boks4">TEST</div>
</div>
</div>
</div>
CSS
html {
width: 100%;
}
#test {
background-color: blue;
height: 400px;
width: 400px;
margin: auto;
}
#wrapper {
height: 500px;
}
.container {
background-color: black!important;
margin-bottom: 40px!important;
}
#boks1 {
height: 400px;
width: 100px;
background-color: red;
position: relative;
z-index: 15;
}
#boks2 {
height: 400px;
width: 100px;
background-color: blue;
}
#boks3 {
height: 400px;
width: 100px;
background-color: white;
}
#boks4 {
height: 400px;
width: 100px;
background-color: pink;
}
JQUERY
$(document).ready(function () {
$("#boks1").click(function () {
if ($("#boks1").width() == 100) {
$("#boks1").animate({
width: "720px"
});
$("#boks2").css("display", "none");
$("#boks3").css("display", "none");
$("#boks4").css("display", "none");
} else {
$("#boks1").animate({
width: "100px"
});
$("#boks2").css("display", "");
$("#boks3").css("display", "");
$("#boks4").css("display", "");
}
});
});
$(document).ready(function () {
$("#boks2").click(function () {
if ($("#boks2").width() == 100) {
$("#boks2").animate({
width: "720px"
});
$(".test1").css("display", "none");
$(".test4").css("display", "none");
$(".test3").css("display", "none");
} else {
$("#boks2").animate({
width: "100px"
});
$(".test1").css("display", "");
$(".test4").css("display", "");
$(".test3").css("display", "");
}
});
});
$(document).ready(function () {
$("#boks3").click(function () {
if ($("#boks3").width() == 100) {
$("#boks3").animate({
width: "720px"
});
$(".test1").css("display", "none");
$(".test2").css("display", "none");
$(".test4").css("display", "none");
} else {
$("#boks3").animate({
width: "100px"
});
$(".test1").css("display", "");
$(".test2").css("display", "");
$(".test4").css("display", "");
}
});
});
$(document).ready(function () {
$("#boks4").click(function () {
if ($("#boks4").width() == 100) {
$("#boks4").animate({
width: "720px"
});
$(".test1").css("display", "none");
$(".test2").css("display", "none");
$(".test3").css("display", "none");
} else {
$("#boks4").animate({
width: "100px"
});
$(".test1").css("display", "");
$(".test2").css("display", "");
$(".test3").css("display", "");
}
});
});

I have changed your code somewhat. Changes are as follows:
1) In your HTML added class name boks class="boks" along your inner Div.
2) In your CSS added properties for .boks, #boks1-2-3-4 and .col-sm-3. Also Added class .zindex
3) In your JQuery i changed everything. Have a look and ask if you stuck anywhere.
Working : Demo
JQuery
$(document).ready(function() {
$(".boks").click(function() {
var curId = this.id; //Gives you id of clicked element.
var curWidth = $("#" + curId).width(); // Taking width to check if it's 100px.
var offset = $("#" + curId).offset(); // Taking Position for animating to left.
var leftPos = offset.left;
var firstElementLeftPos = $("#boks1").offset().left;
leftPos = leftPos - firstElementLeftPos;
if (curWidth == 100) {
$(this).parent(".col-sm-3").css('left', '-' + leftPos + 'px');
$("#" + curId).css("width", "720px").addClass('zindex');
} else {
$(this).parent(".col-sm-3").css('left', '0px');
$("#" + curId).css("width", "100px").delay(500).queue(function() {
$("#" + curId).removeClass('zindex');
});
}
});
});
CSS
html {
width: 100%;
}
#test {
background-color: blue;
height: 400px;
width: 400px;
margin: auto;
}
#wrapper {
height: 500px;
}
.container {
background-color: black!important;
margin-bottom: 40px!important;
}
/* Edits are to Below CSS */
.boks {
height: 400px;
width: 100px;
position: relative;
overflow: hidden;
transition: all 0.5s ease-in-out;
}
#boks1 {
background-color: red;
}
#boks2 {
background-color: blue;
}
#boks3 {
position: relative;
background-color: white;
}
#boks4 {
background-color: pink;
}
.col-sm-3 {
left: 0px;
transition: 0.5s ease-in-out;
position: relative;
}
.zindex {
z-index: 999;
}
HTML
<div class="row">
<div class="test1 col-sm-3">
<div class="boks" id="boks1">About Me</div>
</div>
<div class="test2 col-sm-3">
<div class="boks" id="boks2">Portfolio</div>
</div>
<div class="test3 col-sm-3">
<div class="boks" id="boks3">Project</div>
</div>
<div class="test4 col-sm-3">
<div class="boks" id="boks4">TEST</div>
</div>
</div>
</div>

just to show you how you could reduce your code with using $(this) and class names in jQuery ...
http://jsfiddle.net/nt8a29gm/3/
$(document).ready(function () {
$(".box").click(function () { // check for click on .box
if($(this).width() == 100) { // if this one width is 100
$('.box').not(this).hide(); // hide all but this
$(this).animate({ // animate the one we clicked on
width: "720px"
});
} else {
$(this).animate({ // make this one small again
width: "100px"
}, 900, function() { // 900 is animation speed
// Animation complete. // wait this animation is finished
$('.box').not(this).show(); // show all boxes again
});
}
});
});
HTML see class="box"
<div class="container">
<div class="row">
<div class="test1 col-sm-3">
<div class="box">About Me</div>
</div>
<div class="test2 col-sm-3">
<div class="box">Portfolio</div>
</div>
<div class="test3 col-sm-3">
<div class="box">Project</div>
</div>
<div class="test4 col-sm-3">
<div class="box">TEST</div>
</div>
</div>
</div>

jQuery: animated slider pager

I've set up an animated slider using jQuery:
jsFiddle demo: http://jsfiddle.net/neal_fletcher/9zRDV/
The reason being I wanted to achieve a slight overhang on the slides, i.e. while viewing slide 1 you can see some of slide 2 etc. The slider works great, perfect in fact for what I'm after, now though I'm trying to figure out if it's possible to set up a pager for this slider, the aim of which being to click on a .slide-menu-item and the slider will slide to the relevant slide, if at all possible?
One other slight problem too, is it possible to animate the slider on load? Thus, the pager will slide every 5 seconds, but you can still navigate the slider using the pager / next and previous buttons?
Any suggestions would be greatly appreciated!
HTML:
<div class="outerwrapper">
<div class="innerwrapper">
<div class="inner-slide">SLIDE 01</div>
<div class="inner-slide">SLIDE 02</div>
<div class="inner-slide">SLIDE 03</div>
<div class="inner-slide">SLIDE 04</div>
<div class="inner-slide">SLIDE 05</div>
<div class="inner-slide">SLIDE 06</div>
<div class="inner-slide">SLIDE 07</div>
</div>
</div>
<ul id="slide-menu">
<li id="one" class="slide-menu-item">01</li>
<li id="two" class="slide-menu-item">02</li>
<li id="three" class="slide-menu-item">03</li>
<li id="four" class="slide-menu-item">04</li>
<li id="five" class="slide-menu-item">05</li>
<li id="six" class="slide-menu-item">06</li>
<li id="seven" class="slide-menu-item">07</li>
</ul>
<div id="left">LEFT</div>
<div id="right">RIGHT</div>
CSS:
.outerwrapper {
position: absolute;
left: 50%;
height: 250px;
width: 400px; margin-left: -225px;
border: 1px solid black;
overflow: hidden;
padding-left: 50px;
}
.innerwrapper {
height: 250px;
width: 4000px;
}
.inner-slide {
height: 250px;
width: 350px;
float: left;
background: silver;
}
.innerwrapper div:nth-child(odd) {
background: silver;
}
.innerwrapper div:nth-child(even) {
background: red;
}
#left, #right {
position: absolute;
cursor: pointer;
}
#left {
left: 10px; bottom: 10px;
}
#right {
right: 10px; bottom: 10px;
}
#slide-menu {
position: absolute;
top: 250px;
list-style: none;
}
.slide-menu-item {
display: inline-block;
width: 50px;
cursor: pointer;
}
jQuery:
var animating = false,
slideWidth = $('.inner-slide').width(),
$wrapper = $('.outerwrapper'),
slideIndex = 2,
slideLen = $('.inner-slide').length,
build = function() {
$firstClone = $('.inner-slide').eq(0).clone();
$secondClone = $('.inner-slide').eq(1).clone();
$preLastClone = $('.inner-slide').eq(slideLen - 2).clone();
$lastClone = $('.inner-slide').eq(slideLen - 1).clone();
$wrapper.find('.innerwrapper').append($firstClone, $secondClone).prepend($preLastClone, $lastClone);
$wrapper.animate({
scrollLeft: '+=' + slideWidth * slideIndex + 'px'
}, 0);
},
slide = function(dir, speed) {
if(!animating) {
animating = true;
dir == 'right' ? slideIndex++ : slideIndex--;
slideIndex == slideLen - 1 ? slideIndex == 0 : '';
if(slideIndex == 0 && dir == 'left') {
//if the slide is at the beginning and going left
slideIndex = slideLen + 1;
$wrapper.animate({
scrollLeft: slideIndex * slideWidth + 'px'
}, 0, function() {
animating = false;
});
slideIndex--;
} else if(slideIndex == slideLen + 2 && dir == 'right') {
//if the slide is at the end and going right
slideIndex = 1;
$wrapper.animate({
scrollLeft: slideIndex * slideWidth + 'px'
}, 0, function() {
animating = false;
});
slideIndex++;
}
$wrapper.animate({
scrollLeft: slideIndex * slideWidth + 'px'
}, speed, function() {
animating = false;
});
}
};
$(function() {
build();
$('#right, #left').on('click', function() {
slide($(this).attr('id'), 600)
});
});

Add the slideTo function:
slideTo = function (index, speed) {
slideIndex = index+1;
$wrapper.animate(
{scrollLeft: slideIndex * slideWidth + 'px'},
speed, function () {animating = false;}
);
}
Then call it when you click one of the page buttons:
$('.slide-menu-item').click(function() {
var toSlideIndex = Math.round($(this).text());
slideTo(toSlideIndex, 600);
});
And then, to make it slide automatically every 5 seconds, add this:
setInterval(function() {slide("right", 600);}, 5000);
JSFiddle demo: http://jsfiddle.net/9zRDV/3/

for example ?
$('#yourFavouriteIdForButtonThree').click(function(){
slide('three', 600)
});

Categories