zoukankan      html  css  js  c++  java
  • OwlCarousel自定义事件实现上一个、下一个控制()JQuery

    项目中用到了OwlCarousel插件,需要实现上一页、下一页按钮,来控制幻灯片上一张、下一张滚动。

    最后在这个项目中找到了解决方法:

    https://gitee.com/steper/Plugin-OwlCarousel

    这个项目引用的线上静态资源已不能正常访问,为此我调整了这个示例项目,静态资源全部引用本地,上传到了蓝奏云上:https://wwb.lanzouw.com/iReVAy5m6tg

    示例:

     

    通过点击next按钮,实现下一张操作。

    具体实现代码:

    HTML:

           <div class="owl-carousel">
                <div class="item"><h4>1</h4></div>
                <div class="item"><h4>2</h4></div>
                <div class="item"><h4>3</h4></div>
                <div class="item"><h4>4</h4></div>
                <div class="item"><h4>5</h4></div>
                <div class="item"><h4>6</h4></div>
            </div>    
    <button id="next">下一张</button>
    <button id="prev">上一张</button>

    js:

    var owl = $('.owl-carousel');
    owl.owlCarousel({....幻灯片参数...});
    $('#next').on('click', function ()
    {
        owl.trigger('next.owl.carousel', [500]);//下一张
    });
    
    $('#prev').on('click', function ()
    {
        owl.trigger('prev.owl.carousel', [500]);//上一张
    });
  • 相关阅读:
    光庭杯第九题
    NYOJ 95
    NYOJ 31
    NYOJ 26
    HDOJ 1016(DFS)
    memset和memcpy和memcpy
    周期串
    C# BackgroudWorker
    Microsoft® SQL Server® 2008 Express以及Microsoft® SQL Server® 2008 R2 SP1下载地址
    事件(Event)
  • 原文地址:https://www.cnblogs.com/GengMingYan/p/15750873.html
Copyright © 2011-2022 走看看