jQuery offers some neat effects that are easy to integrate into your website. All the user needs is JavaScript enabled in their browser to view the slideshows. It’s a clean way to present items such as upcoming tournaments, important news or announcements. Research shows that people gravitate towards images and visual representations of announcements – which makes a slideshow a great addition to any Region website
Here is a link to SLIDEJS, a simple one to use. They have multiple options for the slideshow, including text versions, image versions and a version with thumbnails. You can even change the transitions from a slide to fade.
The code is as simple as shown below:
<!doctype html>
<head>
<title>Title</title>
<style type="text/css" media="screen">
.slides_container {
width:570px;
height:270px;
}
.slides_container div {
width:570px;
height:270px;
display:block;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="slides.js"></script>
<script>
$(function(){
$("#slides").slides();
});
</script>
</head>
<body>
<div id="slides">
<div class="slides_container">
<div>
<img src="http://placehold.it/570x270">
</div>
<div>
<img src="http://placehold.it/570x270">
</div>
<div>
<img src="http://placehold.it/570x270">
</div>
<div>
<img src="http://placehold.it/570x270">
</div>
</div>
</div>
</body></html> To use the slideshow:
- Download the code.
- Copy the code to your server.
- Modify the images/text for your use.
To view the full example and source, click here.
Is there a way to create a slideshow without using JavaScript? We have some security concerns with respect to JavaScript. Can this be done using strictly HTML/CSS? The marquis tag in HTML works, but its not the elegant solution I am hoping for. Thanks.
ReplyDeleteI was able to find an example using solely CSS3. It moves completely without JavaScript. This page has a complete example, along with the source code you can use.
ReplyDeleteCSS3 Slideshow Example