javascript-带有jQuery UI Draggable的Owl Carousel

2019-11-21 19:48:47 阅读：279 来源： 互联网

标签：jquery-ui draggable carousel javascript jquery

我正在尝试使“猫头鹰”轮播中的元素可拖动,但是似乎没有用.这是我的设置：

<div id="owl" class="owl-carousel">
        <div class="my-owl-item"></div>
        <div class="my-owl-item"></div>
        <div class="my-owl-item"></div>
</div>

JS / jQuery：

jQuery(function(){
        //init carousel
        $(".owl-carousel").owlCarousel({
            autoPlay:false,
            rewindSpeed:500,
            navigation:false,
            pagination:false,
            slideSpeed:1500,
            mouseDrag:false
        });

        //set up draggable
        jQuery( '.my-owl-item' ).draggable({
            start: function( event, ui ) {console.log('dragging');},
            helper : 'clone'
        });
});

我禁用了对旋转木马的鼠标拖动功能,因为虽然这可能是原因.正在触发可拖动的启动功能-按预期将调试消息输出到控制台.该元素也正在被克隆.因此,除了我无法拖动它以外,其他所有方法似乎都可以正常工作！

任何帮助,不胜感激.

解决方法:

为此,您需要编辑owl-carousel.js文件以使其与Draggable事件完美配合,因为默认情况下,在owl-carousel.js中它仅可沿x方向拖动.当我编辑js文件时,您便可以实现所需的功能.
这是编辑的js文件的链接
https://www.dropbox.com/s/2lia6kkeimka94o/owl.carousel.js

在要初始化Owl-carasoul的jquery中,只需删除mouseDrag事件.并将jquery ui放在body标签的末尾. H

这是我的配置

<script>
    $(document).ready(function() {

      var owl = $("#owl-demo");

      owl.owlCarousel({

        // Define custom and unlimited items depending from the width
        // If this option is set, itemsDeskop, itemsDesktopSmall, itemsTablet, itemsMobile etc. are disabled
        // For better preview, order the arrays by screen size, but it's not mandatory
        // Don't forget to include the lowest available screen size, otherwise it will take the default one for screens lower than lowest available.
        // In the example there is dimension with 0 with which cover screens between 0 and 450px

        itemsCustom : [
          [0, 2],
          [450, 4],
          [600, 7],
          [700, 9],
          [1000, 10],
          [1200, 12],
          [1400, 13],
          [1600, 15]
        ],
        navigation : true

      });



    });
    </script>

和

<script>
jQuery( '.item' ).draggable({
start: function( event, ui ) {console.log('dragging');}
});
</script>

对于头部标签

<!-- Owl Carousel Assets -->
    <link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
    <link href="../owl-carousel/owl.theme.css" rel="stylesheet">

和html标记是

<div id="demo">
        <div id="owl-demo" class="owl-carousel">

          <div class="item"><h1>1</h1></div>
          <div class="item"><h1>2</h1></div>
          <div class="item"><h1>3</h1></div>
          <div class="item"><h1>4</h1></div>
          <div class="item"><h1>5</h1></div>
          <div class="item"><h1>6</h1></div>
          <div class="item"><h1>7</h1></div>
          <div class="item"><h1>8</h1></div>
          <div class="item"><h1>9</h1></div>
          <div class="item"><h1>10</h1></div>
          <div class="item"><h1>11</h1></div>
          <div class="item"><h1>12</h1></div>
          <div class="item"><h1>13</h1></div>
          <div class="item"><h1>14</h1></div>
          <div class="item"><h1>15</h1></div>
          <div class="item"><h1>16</h1></div>
          <div class="item"><h1>17</h1></div>
          <div class="item"><h1>18</h1></div>
          <div class="item"><h1>19</h1></div>
          <div class="item"><h1>20</h1></div>

        </div>
    </div>

标签：jquery-ui,draggable,carousel,javascript,jquery
来源： https://codeday.me/bug/20191121/2054153.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-带有jQuery UI Draggable的Owl Carousel