MHS Mobile Carousel

by Sean Coyne

HTML

<script src="http://labs.rampinteractive.co.uk/touchSwipe/jquery.touchSwipe.min.js"></script>
<script src="http://stage.middlesexhospital.org/mobile/ui/scripts/libs/jquery-plugins/jquery.carouFredSel-6.2.1-packed.js"></script>
<div class="carouselContainer no-js">
    <ul id="carousel">
        <li> <a href="#">
                <span class="image"><img src="http://stage.middlesexhospital.org/images/mhsMobileHomepageCarouselItem/imgCarousel/img-carousel-01.jpg" alt="Alternative Medicine" width="205" height="120" /></span>
                <span class="description">Alternative Medicine<i class="sprite-icons icon-arrow-r"></i></span>
            </a>

        </li>
        <li> <a href="#">
                <span class="image"><img src="http://stage.middlesexhospital.org/images/mhsMobileHomepageCarouselItem/imgCarousel/img-carousel-011.jpg" alt="Another link" width="205" height="120" /></span>
                <span class="description">Another link<i class="sprite-icons icon-arrow-r"></i></span>
            </a>

        </li>
        <li> <a href="#">
            <span class="image"><img src="http://stage.middlesexhospital.org/images/mhsMobileHomepageCarouselItem/imgCarousel/img-carousel-011.jpg" alt="" width="205" height="120" /></span>
            <span class="description">Another<i class="sprite-icons icon-arrow-r"></i></span>
            </a>

        </li>
    </ul>
    <div class="clearfix"></div>
    <div class="carouselNav"></div>
</div>

CSS

.carouselContainer {
    background: #ffffff;
    padding: 35px 0 25px 0;
}
.carouselContainer ul {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0 0 0 70px;
}
.carouselContainer ul li {
    display: inline-block;
    width: 205px;
    list-style: none;
    margin: 0;
    padding: 0 10px 0 0;
    vertical-align: top;
}
.carouselContainer ul li .ui-link {
    color: #2489ce;
    font-weight: bold;
    display: inline-block;
    width: 205px;
    font-size: 15px;
    line-height: 18px;
    text-shadow: none;
    color: #333333;
}
.carouselContainer ul li .ui-link .image {
    display: inline-block;
}
.carouselContainer ul li .ui-link .image img {
    vertical-align: top;
}
.carouselContainer ul li .ui-link .description {
    vertical-align: top;
    width: 185px;
    display: inline-block;
    padding: 10px;
    background: #e5e2db;
    text-align: left;
}
.carouselContainer ul li .ui-link .description .icon-arrow-r {
    background-position: -12px 0;
    width: 12px;
    height: 12px;
    top: 0;
    left: 0;
    margin-top: -2px;
}
.carouselContainer ul li .ui-link:hover {
    color: #555555;
}
.carouselNav {
    text-align: center;
    margin-top: 25px;
}
.carouselNav a {
    background-image: url("http://stage.middlesexhospital.org/mobile/ui/images/sprite-icons.png");
    background-repeat: none;
    background-position: -96px 0;
    width: 12px;
    height: 12px;
    margin: 0 5px 0 0;
    display: inline-block;
}
.carouselNav a.selected {
    background-position: -108px 0;
    width: 12px;
    height: 12px;
    cursor: default;
}
.carouselNav a span {
    display: none;
}

JavaScript

var setupCarousel = function () {
    var $carousel = $('#carousel');

    $carousel.carouFredSel({
        circular: true,
        infinite: true,
        responsive: false,
        direction: "left",
        width: "100%",
        height: null,
        align: "center",
        padding: null,
        synchronise: null,
        cookie: false,
        onCreate: null,
        items: {
            visible: 2,
            minimum: 2,
            start: 0,
            width: null,
            height: null,
            filter: null
        },
        scroll: {
            items: 1,
            fx: "scroll",
            easing: "swing",
            duration: 500,
            pauseOnHover: "immediate-resume",
            queue: false,
            event: "click",
            conditions: null,
            onBefore: null,
            onAfter: null,
            onEnd: null
        },
        auto: true,
        prev: null,
        next: null,
        pagination: {
            container: ".carouselContainer .carouselNav",
            items: 1
        },
        swipe: {
            items: 1,
            onMouse: false,
            onTouch: true
        }
    });
    $('.carouselContainer').removeClass('no-js');

};

$(document).ready(function () {
    setupCarousel();
});