rtl ignored

[crobarcro]

Hi, I'm trying to get my carousel to go from left to right, but it always goes vertically, I've set up the carousel like so:

// initialise the jcarousell
    var jcarousel = $('.slider-content').jcarousel({wrap:'circular', rtl: true }); 

    jcarousel.jcarouselAutoscroll({ 
        interval:1000,
    }); 

    $('.slider-prev').jcarouselControl({ 
        target: '-=1' 
    }); 

    $('.slider-next').jcarouselControl({ 
        target: '+=1' 
    }); 

my div is like this:

<div class="slider-content" dir="rtl">
     <ul>
         <li><img src= "img/banner_1.svg" alt="Banner 1" /></li>
          <li><img src="img/banner_2.svg" alt="Banner 2" /></li>
         <li><img src="img/banner_3.svg" alt="Banner 3" /></li>
         <li><img src="img/banner_2.svg" alt="Banner 4" /></li>
     </ul>
</div>

my css is like this:

.slider-content {
    position: relative;
    width: 1017px;
    height: 269px;
    overflow: hidden;
    z-index: 1;
}

.slider-content ul {
    list-style-type: none;
    position: relative;
    overflow: hidden;
}

.slider-content[dir=rtl] li {
    float: right;
}

on a separate note, might it be possible to add an autoscroll example?

[jsor]

The <ul> needs a width, see http://sorgalla.com/jcarousel/docs/reference/installation.html#style-the-carousel