Angular Carousel with different image sizes

812 Views Asked by At

I am trying to create a carousel using AngularJS Touch Carousel directive for my Ionic Framework mobile app.

Carousel Used: https://github.com/revolunet/angular-carousel

My Fiddle: http://jsfiddle.net/Purus/tsvpu9cs/

The problem is that my images can be of any size. I am not sure how to get a good carousel when the image sizes are different as shown in the fiddle.

Below is the HTML code.

<ul rn-carousel>
    <li>
        <div>
            <img src="http://files.parsetfss.com/f37c58f4-0d3b-4a98-9d18-1dcf4c0275f9/tfss-9a967bc5-bc21-425c-8468-2851493501b3-blouse.png" />
        </div>
    </li>
    <li>
        <div>
            <img src="http://files.parsetfss.com/f37c58f4-0d3b-4a98-9d18-1dcf4c0275f9/tfss-8886c78e-9641-43ba-b1b9-a503ef8dec5c-blouse.png" />
        </div>
    </li>
    <li>
        <div>
            <img src="http://files.parsetfss.com/f37c58f4-0d3b-4a98-9d18-1dcf4c0275f9/tfss-cc260a35-94b4-4d4d-b6e5-d280565ed983-blouse.png" />
        </div>
    </li>
    <li>
        <div>
            <img src="http://files.parsetfss.com/f37c58f4-0d3b-4a98-9d18-1dcf4c0275f9/tfss-2d818bea-f838-4d60-a99b-19c6655f33e5-blouse.png" />
        </div>
    </li>
</ul>

CSS is below:

ul {
    width: 500px;
    height:150px;
}
0

There are 0 best solutions below