Use jQuery Cycle2 which is one of the easiest to implement. Copy & paste the following code into a new, blank document. SaveAs test.html to preview in browsers. For this to work, you need both jQuery and the Cycle2 plugin.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 document with Cycle2</title>
<!--Latest jQuery Core Library-->
<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
<!--Cycle2 Plugin Script-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
<!--Cycle2 Carousel-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.carousel.min.js"></script>
<!--Invoke Cycle2 function on page load-->
<script>$.fn.cycle.defaults.autoSelector = '.slideshow';</script>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {width:90%; margin:0 auto; padding: 1.5%}
.slideshow img {
border:1px solid #999;
}
/* pager */
.cycle-pager {
text-align: center;
width: 100%;
z-index: 500;
position: relative;
top: 0;
}
.cycle-pager span {
font-family: arial;
font-size: 75px;
width: 22px;
height: 22px;
display: inline-block;
color: #ddd;
cursor: pointer;
}
.cycle-pager span.cycle-pager-active { color:#09C; }
.cycle-pager > * { cursor: pointer; }
</style>
</head>
<body>
<h1><a href="http://www.malsup.com/jquery/cycle2/">jQuery Cycle 2</a> Responsive Carousel Slideshow</h1>
<!--begin slideshow-->
<div class="slideshow"
data-cycle-pause-on-hover="true"
data-cycle-fx="carousel"
data-cycle-timeout="2000"
data-cycle-pager="#pager"
data-cycle-carousel-offset="2"
data-cycle-carousel-visible="3"
data-cycle-carousel-fluid="true"
>
<!--INSERT YOUR IMAGES HERE-->
<img alt="description" src="http://placehold.it/350x140/FFFFFF&text=image 1">
<img alt="description" src="http://placehold.it/350x140/000000&text=image 2">
<img alt="description" src="http://placehold.it/350x140/FFFFFF&text=image 3">
</div>
<div class="cycle-pager" id="pager"></div>
<!--end slideshow-->
</body>
</html>
For more options, consult the Cycle2 documentation.
Cycle2
Nancy.
Nancy O'Shea— Product User, Community Expert & Moderator
1 Correct answer
5
Replies
AdChoices