The slider won't repeat - javascript

I want that this slide still plays and don't stop. Like an automatic loop. So what is the best code to do that? If you want to edit it, here's theJsFiddle
Here's the JS code:
var s = 0,
t = 2000;
$(document).on('ready', slide);
function slide() {
var speed = setTimeout(slider, t, );
}
function slider() {
s++;
var sld = $('#slider li'),
imgs = sld.length;
if (s == imgs) {
s = 0;
}
sld.eq(s - 1).animate({
'left': '0px'
}, t, function() {
sld.eq(s).animate({
'left': '0px'
}, t, function() {
speed = setTimeout(slider, t);
});
});
}

Change your JavaScript to this:
var s = 1, t = 3000;
$(document).on('ready', slider);
function slider(){
var sld = $('#slider li'),
imgs = sld.length;
if(s == imgs){
$('#slider li').css('left', '');
s = 1;
}
sld.eq(s).animate({'left': '0px'}, t, function(){
setTimeout(slider, 1000);
});
s++;
}
And a JSFiddle for you.

Related

Jquery slider left

I am trying to make this jQuery slider when it's on the last slide it comes back to the first one, but I can't manage to do the same on the other side.
The code: http://jsfiddle.net/uctr94ve/1/
'use strict';
$(function() {
//settings for slider
var width = 720;
var animationSpeed = 1000;
var pause = 2000;
var currentSlide = 1;
//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $container = $('.container');
var $sliderprevious = $('.sliderprevious', $container);
var $slides = $('.slide', $slider);
var interval;
function startSlider() {
(slide1, pause);
}
function slide1() {
$slideContainer.animate({
'margin-left': '+=' + width
}, animationSpeed, function() {
if (++currentSlide === $slides.length) {
currentSlide = 0;
$slideContainer.css('margin-left', 3600);
}
});
}
function pauseSlider() {
clearInterval(interval);
}
$sliderprevious
.on('mouseenter', pauseSlider)
.on('mouseleave', startSlider)
.on('click', slide1);
startSlider();
});

jQuery slider doesn't stop on mouseover

My jQuery slider is working but I don't know why it doesn't stop when I hover it.
I'm not using any slider plugin for this.
Here is the code.
$(function(){
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
var $slider= $('#slider');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.slide');
var interval;
function startSlider(){
setInterval(function(){
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function(){
currentSlide++;
if(currentSlide === $slides.length){
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function stopSlider(){
clearInterval(interval);
}
$slider.on('mouseenter', stopSlider).on('mouseleave', startSlider);
startSlider();
stopSlider();
});
Any help would be appreciated.
Try this ;)
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
var interval;
var $slider = "";
var $slideContainer = "";
var $slides = "";
function startSlider(){
interval = setInterval(function(){
$slideContainer.animate({
'margin-left': '-=' + width
},
animationSpeed, function(){
currentSlide++;
if(currentSlide === $slides.length){
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function stopSlider(){
clearInterval(interval);
}
$(function(){
$slider = $('#slider');
$slideContainer = $slider.find('.slides');
$slides = $slideContainer.find('.slide');
$slider.on('mouseenter', stopSlider).on('mouseleave', startSlider);
startSlider();
});
Man you do it wrong.
To stop an interval you need to assign it to a variable before.
Create your interval and assign it to var:
var timer = setInterval(function (){
// do stuff here
});
You have your time setted up, now you can stop it! Like this:
clearInterval(timer);
Hope to help you :)
if you want to Stop the interval you need to do it like:
var interval = setInterval(function(){//do stuff here});
clearInterval(interval);
Just remove $ from your variable prefix, it is not php, it is jquery.

"read more" when clicking on both button and body text

I'm trying to do like http://css-tricks.com/text-fade-read-more/ -- but how do I get it to contact/expand both when clicking on the More button and on the body text?
Clicking on the body text works fine, but it only works the first time with the More button:
http://jsfiddle.net/frank_o/8ssrmxwp/10/
JS:
$.fn.truncate = function(container, maxHeight) {
var totalHeight = 0,
paragraph = container.find('p');
container.css('max-height', maxHeight);
paragraph.each(function() {
totalHeight += $(this).outerHeight(true);
});
if(totalHeight > maxHeight) {
container.append('<div class="fade_overlay"></div>');
$('More').insertAfter(container);
var fadeOverlay = container.parent().find('.fade_overlay'),
more = container.parent().find('.more'),
duration = 100;
// http://stackoverflow.com/questions/4911577/jquery-click-toggle-between-two-functions
function firstClick() {
container.css('height', container.height())
.css('max-height', 9999);
container.animate({
'height': totalHeight
});
fadeOverlay.fadeOut(duration);
// more.fadeOut(duration);
container.one('click', secondClick);
}
function secondClick() {
container.animate({
'height': maxHeight
});
fadeOverlay.fadeIn(duration);
// more.fadeIn(duration);
container.one('click', firstClick);
}
container.one('click', firstClick);
more.one('click', firstClick);
}
}
$('.article').each(function () {
$.fn.truncate($(this), 220);
});
I've tried to lay out the functions differently but to no avail:
http://jsfiddle.net/frank_o/8ssrmxwp/12/
JS:
var oddClick = function(target) {
target.one('click', function() {
var target = $(this);
target.css('height', container.height())
.css('max-height', 9999);
target.animate({
'height': totalHeight
});
fadeOverlay.fadeOut(duration);
// more.fadeOut(duration);
target.one('click', evenClick);
});
}
var evenClick = function(target) {
target.one('click', function() {
var target = $(this);
target.animate({
'height': maxHeight
});
fadeOverlay.fadeIn(duration);
// more.fadeIn(duration);
target.one('click', oddClick);
});
}
oddClick(container);
oddClick(more);
Through more.one('click', firstClick); the event handler gets removed after the first call. Change it to more.on('click', firstClick); and it works.

JQuery continuous image carousel only moving one image at a time?

Currently working on an image carousel and I believe it is 99% done, except for one thing... I can only move one picture at a time, and then I have to rehover in order to keep the slider going. So is there some sort of jump statement or goto statement that I can use to continually run the loops?
Here is what I have so far :
Fiddle
JQuery
$(document).ready(function(){
$('.carousel').each(function(){
if($(this).width() < $(this).children('ul').width()){
$(this).children('carrow').each(function(){
$(this).hide();
});
}
});
$('.carousel').hover(function(){
$(this).children('.carrow').each(function(){
$(this).addClass('carrow-hover');
});
}, function(){
$(this).children('.carrow').each(function(){
$(this).removeClass('carrow-hover');
});
});
$('.carrow').hover(function(){
var SD = 210;
var $carousel = $(this).parent();
var $ul = $carousel.children('ul');
var distance = SD;
var time = 2500;
var rate = distance/time;
//When animation is completed, Jump back to here
distance = Math.abs($ul.position().left);
if($(this).hasClass('left-arrow')){
if(distance == 0) {
$ul.css({left: -210});
$ul.prepend($ul.children('li:last-child'));
} else {
time = distance/rate;
}
$ul.stop().animate({
left: 0
}, time, 'linear');
}
else if($(this).hasClass('right-arrow')){
if(distance != 0){
distance = SD - distance;
time = distance/rate;
}
$ul.stop().animate({
left: -210
}, time, 'linear', function(){
$ul.append($ul.children('li:first-child'));
$ul.css({left: 0});
});
}
}, function(){
$(this).parent().children('ul').stop();
});
});
You can separate animation routine in it's own function, e.g.
function myAnimate(that){
// animation goes here
}
And call itself as a callback function at the animation end
$ul.stop().animate({
left: 0
}, time, 'linear', function(){myAnimate(that)});
This way as soon as one animation ends - the other begins
Demo: http://jsfiddle.net/bjyuA/1/
All I did was loop the part I had wanted and created a few extra dependencies which Yuriy had fixed, but I figured I would share my approach as well.
$('.carrow').hover(function(){
var SD = 210;
var $this = $(this);
var $carousel = $(this).parent();
var $ul = $carousel.children('ul');
var distance = SD;
var time = 2500;
var rate = distance/time;
distance = Math.abs($ul.position().left);
continue_scroll = function(dist) {
time = 2500;
if(arguments.length != 0){
distance = dist;
}
if($this.hasClass('left-arrow')){
if(distance == 0) {
time = 2500;
} else {
time = distance/rate;
}
$ul.stop().animate({
left: 0
}, time, 'linear', function(){
$ul.prepend($ul.children('li:last-child'));
$ul.css({left: -210});
continue_scroll(210);
});
}
else if($this.hasClass('right-arrow')){
if(distance != 0 && arguments.length == 0){
distance = SD - distance;
time = distance/rate;
}
$ul.stop().animate({
left: -210
}, time, 'linear', function(){
$ul.append($ul.children('li:first-child'));
$ul.css({left: 0});
continue_scroll(0);
});
}
}
continue_scroll();
}, function(){
$(this).parent().children('ul').stop();
});

jQuery gallery with setInterval() method does not work correctly when page loses focus

I create jQuery code for listing images every 5 sec - when the focus is on the button which is located on the picture, it must stop changing. I have a problem when my page is lost focus - when I back it dose not work correctly for some time because the coordinates of pictures are not correct!
Here is my SavasSript code:
var displayTimeout = 5000;
var bannerCurrentImgIndex = 0;
var timer;
var link;
function bannerDoWork() {
var bannerImages = $("#myGallery .main_pic");
var bannerImagesCount = bannerImages.length;
if (bannerCurrentImgIndex == bannerImagesCount - 1) {
bannerImages.eq(bannerCurrentImgIndex).animate({ 'left': '-725px' }, 'slow');
bannerImages.eq(0).animate({ 'left': '0' }, 'slow');
bannerImages.eq(bannerCurrentImgIndex - 1).css({ 'position': 'absolute', 'left': '725px' });
bannerCurrentImgIndex = 0;
}
else {
bannerImages.eq(bannerCurrentImgIndex).animate({ 'left': '-725px' }, 'slow');
bannerImages.eq(bannerCurrentImgIndex + 1).animate({ 'left': '0' }, 'slow');
bannerImages.eq(bannerCurrentImgIndex - 1).css({ 'position': 'absolute', 'left': '725px' });
bannerCurrentImgIndex = bannerCurrentImgIndex + 1;
}
}
$(document).ready(function () {
timer = setInterval(function () { bannerDoWork(); }, displayTimeout);
link = $("#myGallery .main_pic_btn");
link.hover(function () { timer = clearInterval(timer); },
function () {
if (timer == null)
timer = setInterval(function () { bannerDoWork(); }, displayTimeout);
});
});
I find answer! I set animate parameter queue=false - and now it works great!
Example:
firstPic.animate({ left: 0, top: 0 }, { queue: false, duration: "slow" });

Categories