CODEWITHSUNDEEP
jquery
Jack
Jack

Reputation: 33

Using JQuery to change images with mouse click

I am trying to make a image slideshow. I have no experience with Jquery and I need some help. So basically I have an image in a div#slideshow. I want to put multiple images in there and with the power of Jquery, when a user clicks the left/right button it will change to the next image. Here is my code for the HTML Part -

<!DOCTYPE html>
<html lang="en">
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>
body {
background: url(bg.png);
width: 999px;
font-family: 'Open Sans', sans-serif;
margin: 0 auto;
}
p {
color: #222;
}
a {
color: #777;
font-size: 14px;
font-weight: bold;
text-decoration: none;
padding: 10px;
}
#nav {
float: right;
}
#slideshow {
width: 999px;
margin: 100px -50px;
}
#content {
background: #FFF;
padding: 50px;
height: 500px;
border-radius: 1px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id="content">
<div id="nav">
<a href="..">Home</a>
<a href="..">About</a>
<a href="..">Work</a>
<a href="..">Contact</a>
</div>
<div id="slideshow">
<img src="image.jpg" />
</div>
</div>
</body>
</html>

Upvotes: 1

Views: 535

Answers (1)

mbinette
mbinette

Reputation: 5094

Look into the SlidesJS plugin for jQuery. Here is the example page: http://www.slidesjs.com/#examples

There are a lot more plugins that do this (ResponsiveSlides for example), but this one is pretty simple and you should be able to figure it out.

Upvotes: 2

Related Questions