I try to create my own JQuery carousel using this code as example http://coolcodez.net/create-infinite-carousel-in-jquery-using-a-few-lines-of-code/
$(document).ready(function () {
$.fn.carousel = function () {
var carousel = $(this);
var width = carousel.find('li').width();
setInterval(function() {
carousel.delay(1000).animate({
right: '+=' + width
}, 1000, function () {
var first = carousel.find('>:first-child');
first.remove();
$(this).append(first);
$(this).css({
right: '-=' + width
});
});
}, 2000);
return $(this);
};
$('#carousel-1').carousel();
});
http://jsfiddle.net/n8b65qbb/33/
I need to shift one image to the left every time, but my script doesn't work properly.
How can I fix it and make it work the right way ?
There are some errors in your code. First, I think the carousel variable should point to the ul, not to the div. The selector for the first variable is weird. Also, you should use detach instead of remove. By the way, there was a "jump" because you're not taking into account the margin between the list items in the animation.
Here's a working version (still needing big improvement):
$(document).ready(function () {
$.fn.carousel = function () {
var carousel = $(this);
var width = carousel.find('li').width() + 15; // Hardcoded margin
setInterval(function () {
carousel.animate({
right: '+=' + width
}, 1000, function () {
var first = carousel.find("li:first-child").detach();
$(this).find("ul").append(first); // The "ul" should be cached
$(this).css({
right: '-=' + width
});
});
}, 2000);
return $(this);
};
$('#carousel-1').carousel();
});
Some thoughts and changes:
I would suggest to constrain your HTML and CSS to the really needed elements to achieve the desired, and that's UL. keep it minimalistic and simple:
<ul id="carousel-1" class="carousel clearfix">
<li>
<img src="http://i.imgur.com/eTxMX2T.jpg" alt="" width="646" height="350">
</li>
<li>
<img src="http://i.imgur.com/VegKfUt.jpg" alt="" width="646" height="350">
</li>
</ul>
therefore that's the only needed CSS you need:
ul.carousel {
list-style: none;
padding:0;
height: 350px;
white-space:nowrap;
overflow:hidden;
font-size:0;
}
ul.carousel li {
display:inline-block;
margin-left:15px;
}
Regarding your plugin, this is a simple way to achieve the desired, looping a function instead of using a setInterval:
(function($) {
$.fn.carousel = function( options ) {
return this.each(function() {
var ul = this,
w = $("li", ul).outerWidth(true);
(function loop(){
$(ul).delay(2000).animate({scrollLeft : w}, 700, function(){
$(this).append( $('li:first', ul) ).scrollLeft(0);
loop();
});
}());
});
};
}(jQuery));
You can see from the code above that there's no hardcoded width values (beside the delay and animation, but on that later) cause of the use of outerWidth(true);which will account paddings, margins , borders of your LI element.
Now you're building a plugin, right? You might want to allow the user to easily modify default Plugin values like:
$('#carousel-1').carousel({
pause : 3400,
animate : 700
});
simply extend your plugin to accept editable options:
(function($) {
$.fn.carousel = function( options ) {
var S = $.extend({ // Default Settings
pause : 2000,
speed : 700
}, options );
return this.each(function() {
var ul = this,
w = $("li", ul).outerWidth(true);
(function loop(){
$(ul).delay(S.pause).animate({scrollLeft : w}, S.speed, function(){
$(this).append( $('li:first', ul) ).scrollLeft(0);
loop();
});
}());
});
};
}(jQuery));
(function($) {
$.fn.carousel = function( options ) {
var S = $.extend({
pause : 2000,
speed : 700
}, options );
return this.each(function() {
var ul = this,
w = $("li", ul).outerWidth(true);
(function loop(){
$(ul).delay(S.pause).animate({scrollLeft : w}, S.speed, function(){
$(this).append( $('li:first', ul) ).scrollLeft(0);
loop();
});
}());
});
};
}(jQuery));
$(function () { // DOM ready
$('#carousel-1').carousel();
});
ul.carousel {
list-style: none;
padding:0;
height: 350px;
white-space:nowrap;
overflow:hidden;
font-size:0;
}
ul.carousel li {
display:inline-block;
margin-left:15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="carousel-1" class="carousel clearfix">
<li>
<img src="http://i.imgur.com/eTxMX2T.jpg" alt="" width="646" height="350">
</li>
<li>
<img src="http://i.imgur.com/VegKfUt.jpg" alt="" width="646" height="350">
</li>
<li>
<img src="http://i.imgur.com/YrU0rrW.jpg" alt="" width="646" height="350">
</li>
<li>
<img src="http://i.imgur.com/eTxMX2T.jpg" alt="" width="646" height="350">
</li>
<li>
<img src="http://i.imgur.com/VegKfUt.jpg" alt="" width="646" height="350">
</li>
<li>
<img src="http://i.imgur.com/YrU0rrW.jpg" alt="" width="646" height="350">
</li>
</ul>
Regarding a better UX, I would also sugget to pause completely your gallery on mouseenter, and restart your animations on mouseleave (though a setInterval might be best suited in that case.)
Related
I am using a responsive slider from http://sachinchoolur.github.io/lightslider/, which implemented the JS, and some CSS. Works great!
My Problem: I have 3 Content-Boxes which show as normal boxes when above 1024px screen width - next to each other. So far so good...
I only want to launch the slider script when the screen size is mobile, below 1024px, and unload it when the screen is resized bigger. But it launches always and I'm also stuck at unloading the script when the screen size changes...
I've attempted several things, but can't achieve that. My JS is not the best tbh...
My current script is the following:
<script>
jQuery(document).ready(function() {
jQuery("#content-slider").lightSlider({
loop:true,
keyPress:true,
item: 1,
enableTouch:true,
enableDrag:true,
freeMove:true,
swipeThreshold: 40,
onSliderLoad: function ($el) {
jQuery(window).on('load', function () {
var windowSize = jQuery(window).width();
if(windowSize <= 1024){
console.log("kleiner 1024");
} else if (windowSize > 1024) {
console.log("größer 1024");
$el.lightSlider = null;
return false;
}
});
jQuery(window).on('resize', function () {
var windowSize = jQuery(window).width();
if(windowSize <= 1024){
console.log("kleiner 1024");
} else if (windowSize > 1024) {
console.log("größer 1024");
$el.lightSlider = null;
return false;
}
});
}
});
});
</script>
The slider has several options to set, shown here in the "Play with settings" section. I thought it would be wise to use the "onSliderLoad" function and check then for screen size. In my script the line with "$el.lightSlider = null;" - i've tried unload, destroy, false, and so on, but i can't get rid of the slider when the screen size changes... not sure if that's even possible meanwhile...
Slider options like mentioned here:
onSliderLoad: function (el) {},
onBeforeSlide: function (el) {},
onAfterSlide: function (el) {},
onBeforeNextSlide: function (el) {},
onBeforePrevSlide: function (el) {}
Also it seems the load-event is not being triggered, as i don't see my console.log...
Would appreciate any help!
Thx & best regards
You can't unload scripts
When a script is loaded/executed, the function definitions are added to the global window object. Unless you assign to a variable then delete it.
Also, if the responsiveness is your problem, there is another solution:
You can set multiple layouts. You can add as many breakpoints as you want.
$('#responsive').lightSlider({
item:4,
loop:false,
slideMove:2,
easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
speed:600,
responsive : [
{
breakpoint:800,
settings: {
item:3,
slideMove:1,
slideMargin:6,
}
},
{
breakpoint:480,
settings: {
item:2,
slideMove:1
}
}
]
});
Doesn't look like there is a built in method for doing that, but you can wrap it in a little class that just manually puts it back the way it originally is. Here, play with these buttons for an example.
class LSWrapper {
constructor() {
this.markup = $('#lightSlider').parent().html();
this.isInit = false;
}
init() {
if (this.isInit) return false;
this.isInit = true;
$('#lightSlider').lightSlider({
gallery: true,
item: 1,
loop: true,
slideMargin: 0,
thumbItem: 9
});
}
destroy() {
if (!this.isInit) return false;
this.isInit = false;
$('#lightSlider').parent().html(this.markup);
$(".lSGallery").remove();
}
}
var slideshow = new LSWrapper();
document.getElementById('init').onclick = () => slideshow.init();
document.getElementById('destroy').onclick = () => slideshow.destroy();
.demo {
width: 420px;
}
ul {
list-style: none outside none;
padding-left: 0;
margin-bottom: 0;
}
li {
display: block;
float: left;
margin-right: 6px;
cursor: pointer;
}
img {
display: block;
height: auto;
max-width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css" />
<button id=init>Create</button>
<button id=destroy>Destroy</button>
<div class="demo">
<ul id="lightSlider">
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-3.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-3.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-8.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-9.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-10.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-12.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-13.jpg" />
</li>
</ul>
</div>
I am trying to make a flowing-down div. I have the following jQuery code for them:
$(".centered-wrapper>main>.event").hoverIntent({
over: function() {
var pos = $(this).position();
$presentationEvent = $(this);
$fullEvent = $(this).clone();
$fullEvent.addClass("full");
$(this).css("visibility", "hidden");
$fullEvent.css({
position: "absolute",
top: pos.top,
left: pos.left
});
$(".centered-wrapper>main").append($fullEvent);
$fullEvent.find("main").slideDown(50, function() {
$fullEvent.find("footer").slideDown(50);
});
$fullEvent.animate({boxShadow: "0px 5px 5px 0px rgba(0,0,0,0.5);"}, 100);
console.log( $(".centered-wrapper>main>.event.full"));
$(".centered-wrapper>main>.event.full").on("mouseout", function() {
$(this).find("main, footer").slideUp(100);
$(this).remove();
$presentationEvent.css("visibility", "visible");
});
},
out: function() {}
});
Everything works well until I move my cursor up and down on that element, because, then it flickers and appears and disappears...
<div class="event">
<header>
<img class="photo" src="/res/users/events-photos/bal.jpg" alt=""/>
<div class="event-card">
<div class="date">
<!-- content -->
</div>
</header>
<main>
<!-- content -->
</main>
<footer>
<!-- content -->
</footer>
</div>
How can I solve this problem and where am I wrong?
You need to disable multiple queued animations. The best way to achieve this is to stop() it.
http://api.jquery.com/stop/
According to documentation:
$( "#hoverme-stop-2" ).hover(function() {
$( this ).find( "img" ).stop( true, true ).fadeOut();
}, function() {
$( this ).find( "img" ).stop( true, true ).fadeIn();
});
In your case:
$fullEvent.find("main").stop(true,true).slideDown(50, function() {
$fullEvent.find("footer").stop(true,true).slideDown(50);
});
and:
$(this).find("main, footer").stop(true,true).slideUp(100);
The visibility hidden code interferes with element hover and causes the flicker. Use another way to hide it. Like
.event:hover
{
opacity: 0;
}
To avoid events from firing use 'pointer-events: none;'
.event:hover
{
opacity: 0;
pointer-events: none;
}
I am working on an image slideshow, and the fadeOut() functionality working with every image change, but the next image appears abruptly. I want it to fade in. I can't seem to get it working.
Here is the code without any fadeIn():
HTML:
<div id="backgroundChanger">
<img class="active" src="background1.jpg"/>
<img src="background2.jpg"/>
<img src="background3.jpg"/>
CSS:
#backgroundChanger{
position:relative;
}
#backgroundChanger img{
position:absolute;
z-index:-3
}
#backgroundChanger img.active{
z-index:-1;
}
Javascript:
function cycleImages(){
var $active = $('#backgroundChanger .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#backgroundChanger img:first');
$next.css('z-index',-2);
$active.fadeOut(1500,function(){
$active.css('z-index',-3).show().removeClass('active');
$next.css('z-index',-1).addClass('active');
});
}
$(document).ready(function(){
setInterval('cycleImages()', 7000);
})
I'd recommend something like this for your interval function:
window.setInterval(function (){
var images = $('#backgroundChanger img');
var active, next;
images.each(function(index, img) {
if($(img).hasClass('active')) {
active = index;
next = (index === images.length - 1) ? 0 : index + 1;
}
});
$(images[active]).fadeOut(1000, function() {
$(images[next]).fadeIn(1000);
});
$(images[next]).addClass('active');
$(images[active]).removeClass('active');
}, 3000);
And this is all you'd need for your css:
#backgroundChanger img:first-child {
display: block;
}
#backgroundChanger img {
display: none;
}
And keep the same HTML and you should be good to go!
You can fadeIn() the next image in the callback of fadeOut() as shown below:
$(window).load(function() {
var $slider = $("#backgroundChanger"),
$slides = $slider.find("img"),
$firstSlide = $slides.first();
function cycleImages() {
var $active = $('#backgroundChanger .active'),
$next = ($active.next().length > 0) ? $active.next() : $firstSlide;
$active.fadeOut(1000, function() {
$active.removeClass('active');
$next.fadeIn(1000).addClass('active');
});
}
setInterval(cycleImages, 3000);
})
#backgroundChanger img {
position: absolute;
width: 150px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="backgroundChanger">
<img class="active" src="http://i46.tinypic.com/2epim8j.jpg" />
<img src="http://i49.tinypic.com/28vepvr.jpg" />
<img src="http://i50.tinypic.com/f0ud01.jpg" />
</div>
Notes:
Since we're dealing with images, It's better to use load() handler than ready() to make sure the slide show starts after the images are loaded
You can slightly improve the performance by caching the elements accessed frequently
You don't have to play with z-index property at all since both fadeIn() and fadeOut() changes the elements `display property itself
i have found this simple jQuery code for a slideshow below from this blog.
http://leavesofcode.net/2012/08/17/simple-slideshow/
It perfectly works in the project i am working on right now, where i can call the images with jQuery load() function and the slideshow still works. Although i would like to implement a previous and next button in the same code if its possible. Any help would be really appreciated. Please help thanks.
Here is the code: http://jsfiddle.net/mblase75/CRUJJ/
<script>
$(document).ready(function() {
setInterval(function() {
var $curr = $('.slideshow img:visible'), // should be the first image
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
// if there isn't a next image, loop back to the first image
$next.css('z-index',2).fadeIn('slow', function() { // move it to the top
$curr.hide().css('z-index',0); // move this to the bottom
$next.css('z-index',1); // now move it to the middle
});
}, 6000); // milliseconds
});
</script>
<div class="slideshow">
<img src="first-image.jpg" width="500" height="100" alt="first image">
<img src="second-image.jpg" width="500" height="100" alt="second image">
<img src="third-image.jpg" width="500" height="100" alt="third image">
<img src="fourth-image.jpg" width="500" height="100" alt="fourth image">
</div>
<style>
.slideshow {
position: relative; /* necessary to absolutely position the images inside */
width: 500px; /* same as the images inside */
height: 100px;
}
.slideshow img {
position: absolute;
display: none;
}
.slideshow img:first-child {
display: block; /* overrides the previous style */
}
</style>
You'll need to create functions for getNext and getPrev and attach those as event handlers to the elements you want to move you forward and backward through the slideshow.
I created a common transition function which is shared by both the getNext and getPrev functions so that the transition code can be shared.
In the below example, clicking the next or previous buttons will pause the slideshow, though it would be easy to change it to continue the automatic transitions.
Working Demo
var interval = undefined;
$(document).ready(function () {
interval = setInterval(getNext, 2000); // milliseconds
$('#next').on('click', getNext);
$('#prev').on('click', getPrev);
});
function getNext() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
transition($curr, $next);
}
function getPrev() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
transition($curr, $next);
}
function transition($curr, $next) {
clearInterval(interval);
$next.css('z-index', 2).fadeIn('slow', function () {
$curr.hide().css('z-index', 0);
$next.css('z-index', 1);
});
}
Use your code in click event of next button.
Something like this:
$("#button_id").click(function(){
all your lines in **setInterval**
});
For previous button use .prev instead of .next
responsive slideshow free jquery script
I used the above script in a project recently and its responsive, lightweight, fully customizable with or without buttons. My recommendation..
Add a couple of img in your HTML like this:
<div class="slideshow">
<img src="first-image.jpg" width="500" height="100" alt="first image">
<img src="second-image.jpg" width="500" height="100" alt="second image">
<img src="third-image.jpg" width="500" height="100" alt="third image">
<img src="fourth-image.jpg" width="500" height="100" alt="fourth image">
</div>
<img src="prev.jpg" width="50" height="50" id="imgPrev">
<img src="next.jpg" width="50" height="50" id="imgNext">
and change your javascript like this:
$(document).ready(function() {
$("#imgNext").click(function() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
$next.css('z-index',2).fadeIn('slow', function() {
$curr.hide().css('z-index',0);
$next.css('z-index',1);
});
});
$("#imgPrev").click(function() {
var $curr = $('.slideshow img:visible'),
$prev = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
$prev.css('z-index',2).fadeIn('slow', function() {
$curr.hide().css('z-index',0);
$prev.css('z-index',1);
});
});
set
Interval(function() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
$next.css('z-index',2).fadeIn('slow', function() {
$curr.hide().css('z-index',0);
$next.css('z-index',1);
});
}, 6000); // milliseconds
});
I tried it with your code on fiddler and it works :)
I know this is old, but correct the below:
$('.slideshow :first-child').fadeOut(1000).next('img').fadeIn(1000).end().appendTo('#slideshow');
.slideshow {
width: 100%;
position: relative;
height: auto;
}
.slideshow img:first-child { position:relative; } /*auto height adjust*/
.slideshow img {
top: 0;
left: 0;
width: 100%;
max-width: 600px;
height: auto;
position: absolute;
}
Just trying to figure on a reverse. All the above are nice, but the transitions were, uh, not smooth. Using class's for a reason on this one.
Try
$('.next').click(function(){
$('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
})
I have for images with a number on it. Those numbers are 1-4. I want to place them numerically and when the user clicks on 1, i want them to go to slide 1 and if they click on 2, then slide 2. This also needs to have a sliding effect.
I am using this particular javascript code below for left and right options but i am not sure if I can re-use this for my purpose:
HTML would be something like:
<img src="#" class="image_one">
<img src="#" class="image_two">
<img src="#" class="image_three">
<img src="#" class="image_four">
<div class="content_for_image_One" id="slide1">
You see this when you click on image 1
</div>
<div class="content_for_image_two" id="slide2">
You see this when you click on image 2
</div>
<div class="content_for_image_three" id="slide3">
You see this when you click on image 3
</div>
<div class="content_for_image_four" id="slide4">
You see this when you click on image 4
</div>
<script type="text/javascript">
$(document).ready(function () {
var $sliderMask = $('#slider_mask');
var $slideContainer = $('#slide_container');
var $slides = $slideContainer.find('.slide');
var slideCount = $slides.length;
var slideWidth = $sliderMask.width();
$slideContainer.width(slideCount * slideWidth);
$slides.width(slideWidth);
var currentSlide = 0;
function animate() {
$slideContainer.stop().animate({ marginLeft: -(currentSlide * slideWidth) + 'px' }, 'slow');
}
$('#left_button').on('click', function () {
currentSlide = (currentSlide - 1 + slideCount) % slideCount;
animate();
});
$('#right_button').on('click', function () {
currentSlide = (currentSlide + 1) % slideCount;
animate();
});
$('#click_left').on('click', function () {
currentSlide = (currentSlide - 1 + slideCount) % slideCount;
animate();
});
$('#click_right').on('click', function () {
currentSlide = (currentSlide + 1) % slideCount;
animate();
});
});
</script>
Your provided html does not fit to your code, but let's assume you have the following html:
<div id="slidesWrapper">
<div id="slidesContainer">
<div class="slide"><!-- your html --></div>
<div class="slide"><!-- your html --></div>
<div class="slide"><!-- your html --></div>
<div class="slide"><!-- your html --></div>
</div>
</div>
<div id="thumbnails">
<img src="#" class="thumb" />
<img src="#" class="thumb" />
<img src="#" class="thumb" />
<img src="#" class="thumb" />
</div>
with the following css:
#slidesWrapper {
width: 1000px;
height: 400px;
overflow: hidden;
position: relative;
}
#slidesContainer {
width: auto;
position: aboslute;
}
.slide {
float: left;
height: 400px;
}
you could use something like:
(function($){
$(function() {
var wrapper = $('#slidesWrapper'),
container = $('#slidesContainer'),
slides = container.children(),
thumbs = $('#thumbnails').children();
container.css('left', '0');
thumbs.click(function() {
var index = $('thumbnails').children().index(this);
container.stop().animate({
left: '-' + slides.eq(index).position().left + 'px'
}, 1000);
});
});
})(jQuery);
its not tested though and I dont quite get what you want. This example fits if you have a wrapper with slides in it and only one can be visible, fixed width and height
function next()
{
var mar=$("#img_ul").css("margin-left");
var nm=mar.replace("px","");
if(nm==0)
{
$("ul").animate({"marginLeft":"-500px"},"slow");
}
else if(nm>0 || nm!=-2000)
{
nm=nm-500;
$("ul").animate({"marginLeft":nm+"px"},"slow");
}
else if(nm==-2000)
{
$("ul").animate({"marginLeft":"0px"},"slow");
}
}
function previous()
{
var mar=$("#img_ul").css("margin-left");
var nm=mar.replace("px","");
if(nm==0)
{
$("ul").animate({"marginLeft":"-2000px"},"slow");
}
else
{
nm=+nm + +500;
$("ul").animate({"marginLeft":nm+"px"},"slow");
}
}
</script>
</head>
<body>
<div id="slide_wrapper">
<ul id="img_ul">
<li>
<q>
Learn everything you can, anytime you can, from anyone you can there will always come a time when you will be grateful
you did.
</q>
</li>
<li>
<q>
Make it simple. Make it memorable. Make it inviting to look at. Make it fun to read.
</q>
</li>
<li>
<q>
If plan A fails, remember there are 25 more letters.
</q>
</li>
<li>
<q>
Do not go where the path may lead, go instead where there is no path and leave a trail.
</q>
</li>
<li>
<q>
A journey of a thousand miles must begin with a single step.
</q>
</li>
</ul>
</div>
<input type="button" id="previous" value="Previous" onclick="previous();">
<input type="button" id="next" value="Next" onclick="next();">
code from TalkersCode complete tutorial here http://talkerscode.com/webtricks/content-slider-using-jquery-and-css.php