Home & blog  /  Scripts  /  view post  /

Carousel with wrap effect

Overview

This carousel actually wraps slides as they're bumped off the edges. That is, if a slide is bumped off the right edge, it reappears in equal measure from the left edge. The 'on' slide is always centered, widened and given full opacity. The other slides huddle around it, narrower and semi-opaque. An auto-rotator turns on each slide in turn, or you can force a slide on by clicking it (interrupting the auto-rotate). Clicking the 'on' slide takes you to its corresponding URL, specified in the config file.

Example:

Let the slides auto-rotate, or click one to force it on. Click the 'on' slide to go to its URL.

^^ top of page

Usage & params

The only thing to do at page level is to set up a container that the carousel will be inserted into. For the example above, I used:

'carouselHolder'>

All the actual preferences and styling are set in the script file itself, in the clearly-marked 'PREFERENCES' and 'STYLING' sections respectively.

All data regarding the actual slides (image SRCs, caption text etc) is set in the JSON-formatted config.txt file. As you'll see in there, each slide's data is wrapped in curly braces.

The params you can edit in the script file include:

Preferences

pathTo_configFile (string) - the path to the slides data config file (relative to the page)

pathTo_imgsDir (string) - the path to the directory where your slide images are

spaceBetweenSlides (integer) - pixel value of the space separating each slide from its neighbours

startSlideOutDuration (integer) - when the carousel loads, the slides animate to their starting positions. This is the number of seconds that animation takes.

transitionDuration (objject) - the speed in seconds of the visual transition between turning the 'on' slide off and turning the next one on

css.pauseDuration (integer) - the duration during auto rotation that a slide will be 'on' before it is turned off and the next one turned on

CSS

wrapper (obj.) - CSS to style the main wrapper for the entire carousel

carousel (obj.) - CSS to style the carousel itself (i.e. the

    that holds the
  • slides)

    slides (obj.) - CSS to style the slides

    slide_on (obj.) - CSS to style the 'on' (i.e. centered) slide

    captionHolders (obj.) - CSS to style the wrapper around each slide's caption headline and text

    captionHeadings (obj.) - CSS to style the caption heading for each slide

    captionText (obj.) - CSS to style the caption text for each slide

    pauseIcon (obj.) - when the mouse enters the carousel area, the auto-rotate feature stops; that is, the carousel is paused. An || pause icon is DOM-scripted onto the carousel to denote this - you can style it here.

    Download the source code ZIP to see how I've set up the config and styling on the demo carousel above.

    ^^ top of page

    Notes

    Use odd number of slides

    Make sure you have an odd number of slides, otherwise it will look odd because the 'on' slide is centered. If there were, say, 4 slides, the 'on' slide would have an unequal number of slides either side of it.

    Dependencies (nearly none!)

    The only HTML dependency is an element to act as a container for the carousel. Apart from that, there are no HTML or CSS dependencies - everything is done by the script.

    Also, as of 10 Sept 2010, there is no dependency on my Domscripter script (this was previously pulled in to help out with creating the elements that make up the carousel).

    I hate IE

    For a reason I cannot yet fathom, IE errors when trying to do the transition animation. I spent an hour trying to debug this and hit a blank. Unfortunately, this means that, in IE, for now at least, the transition is immediate, not animated. In decent browsers, all looks lovely.

    ^^ top of page
    post new comment

    Comments (14)

    siteHELP, at 25/09/'10 00:14, said: 
    Nice one, however the Pause feature is a tad jittery. It continuously blinks on click ( in FF )

Also probs make sense to add << and >> features, as most people are clickaholics.

Good work, Ste
    Mitya, at 28/09/'10 11:42, said: 
    Thanks, Ste, glad you like my carousel. Re: the FF issue you report, I'm not able to recreate that. What FF are you using and can you describe how to recreate the error?

Thanks
    web.design, at 7/10/'10 13:21, said: 
    I can reproduce the issue mentioned (FF 3.6):
When you click the pause button, it starts blinking.
When leaving the carousel area with the mouse cursor, the pause button disappears,
and when you enter the carousel area again, the pause button reappears, but apparently has stopped blinking.
    Mitya, at 7/10/'10 14:00, said: 
    I see the problem now. The pause button is right to disappear when you move the mouse off the carousel, and is right to reappear when you move the mouse back over the carousel. But the blinking is a bug. I'll fix it when I can. Thanks.
    , at 10/10/'10 10:32, said: 
    The above issue is now fixed, along with a few other tweaks. Please see the changelog (above, right column, under script info)
    stan stefano, at 4/11/'10 13:03, said: 
    Great script - thank you. Decided to use it on this site: www.directfinancebulgaria.com however there seems to be a problem displaying the carousel in IE. I have posted the problem here - http://developers.squarespace.com/design-coding/post/1293642

I would very much appreciate your help with the issue if possible.
    Mitya, at 7/11/'10 12:52, said: 
    Hi Stan. Does it work on my site in IE?
    stan stefano, at 8/11/'10 15:13, said: 
    It appears to be working on your site. :-(
    Mitya, at 8/11/'10 15:23, said: 
    Actually, it doesn't work well on my site in IE7 in general. I will try to fix it when I get time.
    Okoweb, at 29/12/'10 07:25, said: 
    I do this : data.php for config.txt

$sql = 'SELECT id, titre, front, description  FROM    albums ORDER BY id DESC LIMIT 3';
$statement = $db->prepare($sql);
$statement->execute(array());
$tabl_results = $statement->fetchAll();
$data = array();
foreach($tabl_results as $tabl_result){
         array_push($data, array('bgImgURL' => $tabl_result['front'], 'linkURL' => 'album.php?id='.$tabl_result['id'], 'headline' => $tabl_result['titre'], 'caption' => tronque($tabl_result['description'],100)));
       }

       header('Cache-Control: no-cache, must-revalidate');
       header('Content-type: application/json');
       echo json_encode($data);

In jquery.carouseljs
var pathTo_configFile = 'data.php';

it's work but when i modified LIMIT in data.php
$sql = 'SELECT id, titre, front, description  FROM    albums ORDER BY id DESC LIMIT 5';
my page was redirect on album.php?id=2 at my second json item in data.php.

Where's the problem?
    OKoweb, at 29/12/'10 07:33, said: 
    

It's possible to insert this code in the body on my page?
In my website i have header.php common on all my pages and jquery.carousel are start all pages. It's not correct.
    Mitya, at 29/12/'10 09:20, said: 
    The PHP is immaterial; provided it produces valid JSON, the carousel will work. I don't completely understand your problem. Put it online and give me the URL so I can see.
    OKoweb, at 30/12/'10 06:26, said: 
    See there  The carousel was start, after the carousel script redirect my home page at  I don't no why?
    mitya, at 31/12/'10 19:08, said: 
    I have no idea what's causing the redirect. For the time being I would say don't use this carousel as I need to do more work on it to fix some of the cross-browser errors.
    post new comment