Current File : /home/admin/public_html/old/happyezystyle/Slides/examples/multiple/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slides, A Slideshow Plugin for jQuery</title>
<style type="text/css" media="screen">
/*
Load CSS before JavaScript
*/
/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/
#slides .slides_container {
width:200px;
height:170px;
display:none;
}
/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/
#slides .slides_container div {
width:200px;
height:170px;
display:block;
}
/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/
#slides_two .slides_container {
width:200px;
display:none;
}
/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/
#slides_two .slides_container div {
width:200px;
height:200px;
display:block;
}
/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/
#slides_three .slides_container {
width:200px;
display:none;
}
/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/
#slides_three .slides_container div {
width:200px;
height:200px;
display:block;
}
/*
Example only
*/
.pagination .current a {
color:red;
}
hr {
background:#efefef;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
$(function(){
$('#slides').slides({
generateNextPrev: false,
generatePagination: false,
play: 2500
});
$('#slides_two').slides({
generateNextPrev: false,
generatePagination: false,
play: 4500
});
$('#slides_three').slides({
generateNextPrev: false,
play: 6500,
generatePagination: false,
autoHeight: true
});
/*
You could also combin them all
But you can't customize each this way
$('#slides,#slides_two,#slides_three').slides({
preload: true,
generateNextPrev: true
});
*/
/*
Or use a class for all three
If all three had class="slides"
Same here can't customize each this way
$('.slides').slides({
preload: true,
generateNextPrev: true
});
*/
});
</script>
</head>
<body>
<div id="slides">
<div class="slides_container">
<div>
<h1></h1>
<p><img src="images/kcc.jpg" width="200" height="220" /></p>
</div>
<div>
<h1></h1>
<p><img src="images/kto.jpg" width="200" height="186" /></p>
</div>
</div>
</div>
<hr>
<div id="slides_two">
<div class="slides_container">
<div>
<h1></h1>
<p><img src="images/promice.jpg" width="200" height="176" /></p>
</div>
<div>
<h1></h1>
<p> <img src="images/banner_indexnew_03.jpg" width="200" height="183" /></p>
</div>
</div>
</div>
<hr>
<div id="slides_three">
<div class="slides_container">
<div>
<h1></h1>
<p> <img src="images/STO.jpg" width="200" height="167" /></p>
</div>
<div>
<h1></h1>
<p> <img src="images/STO.jpg" width="200" height="167" /></p>
</div>
</div>
</div>
</body>
</html>