Loading...
 

Comments

  • Slightly less kruft...?
    jonnybradley Tue 22 of Mar, 2011 23:38 GMT

    Hi

    I just had to implement a tiny carousel thing on a 6.2 site recently (and didn't have time to make the plugin i've been meaning to for ages) so here's what i ended up with:

    Infinite Carousel on 6.x markup
    {DIV(class="small_carousel")}
    * {img fileId="18" height="120" width="180"}
    * {img fileId="19" height="120" width="180"}
    * {img fileId="20" height="120" width="180"}
    * {img fileId="21" height="120" width="180"}
    * {img fileId="22" height="120" width="180"}
    * {img fileId="23" height="120" width="180"}
    * {img fileId="24" height="120" width="180"}
    * {img fileId="25" height="120" width="180"}
    * {img fileId="26" height="120" width="180"}
    * {img fileId="27" height="120" width="180"}
    * {img fileId="28" height="120" width="180"}
    * {img fileId="29" height="120" width="180"}
    * {img fileId="30" height="120" width="180"}
    {DIV}
    {JQ()}$('.small_carousel').tiki("carousel", "", {
        displayThumbnails : false,
        textholderHeight : false,
        transitionSpeed: 2000,
        displayTime: 2000,
        displayProgressBar: false,
        showControls: false,
        easeLeft: 'jswing',
        easeRight: 'jswing',
    });{JQ}


    and css was

    css
    .small_carousel {
    	height: 120px;
    	width: 180px;
    	overflow: hidden;
    	position: relative;
    	padding: 0;
    	margin: 0;
    }
    
    .small_carousel ul {
    	position: relative;
    	padding: 0;
    	margin: 0;
    }
    
    .small_carousel li {
    	display:inline;
    	float:left;
    	background-image: none;
    	padding: 0;
    }


    Hope it helps

Switch Theme

Layout

Subscribe to Tiki Newsletters!

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other big news!
Contribute to Tiki

Site Config