Using jquery slider for text instead of images?
It might be too specific, but I have a jquery slider in which I use classes <p>
instead of images to loop through customer quotes. Basically the problem I am facing now is that when it is static and not moving (JS code starts) they are aligned the way I want. Once the JS is uncommented, it goes out of sight and you just see a white box?
Any ideas?
How I want each panel to look like this:
source to share
So, I did this project on Friday. I changed all of your code and added vertical alignment to citations and authors.
Here's a fiddle http://jsfiddle.net/qLca2fz4/49/
I've added a lot of variables to the beginning of the script so you can type all over the place.
$(document).ready(function () {
//rotation speed and timer
var speed = 5000;
var run = setInterval(rotate, speed);
var slides = $('.slide');
var container = $('#slides ul');
var elm = container.find(':first-child').prop("tagName");
var item_width = container.width();
var previous = 'prev'; //id of previous button
var next = 'next'; //id of next button
Since you used a% based width, I am setting the pixel width of the elements in case the screen has changed.
slides.width(item_width); //set the slides to the correct pixel width
container.parent().width(item_width);
container.width(slides.length * item_width); //set the slides container to the correct total width
As it was, I rearrange the slides when the Back button is pressed
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();
I have combined the prev and next click events into one function. It checks the id of the element targeting the click event, then fires the appropriate previous or next functions. If you reset setInterval after a click event, your browser can't stop it on hover.
//if user clicked on prev button
$('#buttons a').click(function (e) {
//slide the item
if (container.is(':animated')) {
return false;
}
if (e.target.id == previous) {
container.stop().animate({
'left': 0
}, 1500, function () {
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();
});
}
if (e.target.id == next) {
container.stop().animate({
'left': item_width * -2
}, 1500, function () {
container.find(elm + ':last').after(container.find(elm + ':first'));
resetSlides();
});
}
//cancel the link behavior
return false;
});
I found mouseenter and mouseleave to be slightly more reliable than hovering.
//if mouse hover, pause the auto rotation, otherwise rotate it
container.parent().mouseenter(function () {
clearInterval(run);
}).mouseleave(function () {
run = setInterval(rotate, speed);
});
I changed this to my own function because it gets called in several different places.
function resetSlides() {
//and adjust the container so current is in the frame
container.css({
'left': -1 * item_width
});
}
});
//a simple function to click next link
//a timer will call this function, and the rotation will begin :)
And here's your spin timer.
function rotate() {
$('#next').click();
}
source to share
It took me a little while, but I think I figured out a few things.
http://jsfiddle.net/qLca2fz4/28/
Firstly, your console was throwing several errors: firstly, this rotation was not defined and that the gif arrow did not exist. The Arrow gif was probably what you saved locally, but I changed the "rotate" error by changing the lines in the code here to your actual variables.
So from:
run = setInterval('rotate()', speed);
We get:
run = setInterval(rotate, speed);
(No () based on the examples here: http://www.w3schools.com/jsref/met_win_setinterval.asp )
But I think the more important question is why your text doesn't appear at all. This is due to the logic found here:
$('#slides ul').css({'left' : left_value});
You even say this sets the default location for the code. But that's not ... "left_vaule" is the amount you calculated to push to the left during the slide. So if you check the element, you will see how the entire UL is basically shifted one slide that is too far away to be seen. So we get rid of the "left_value" and replace it with 0.
$('#slides ul').css({'left' : 0});
Now there is nothing to deal with how the images move, so the part is still rough, but that should be enough to get you started.
Let me know if I don't understand something or you have any questions.
source to share
So a few things:
1) I believe you are trying to get everything to li
be side-by-side rather than being placed up and down. There are several ways to do this. I would just make it ul
300% wide and then make li
each one take up a third of that:
#slides ul {
....
width: 300%;
}
#slides li {
width: calc(100% / 3);
height:250px;
float:left;
}
2) You got it right, but the JSFiddle automatically wraps all your JS inside a handler $(document).ready()
, and your function rotate
should be outside, in a regular DOM. Just change the JSFiddle setting from "onload" to "no wrap-in head"
3) Grabbing an element's CSS value doesn't always work, especially when you're dealing with animated elements. You already know the width of the elements li
with your variable item_width
. I would just use this and change your code:
var left_indent = parseInt($('#slides ul').css('left')) - item_width;
$('#slides ul').animate({'left' : left_indent}, 1500, function () {
in
$('#slides ul').stop().animate({'left' : -item_width * 2}, 1500, function () {
4) Discard .stop()
as shown in the above line. This will prevent duplicate animation. An alternative and possibly cleaner way of doing this would be simply return false
at the beginning of your next and prev functions, if animated #slides ul
, for example:
if ($('#slides ul').is(':animated')) return false;
And I think that's all. Here's a JSFiddle . Hooray!
EDIT:
Oh, and you may also want clearInterval
at the beginning of the functions next
and prev
and then reset in the animation callback functions:
$('#prev').click(function() {
if ($('#slides ul').is(':animated')) return false;
clearInterval(run);
$('#slides ul').stop().animate({'left' : 0}, 1500,function(){
....
run = setInterval('rotate()', speed);
});
});
source to share