我正在尝试使“猫头鹰”轮播中的元素可拖动,但是似乎没有用.这是我的设置:
HTML:
<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>