I want to make an image slide show.

How It Works

Get an answer in three easy steps. Here's how it works...

Ask Your Question

1. Ask Your Question

Enter your jQuery question at the top of this page and click Get An Answer.

Pick Your Priority

2. Pick Your Priority

Tell us how quickly you want your jQuery question answered.

Get An Answer

3. Get An Answer

Connect with your programmer via online chat or telephone call.

Answer

Customer

I want to make an image slide show.

Posted
Albert Shohez
Programmer

There are a lot of image slide show jquery plugins, One of the most famous is jquery cycle (http://jquery.malsup.com/cycle/). its very simple to use.

at first add 2 library (jquery & jquery.cycle) at your html header. Than add an script like this

$('.your class/#your id').cycle({
    fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});

and then add a div with your class or id names and inside the div, add some images.

here is a demo code:

<!doctype html>
<html>
<head>
<title>JQuery Cycle Plugin - Example Slideshow</title>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>

<!--  initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
});
</script>
</head>
<body>
    <div class="slideshow">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
    </div>
</body>
</html>
Posted
Customer

thank you.

Posted

quoteTestimonialsquote

About ExpertHelp

ExpertHelp is changing the way you connect with service professionals.

Whether you have a quick question while preparing your taxes, troubleshooting a computer problem, or need to hire an attorney, ExpertHelp is the most convenient and affordable way to connect with the right service professional to get the job done.

ExpertHelp has been in business since 2011, is an A+ Rated Better Business Bureau accredited member, and offers a 100% satisfaction guarantee on every question you ask!

More jQuery Questions...

Ask Your jQuery Question & Get An Answer Now!