Skip to main content
T
Turning Turtle
Participating Frequently
December 15, 2016
Answered

Carousel

  • December 15, 2016
  • 2 replies
  • 2076 views

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.
Correct answer osgood_

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>

2 replies

T
Turning TurtleAuthor
Participating Frequently
December 15, 2016

So I think I have the fix and now all of my pictures just show-up as an jpeg image thumbnail. Not the picture the symbol of a picture!!! What the heck is going on!!!!!

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
December 15, 2016

It's really simple. In code view, replace all the placeholder images in my code with your own images.  

<img src="http://lorempixel.com/1180/400/technics/4" alt="...">

<img src="http://lorempixel.com/1180/400/technics/3" alt="...">

<img src="http://lorempixel.com/1180/400/technics/2" alt="...">

<img src="http://lorempixel.com/1180/400/technics/1" alt="...">

Note.  You must be working in a defined local site folder.  If not, DW cannot properly manage assets for you.

Nancy O'Shea— Product User & Community Expert
O
osgood_
Legend
December 16, 2016

I have the two JS files showing in dreamweaver. Why would they not be uploaded?


How efficient are you when copying code and transferring it across to your page. Below is some simple code for a carousel - you just need to swap the images for your own images.

<!doctype html>

<html>

<head>

<title>Cycle2 Carousel Pager</title>

<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">

</head>

<body>

<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;

top: 45%;

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;

}

.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>

<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="0"

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"> </div>

<div><img src="http://images.all-free-download.com/images/graphiclarge/monarch_butterfly_on_flower_196546.jpg"></div>

<div><img src="http://images.all-free-download.com/images/graphiclarge/butterfly_on_flower_196576.jpg"></div>

<div><img src="http://images.all-free-download.com/images/graphiclarge/butterfly_flower_01_hd_pictures_166973.jpg"></div>

</div>

<!-- end cycle-1 -->

</div>

<!-- end slideshow -->

</body>

</html>

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
December 15, 2016

Please post a link to your page in progress, unfortunately pictures of snippets of code won't suffice.

If you can't upload your page to a test location on a server you control and post a link to it here, a distant second would be to copy/paste the entire code of the page into the forum (don't use email, the code won't come through).

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices