Swiper之onClick触发自定义的url

需求：

Swiper轮番图触发onClick事件，然后触发Slide自定义的url或者获取其属性

实现：

<div class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide" url-val="${basePath}/cms/article/list">
            <img src="${basePath}static/common/images/home_img.jpg" alt="" />
        </li>
        <li class="swiper-slide" url-val="${basePath}">
            <img src="${basePath}static/common/images/home_img_index.jpg" alt="" />
        </li>
        <li class="swiper-slide" url-val="${basePath}/itemTm/list">
            <img src="${basePath}static/common/images/home_img_tmh.jpg" alt="" />
        </li>
        <li class="swiper-slide" url-val="${basePath}/cms/article/list">
            <img src="${basePath}static/common/images/home_img.jpg" alt="" />
        </li>
    </ul>
    <div class="swiper-pagination">
    </div>
</div>

对应的js操作：

<script type="text/javascript">
    (function($) {
        var swiper = new Swiper('#home_page .swiper-container', {
            autoplay: 3000,
            pagination: '#home_page .swiper-pagination',
            loop: true,
            onClick: function(swiper) {
                window.location.href = swiper.clickedSlide.attributes["url-val"].nodeValue;
            }
        });

    })(jQuery)
</script>

更多优质资源请访问http://www.someabcd.com