So I'm in the process of creating a pretty simple jQuery/CSS slideshow for a course of mine. It's about ten pages long, and right now it works fine if you want to just go from beginning to end in that order, but if you need to refresh the page for any reason, it sends you back to the first page. Since it's on the longer end, I'd like to be able to "click" to a certain page... is this possible without getting too complicated?
Here's my jQuery
function checkNav() {
if ($('.active-slide').hasClass('first')) {
$('.prev').hide();
$('.next').show();
} else if ($('.active-slide').hasClass('last')) {
$('.next').hide();
$('.prev').show();
} else {
$('.next').show();
$('.prev').show();
}
}
var main = function() {
checkNav();
$('.next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next('.slide');
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
//if nextslide is last slide, go back to the first
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut(500).removeClass('active-slide');
nextSlide.fadeIn(1100).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
checkNav();
});
//prev slide function
$('.prev').click(function() {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev('.slide');
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
//if prevslide is last slide, go back to the first
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
checkNav();
});
};
$(document).ready(main);
And here's a rough markup of what the HTML looks like
<div class="slide active-slide first">
<div class="content">
<p>First Slide</p>
</div>
</div>
<div class="slide">
<div class="content">
<p>second slide</p>
</div>
</div>
<div class="slide last">
<div class="content">
<p>third slide</p>
</div>
</div>
<div class="slider-nav">
<div class="prev">prev</div>
<ul class="dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<div class="next">next</div>
</div>
Here's the jsFiddle ... I'd like to be able to click on one of the bullets and go to that corresponding slide....
$('ul.dots li').click(function(){
var num = $(this).index();
var currentSlide = $('.active-slide');
var nextSlide = $('.slide:eq('+num+')');
var currentDot = $('.active-dot');
var nextDot = $(this);
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
checkNav();
});
Add IDs to the divs. For instance:
<div class="slide active-slide first" id="1">
<div class="content">
<p>First Slide</p>
</div>
</div>
<div class="slide" id="2">
<div class="content" >
<p>second slide</p>
</div>
</div>
<div class="slide last" id="3">
<div class="content">
<p>third slide</p>
</div>
</div>
Then you can target specific slides using something like:
<ul class="dots">
<li class="dot active-dot"><a onclick="goto(1)">•</a></li>
<li class="dot"><a onclick="goto(2)">•</a></li>
<li class="dot"><a onclick="goto(3)">•</a></li>
</ul>
<script>
function goto(slide){
$(".slide").removeClass("active-slide");
$("#"+slide).addClass("active-slide");
$("#"+slide).show();
}
We need a way to "index" these items, I will do it by child so add a parent div class called slider:
<div id="slider">
...slides here...
</div>
You need to use localStorage (used to save data between pages) to keep track of both what slide you are on and what dot you are on in the nav bar. This can save data even when we leave the page (when it refreshes), making it so we still know our last page we where on. I will use this to keep track of the current index of each slide. So when the page loads we need to check that if our localStorage item exist:
// If we have saved data add it's index to active-slide
if(localStorage.getItem("activeSlide")) {
$("#slider div.slide")
.eq(localStorage.getItem("activeSlide"))
.addClass("active-slide");
$('.dots li.dot')
.eq(localStorage.getItem("activeSlide"))
.addClass("active-dot");
} else { // Otherwise make them both 0
$("#slider div.slide")
.eq('0')
.addClass("active-slide");
$('.dots li.dot')
.eq('0')
.addClass("active-dot");
}
Then when we move to the next slide next or the last slide prev we update the localStorage item to the current index of the item in active-slide:
// Make the current index of the item in active slide our updated variable
localStorage.setItem( "activeSlide",
$("#slider div.slide").index($(".active-slide")) );
Here is a working example
This way when the page refreshes we stay on the last slide we where looking at before.
<!doctype html>
<html>
<head>
<style>
body{
text-align: center;
}
#slideshow{
margin:0 auto;
width:600px;
height:450px;
overflow: hidden;
position: relative;
}
#slideshow ul{
list-style: none;
margin:0;
padding:0;
position: absolute;
}
#slideshow li{
float:left;
}
#slideshow a:hover{
background: rgba(0,0,0,0.8);
border-color: #000;
}
#slideshow a:active{
background: #990;
}
.slideshow-prev, .slideshow-next{
position: absolute;
top:180px;
font-size: 30px;
text-decoration: none;
color:#fff;
background: rgba(0,0,0,0.5);
padding: 5px;
z-index:2;
}
.slideshow-prev{
left:0px;
border-left: 3px solid #fff;
}
.slideshow-next{
right:0px;
border-right: 3px solid #fff;
}
</style>
</head>
<body>
<div id="slideshow">
«
<ul>
<li><img src="1.jpg" alt="photo1" /></li>
<li><img src="2.jpg" alt="photo2" /></li>
<li><img src="3.jpg" alt="photo3" /></li>
<li><img src="4.jpg" alt="photo4" /></li>
</ul>
»
</div>
<!--
We use Google's CDN to serve the jQuery js libs.
To speed up the page load we put these scripts at the bottom of the page
-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
//an image width in pixels
var imageWidth = 600;
//DOM and all content is loaded
$(window).ready(function() {
var currentImage = 0;
//set image count
var allImages = $('#slideshow li img').length;
//setup slideshow frame width
$('#slideshow ul').width(allImages*imageWidth);
//attach click event to slideshow buttons
$('.slideshow-next').click(function(){
//increase image counter
currentImage++;
//if we are at the end let set it to 0
if(currentImage>=allImages) currentImage = 0;
//calcualte and set position
setFramePosition(currentImage);
});
$('.slideshow-prev').click(function(){
//decrease image counter
currentImage--;
//if we are at the end let set it to 0
if(currentImage<0) currentImage = allImages-1;
//calcualte and set position
setFramePosition(currentImage);
});
});
//calculate the slideshow frame position and animate it to the new position
function setFramePosition(pos){
//calculate position
var px = imageWidth*pos*-1;
//set ul left position
$('#slideshow ul').animate({
left: px
}, 300);
}
</script>
</body>
</html>
Related
I'm having a two issues/problems with the following slide.
It is a "double slider", so, two simultaneous slider in body section.
First is that when i reach the last image (9-nth, cos that much both sliders contain), the second slider continues to work properly (sliding images infinitely) but the first one just get blank.
Or if i click on previous button on begining then second doesn't work and images disapear, while the first one work nicely. Can't figure it out why. I've tried changing the "id" in the HTML and styling it but nothing change.
Second is, that i finally need to make it more dynamic, so, to avoid hardcoding images in the HTML and to putt them in JS and somehow append them in the DOM, but don't know what exactlly to do; creating an array, or using the "createElement"?
And which logic could be usable to actually include them in the DOM and have the following slider(s), considering the provided code?
Since it's my just second slider which i'm making, i found it pretty much hard, so any help/hint/advice is welcomed.
P.S Must be in jQuery and plugins excluded, so please don't provide any plugins links.
Thank you in advance.
var slides = $('.slide');
slides.first().before(slides.last());
$('button').on('click', function() {
// Selecting the slides
slides = $('.slide');
// Selecting button
var button = $(this);
// Register active slide
var activeSlide = $('.active');
// Next function
if (button.attr('id') == 'next') {
slides.last().after(slides.first());
activeSlide.removeClass('active').next('.slide').addClass('active');
}
// Previous function
if (button.attr('id') == 'previous') {
slides.first().before(slides.last());
activeSlide.removeClass('active').prev('.slide').addClass('active');
}
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.slider {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.slide {
width: 100%;
height: 300px;
position: absolute;
transition: 0.6s ease;
transform: translate(-100%, 0);
}
.slide img {
width: 100%;
height: 300px;
}
.slide.active {
transform: translate(0, 0);
}
.slide.active~.slide {
transform: translate(100%, 0);
}
body {
text-align: center;
}
button {
margin-top: 20px;
border: none;
border-radius: 0;
background: aqua;
color: #333;
padding: 10px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
<div class="slide active">
<img src="Assets/slider-image-1.jpg" alt="">
</div>
<div class="slide">
<img src="Assets/slider-image-2.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-3.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-4.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-5.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-6.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-7.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-8.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-9.jpg">
</div>
</div>
<div class="slider">
<div class="slide active">
<img src="Assets/slider-image-1.jpg" alt="">
</div>
<div class="slide">
<img src="Assets/slider-image-2.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-3.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-4.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-5.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-6.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-7.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-8.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-9.jpg">
</div>
</div>
<button id="previous"><img src="Assets/arrow-blue-left.png" alt=""></button>
<button id="next"><img src="Assets/arrow-blue-right.png" alt=""></button>
Your code doesn't work properly because the slides = $('.slide') variable contains all slides from both sliders. You have to manipulate the slides in the to sliders independently. The second failure is that in your example the first slide is the initial active slide. Only slides in range second -> penultimate are allowed. Working example here
function handleSlide(slider, direction) {
var slides = $(slider).find('.slide');
if(slides.length < 1) return;
// Register active slide
var activeSlide = $(slider).find('.active');
// Next function
if (direction == 'next') {
slides.last().after(slides.first());
activeSlide.removeClass('active').next('.slide').addClass('active');
}
// Previous function
if (direction == 'previous') {
slides.first().before(slides.last());
activeSlide.removeClass('active').prev('.slide').addClass('active');
}
}
$('button').on('click', function() {
var button = $(this);
handleSlide($("#slider1"), $(button).attr('id'));
handleSlide($("#slider2"), $(button).attr('id'));
});
Loading images dinamically: You can do that by defining an array which contains the images and you can append the images into the slider using the jQuery 'append' method. Working example on jsFiddle.
function fillSliders(slider, images) {
$(slider).empty();
for(var i = 0; i < images.length; i++) {
if(typeof images[i] == "string" && images[i] !== "") {
var active = (i == 1) ? " active" : "";
$(slider).append('<div class="slide'+active+'"><img src="'+images[i]+'"
alt="image-'+i+'" /></div>');
}
}
}
var images = ["image1.jpg", "image2.jpg","image3.jpg","image4.jpg"];
fillSliders($("#slider"), images);
I have written code with a click function. If the user clicks "next", set class "onscreen" to the next element.
What I want is the element that has class "onscreen" to scroll to top with animation duration of 1s.
This is my code:
HTML
<div class="slides">
<div class="slide onscreen" id="one">one</div>
<div class="slide" id="two">two</div>
<div class="slide" id="third">third</div>
<div class="slide" id="fourth">fourth</div>
</div>
<div class="buttons">
<button class="next" onclick="slide(this.className)">
Next slide
</button>
<button class="prev" onclick="slide(this.className)">
Previous slide
</button>
</div>
CSS
.buttons{
width:170px;
position:fixed;
top:10px;
left:50%;
margin-left:-85px;
}
.onscreen {
background-color: green;
}
Javascript
window.onload = function() {
var slide = document.getElementsByClassName("slide");
for (var i = 0; i < slide.length; i++) {
var heightslide = slide[i].offsetHeight;
}
console.log(heightslide);
}
var active = document.getElementsByClassName("onscreen");
function slide(prevnext) {
if (prevnext === "next") {
if (active[0].nextElementSibling) {
active[0].nextElementSibling.className = "slide onscreen";
active[0].className = "slide";
}
} else {
if (active[0].previousElementSibling) {
active[0].previousElementSibling.className = " slide onscreen ";
active[active.length - 1].className = "slide";
}
}
}
Hope somebody can help me with this.
Thanks a lot
I created a fade slider with images, text and links. I'd like to add some navigation bullets below it to control the images.
like this :
http://www.parallaxslider.com/preview_images/skins/bullets_skin.jpg
Here is the slider code:
html
<div class="slides">
<div class="slidiv">
<a href="..." ><img src="..." >
<span> text1 </span></a>
</div>
<div class="slidiv">
<a href="..." ><img src="..." >
<span> text2 </span></a>
</div>
<div class="slidiv">
<a href="..." ><img src="..." >
<span> text3 </span></a>
</div>
<div class="slidiv">
<a href="..." ><img src="...">
<span> text4 </span></a>
</div>
</div>
CSS
.slides {
overflow:hidden;
top:0;
position:relative;
width:100%;
height:206px;
z-index:920;
border-bottom:white 6px solid;
}
.slides img {
position:absolute;
left:0;
top:0;
}
.slides span {
position: absolute;
right: 100px;
top: 160px;
color:white !important;
font-size:20px;
}
Javascript
<script type="text/javascript">
$(function() {
$('.slides .slidiv:gt(0)').hide();
setInterval(function () {
$('.slides').children().eq(0).fadeOut(2000)
.next('.slidiv')
.fadeIn(2000)
.end()
.appendTo('.slides');
}, 6000); // 6 seconds
});
</script>
You have to define a unique id for each slide, then build html for circles (make sure you have a way of referencing which circle matches up to which slide). Then you capture the on click event, clear the interval, cycle forward until the slide in the "current" position matches the circle, then create the interval again. And of course every time it cycles forward you need to set a visual cue for the circle associated with the active slide.
(Demo)
HTML
<div class="slider">
<div class="slides">
<div class="slidiv" id="1">
<a href="...">
<img src="http://placehold.it/350x150/3296fa/ffffff">
<span>text1</span>
</a>
</div>
<div class="slidiv" id="2">
<a href="...">
<img src="http://placehold.it/350x150/fa9632/ffffff">
<span>text2</span>
</a>
</div>
<div class="slidiv" id="3">
<a href="...">
<img src="http://placehold.it/350x150/ff3399/ffffff">
<span>text3</span>
</a>
</div>
<div class="slidiv" id="4">
<a href="...">
<img src="http://placehold.it/350x150/33ff99/ffffff">
<span>text4</span>
</a>
</div>
</div>
<div class="circles">
</div>
</div>
CSS
.circles, .circle {
display: inline-block;
}
.circles {
position: relative;
left: 50%;
transform: translateX(-50%);
}
.circle {
padding: 5px;
border-radius: 100%;
border: 1px solid #444;
}
.active {
background: rgb(50, 150, 250);
}
JAVASCRIPT
$(function () {
$('.slides .slidiv:gt(0)').hide();
$.fn.setActive = function () {
if ($(this).hasClass("slider")) {
$(".active", $(this)).removeClass("active");
$("#circle-" + $(".slidiv:first-child", $(this),$(this)).attr("id"),$(this)).addClass("active");
return this;
}
return false;
}
$.fn.cycleFwd = function(rateStart,rateEnd) {
if ($(this).hasClass("slider")) {
$('.slides', $(this)).children()
.eq(0)
.fadeOut(rateStart)
.next('.slidiv')
.fadeIn(rateEnd)
.end()
.appendTo($('.slides', $(this)));
$(this).setActive($('.slidiv:first-child',$(this)).attr("id"));
return this;
}
return false;
}
$.fn.cycleFwdTo = function (id,rate) {
if($(this).hasClass("slider")) {
var current = $(".slidiv:first-child", $(this));
if(current.attr("id") === id) return true;
var count = id;
if(current.attr("id") > id) {
count = Number(current.nextAll().length) + Number(id) + 1;
}
if(count - current.attr("id") === 1) {
$(this).cycleFwd(rate,2000);
} else {
$(this).cycleFwd(rate,0);
$(this).cycleFwdTo(id,0);
}
return this;
}
return false;
}
$(".circle").on("click", function () {
clearInterval(window.interval);
var newFirst = $(this).attr("data-moveto");
$(this).parent().parent().cycleFwdTo(newFirst,2000);
var self = this;
window.interval = setInterval(function () {
$(self).parent().parent().cycleFwd(2000,2000);
}, 6000); // 6 seconds
});
$('.slider').each(function(){
var self = this;
window.interval = setInterval(function () {
$(self).cycleFwd(2000,2000);
}, 6000); // 6 seconds
});
});
EDIT:
This answer is not very good because it does not very well explain how it works, but this falls into "I could write a novel" explaining all of the different methods of doing what the OP has asked and how each method works. If someone else wanted to come along and offer better explanations of how this code works, I would approve.
how will i go on to added a class to li class='active' on click and also on page load have the first li ( overview ) active by default ?
<ul>
<li>Overview</li>
<li>Reviews</li>
<li>News</li>
<li>Gallery</li>
</lu>
<div id='overview' style='display: none;'>
<!-- overview content -->
</div>
<div id='articles' style='display: none;'>
<!-- arcticles content -->
</div>
<div id='news' style='display: none;'>
<!-- news content -->
</div>
<div id='gallery' style='display: none;'>
<!-- gallery content -->
</div>
<script type="text/javascript">
function showdiv(id){
document.getElementById(id).style.display = "block";
}
</script>
Here is a Quick JSFiddle Demo that demonstrates swapping classNames and display of divs in pure JavaScript.
var toggleDiv = function(self, id) {
var li = self.parentNode,
contents = document.getElementsByClassName('content'),
menu = document.getElementById('menu'),
children = menu.children,
child = undefined,
i = 0;
// Loop over all content divs and show the active and hide all others.
for (i = 0; i < contents.length; i++)
contents[i].style.display = contents[i].id == id ? 'block' : 'none';
// Loop over all menu items and add active class to the selected
// and remove from others if applicable.
for (i = 0; i < children.length; i++) {
child = children[i];
if (child === li) {
child.className = (child.className + ' active').trim();
} else {
if (child.className.indexOf('active') > -1) {
child.className = child.className.replace('active', '').trim();
}
}
}
}
<ul id="menu">
<li>Overview</li>
<li>Reviews</li>
<li>News</li>
<li>Gallery</li>
</ul>
<div id="overview" class="content">Overview...</div>
<div id="reviews" class="content">Reviews...</div>
<div id="news" class="content">News...</div>
<div id="gallery" class="content">Gallery...</div>
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
position: relative;
display: inline-block;
width: 80px;
background: #4679BD;
color: #FFFFFF;
text-align: center;
}
li>a {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
.content {
display: none;
}
.active {
background: #064CA8;
}
You should consider using jQuery if you have not already. It really makes these a bit easier.
Strictly speaking, here is one way: (untested)
<ul>
<li>Overview</li>
<li>Reviews</li>
<li>News</li>
<li>Gallery</li>
</ul>
<div id='overview' style='display: none;'>
<!-- overview content -->
</div>
<div id='articles' style='display: none;'>
<!-- arcticles content -->
</div>
<div id='news' style='display: none;'>
<!-- news content -->
</div>
<div id='gallery' style='display: none;'>
<!-- gallery content -->
</div>
<script type="text/javascript">
function showdiv(id, a){
if (window.activeA != undefined) {
window.activeA.className = ''; // delcare window.activeA, if not already exists
}
document.getElementById(id).style.display = "block";
a.className = 'active';
window.activeA = a;
}
</script>
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