Answered
Carousel
The carousel is not rotating. It's just a picture and numbers. I have a picture and the code. Could anyone help? It looks fine in dreamweaver but this is what I get online.
This topic has been closed for replies.
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.
Nancy
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>
Sign up
Already have an account? Login
To post, reply, or follow discussions, please sign in with your Adobe ID.
Sign inSign in to Adobe Community
To post, reply, or follow discussions, please sign in with your Adobe ID.
Sign inEnter your E-mail address. We'll send you an e-mail with instructions to reset your password.
AdChoices
