Regular, default Cycle and Cylce is a slideshow (cycle). You'll need the cycle2 carousel plugin to have a carousel.What I am getting now is all 5 of my images displayed one on top the other, but with no kind of cycle effect.
Code: Select all
<!doctype html>
<__html lang='en' dir='ltr'>
<head>
<meta charset='UTF-8'>
<title>Home - Arrive Alive Trinidad & Tobago</title>
<meta name='viewport' content='initial-scale=1.0 maximum-scale=1.0 user-scalable=no' />
<meta name='HandheldFriendly' content='true' />
<base href="http://localhost:8080/arrivealive/" />
<meta name="Generator" content="CMS Made Simple - Copyright (C) 2004-12 Ted Kulp. All rights reserved." />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel='canonical' href='http://localhost:8080/arrivealive/' />
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arrivealive/tmp/cache/stylesheet_combined_7315ccc485a237e7e3d43c9534a2e39e.css" media="print" />
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arrivealive/tmp/cache/stylesheet_combined_5cf7f2b72242363b369fa59ebcc551bf.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arrivealive/tmp/cache/stylesheet_combined_442d6b03e56a26b18b8b208074066519.css" media="screen and (min-width: 300px) and (max-width: 1024px)" />
<link href='//fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<__script__ src="//html5shiv.googlecode.com/svn/trunk/html5.js"></__script>
<![endif]-->
<link rel="start" title="Home Page, shortcut key=1" href="http://localhost:8080/arrivealive/" />
<link rel="next" title="Road Safety" href="http://localhost:8080/arrivealive/index.php?page=road-safety" />
<link rel="icon"
type="image/jpg"
href="/uploads/images/favicon.png" />
<__script__ type="text/javascript" src="http://localhost:8080/arrivealive/lib/jquery/js/jquery-1.11.0.min.js"></__script>
<__script__ type="text/javascript" src="http://localhost:8080/arrivealive/lib/jquery/js/jquery-migrate-1.2.1.min.js"></__script>
<__script__ type="text/javascript" src="http://localhost:8080/arrivealive/lib/jquery/js/jquery-ui-1.10.4.custom.min.js"></__script>
<__script__ type="text/javascript" src="http://localhost:8080/arrivealive/lib/jquery/js/jquery.ui.nestedSortable-1.3.4.js"></__script>
<__script__ type="text/javascript" src="http://localhost:8080/arrivealive/lib/jquery/js/jquery.json-2.3.min.js"></__script>
<__script__ type="text/javascript" src="uploads/jquery/jquery.cycle.all.js"></__script>
<__script__ type="text/javascript">
$(document).ready(function() {
$('.slider').cycle( {
fx: 'scrollRight',
timeout: 5000,
pause: 1
} );
} );
</__script>
</head>No problem. At this point I'm just trying to see how it all fits together, ie, where to put code and scripts, etc. So it doesn't matter if it's a carousel or a slider, I just want to get something that worksJohnnyB wrote:Looks ok, but this is not going to give you a carousel
I'll try thatJohnnyB wrote:Also, it is very possible that the old Cycle is not compatible with new jQuery...
Here's what I would do:
1) download new cycle2
2) grab the code from the carousel example page I linked to earlier
3) in your template or page, just make a simple list of images, for testing - it can be anything for now
4) initialize the carousel, like the the example page and test
Thanks. I changed it to just images, no divs and I just got all the images displayed side by side and wrapping down to the next row on the page when the first row filled up.Dr.CSS wrote:There's a good chance the first thing you did would have worked except that cycle defaults to look for images and you have/had them in divs which doesn't work automatically, you would have to tell it to cycle the divs...
Code: Select all
href="#"Code: Select all
$(function(){
#('#next').on('click', function(e) {
e.preventDefault();
});
});
I usually use the same sized images to keep things simple. But, I think Cycle2 has some options for responsiveness and auto width/height - visit the api page to see additional settings and if any of them work.FCazabon wrote:I have some other pictures that are not the same size as these ones and I would like to display them as well, but they make the display strange in that I might see half a picture. Is there a way to control the sizes of the images, or should I do another carousel for the differently sized images?
The HTML structure of the pager dots is:How do I get my dots to show up better than the small ones I am getting?
Code: Select all
<div id="pager" class="cycle-pager" align="center"> <span class="cycle-pager-active">•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span></div>Code: Select all
#pager span {font-size:20px; color:black;}
#pager .cycle-pager-active {color:red;}