Nancy OShea wrote: Osgood's answer uses an HTML5 document with the Cycle 2 plugin. I have not tested Cycle 2 in an X/HTML4 document. I suspect it might work OK, but those data attributes would definitely throw validation errors in anything other than an HTML5 document. |
Yes, it works in a html4 document. I've 'cleaned' it up - only 5 errors, the data attributes - they can be ignored.
<!------HTML 4 VERSION ------------>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cycle2 Carousel Pager</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://malsup.github.io/jquery.cycle2.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<style type="text/css">
* {
box-sizing: border-box;
}
.slideshow {
position: relative;
width: 50%;
max-width: 600px;
margin: 0 auto;
}
.cycle-slideshow img {
width: 100%;
height: auto;
display: block;
}
.controls {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
z-index: 2;
top: 50%;
transform: translateY(-50%);
}
.cycle-1 {
position: relative;
z-index: 1;
}
.cycle-1 div {
width:100%;
}
.controls em {
font-size: 30px;
padding: 10px 15px;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
}
.controls em:hover {
background-color: rgba(0, 0, 0, 0.4);
}
</style>
</head>
<body>
<div class="slideshow">
<div class="controls">
<a href="#" class="cycle-prev"><em class="fa fa-angle-left" aria-hidden="true"></em></a>
<a href="#" class="cycle-next"><em class="fa fa-angle-right" aria-hidden="true"></em></a>
</div>
<!-- end controls -->
<div class="cycle-1 cycle-slideshow"
data-cycle-slides="> div"
data-cycle-timeout="4000"
data-cycle-prev=".slideshow .cycle-prev"
data-cycle-next=".slideshow .cycle-next"
>
<div><img src="http://images.all-free-download.com/images/graphiclarge/butterfly_on_flower_196575.jpg" alt=""/> </div>
<div><img src="http://images.all-free-download.com/images/graphiclarge/monarch_butterfly_on_flower_196546.jpg" alt=""/></div>
<div><img src="http://images.all-free-download.com/images/graphiclarge/butterfly_on_flower_196576.jpg" alt=""/></div>
<div><img src="http://images.all-free-download.com/images/graphiclarge/butterfly_flower_01_hd_pictures_166973.jpg" alt=""/></div>
</div>
<!-- end cycle-1 -->
</div>
<!-- end slideshow -->
</body>
</html>
<!------HTML 5 VERSION ------------> (now no validation errors - if that troubles some people)
<!DOCTYPE html>
<html>
<head>
<title>Cycle2 Carousel Pager</title>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
* {
box-sizing: border-box;
}
.slideshow {
position: relative;
width: 50%;
max-width: 600px;
margin: 0 auto;
}
.cycle-slideshow img {
width: 100%;
height: auto;
display: block;
}
.controls {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
z-index: 2;
top: 50%;
transform: translateY(-50%);
}
.cycle-1 {
position: relative;
z-index: 1;
}
.cycle-1 div {
width:100%;
}
.controls em {
font-size: 30px;
padding: 10px 15px;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
}
.controls em:hover {
background-color: rgba(0, 0, 0, 0.4);
}
</style>
</head>
<body>
<div class="slideshow">
<div class="controls">
<a href="#" class="cycle-prev"><em class="fa fa-angle-left" aria-hidden="true"></em></a>
<a href="#" class="cycle-next"><em class="fa fa-angle-right" aria-hidden="true"></em></a>
</div>
<!-- end controls -->
<div class="cycle-1 cycle-slideshow"
data-cycle-slides="> div"
data-cycle-timeout="4000"
data-cycle-prev=".slideshow .cycle-prev"
data-cycle-next=".slideshow .cycle-next"
>
<div><img src="http://images.all-free-download.com/images/graphiclarge/butterfly_on_flower_196575.jpg" alt=""> </div>
<div><img src="http://images.all-free-download.com/images/graphiclarge/monarch_butterfly_on_flower_196546.jpg" alt=""></div>
<div><img src="http://images.all-free-download.com/images/graphiclarge/butterfly_on_flower_196576.jpg" alt=""></div>
<div><img src="http://images.all-free-download.com/images/graphiclarge/butterfly_flower_01_hd_pictures_166973.jpg" alt=""></div>
</div>
<!-- end cycle-1 -->
</div>
<!-- end slideshow -->
</body>
</html>
1 Correct answer
19
Replies
AdChoices
