Carousel with slanted slides (using Swiper)

HTML

<link rel="stylesheet" href="http://www.idangero.us/sliders/swiper/css/idangerous.swiper.css">
<script src="http://www.idangero.us/sliders/swiper/js/idangerous.swiper.js"></script>
<h1>Top 10 bollywood songs (2014)</h1>

<p>Data as per <a href="http://www.beekays.com/movies/">www.beekays.com</a>

</p>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"> <a class="tile slanted" href="http://www.beekays.com/movies/video/2014/ragini_mms_-_2/3772/" target="_blank">
                <img src="http://i.ytimg.com/vi/kShTN0Jz6Jg/hqdefault.jpg" />
            </a>

        </div>
        <div class="swiper-slide"> <a class="tile slanted" href="http://www.beekays.com/movies/video/2014/ragini_mms_-_2/3843/" target="_blank">
                <img src="http://i.ytimg.com/vi/x8F5dz8kv1w/hqdefault.jpg" />
            </a>

        </div>
        <div class="swiper-slide"> <a class="tile slanted" href="http://www.beekays.com/movies/video/2014/kick/4444/" target="_blank">
                <img src="http://i.ytimg.com/vi/Zti5s48tc7k/hqdefault.jpg" />
            </a>

        </div>
        <div class="swiper-slide "> <a class="tile slanted" href="http://www.beekays.com/movies/video/2014/kick/4361/" target="_blank">
                <img src="http://i.ytimg.com/vi/zHPvJrfti4A/hqdefault.jpg" />
            </a>

        </div>
        <div class="swiper-slide"> <a class="tile slanted" href="http://www.beekays.com/movies/video/2014/bhoothnath_returns/3964/" target="_blank">
                <img src="http://i.ytimg.com/vi/W7kdKf_aqX4/hqdefault.jpg" />
            </a>

        </div>
        <div class="swiper-slide"> <a class="tile slanted" href="http://www.beekays.com/movies/video/2014/entertainment/4300/" target="_blank">
                <img src="http://i.ytimg.com/vi/4-Joa2I7fVg/hqdefault.jpg" />
            </a>

        </div>
        <div class="swiper-slide"> <a class="tile slanted"...

CSS

.swiper-container {
    height: 275px;
}
.swiper-slide {
    float: left;
}
.tile {
    display: block;
    float: left;
    margin-left: 5px;
}
.slanted {
    transform: skewX(-10deg);
    width: 300px;
    overflow: hidden;
    height: 275px;
}
.slanted img {
    transform: skewX(10deg);
    /* anti-alias the skewed edges */
    -webkit-backface-visibility: hidden;
    margin-left: -25px;
    margin-top: -43px;
}

JavaScript

$(function () {
    var swiperObj = $('.swiper-container').swiper({
        slidesPerView: 'auto',
        speed: 500,
        momentumRatio: 1,
        freeMode: true,
        freeModeFluid: true,
        useCSS3Transforms: false,
        offsetPxBefore: 5,
        offsetPxAfter: 5,
        loop: true,
        loopedSlides: 5,
        visibilityFullFit: true,
    });
});