javascript - Draggable event with owl carousel and Jquery UI -
i have problem owl carousel mixed jquery ui.
carousel used show slides various content (html forms , images uploader.)
one of slides contain uploader, dynamicly upload user images, , show thumbnails of images.
one of problems was, content dynamic, , after upload, slide don't change height, user can't see thumbnails.
but done using:
setinterval(function(){ $(".owl-carousel").each(function(){ $(this).data('owlcarousel').updatevars(); }); },3000) so every 3 seconds script update height.
but now, heve problem: user may have option drag thumbnails, can change order of images, show on gallery. have used purpose jquery ui , draggable effect.
but not work, because owl carousel don't allow drag items. code simple, have generic function owl carousel:
$(document).ready(function () { $(".owl-carousel").owlcarousel({ navigation: true, // show next , prev buttons slidespeed: 300, paginationspeed: 400, singleitem: true, autoheight:true, }); and li ement, inside slide (which holds thumbnails):
$( "li" ).draggable({ }); now, code above allow drag <li> element, outside of owl carousel, not thumbnails.
html code simple needs of question:
<div class="owl-carousel"> <div class="item"> <p>text</p> </div> <div class="item"> <p>text</p> </div> <div class="item thumbs"> <ul> <li>here have thumbnail</li> </ul> i need note, may me, if can disable owl carousel swipe effect, , allow change slide, using navigation (attachment) - may good, because thumbnails dragging important.... (red area may disabled, no left / right swiping, slides changes green buttons, , images draggable.)
you can set mousedrag:false. owl-carousel. disable self dragging , enable native one.

Comments
Post a Comment