owl-carousel

How can I make my owl carousel direction follow the mouse wheel direction

由 a 夏天 提交于 2019-12-11 03:14:47
问题 When i scroll mouse wheel it moves but when i change scrolling direction it does not change its direction. How can i make my owl carousel direction follow the mouse wheel direction ? When i scroll mouse wheel it moves but when i change scrolling direction it does not change its direction. How can i make my owl carousel direction follow the mouse wheel direction ? var owl = $('.owl-carousel'); owl.owlCarousel({ loop: true, margin: 10, padding: 10, responsiveClass: true, rtl: false,

Why iron-router does not render carousel?

由 故事扮演 提交于 2019-12-11 03:06:32
问题 it works perfectly when I make it like this <body> {{> carousel}} </body> <Template name="carousel"> ....here the code of carousel... </Template> but when I use iron-router to render the Template; it does not render carousel <body> {{rendreRouter}} </body> <Template name="carousel"> ....here the code of carousel... </Template> Router.map(function () { this.route('carousel',{ path: '/' }); }); 回答1: I'm coming to the conclusion that the documentation you're reading is not in sync with the code

Destroy and initialize Owl Carousel based on viewport size

由 我是研究僧i 提交于 2019-12-10 22:08:16
问题 I've read a bunch of discussions about this, but none of them have solved this for me. I am using enquire.js to do my viewport conditions and my code is as follows: var $slider = $('#home-farms-slider'), sliderOptions = { items: 1, animateOut: 'fadeOut', animateIn: 'fadeIn' }; enquire.register("screen and (min-width: 1000px)", { match : function() { $slider.owlCarousel(sliderOptions); }, unmatch : function() { $slider.trigger('destroy.owl.carousel'); } }); Everything is working as expected

change owl carousel 2 options after setup?

由 纵然是瞬间 提交于 2019-12-10 19:41:03
问题 I'm searching for change owl carousel 2 options after setup more specifically. I am searching a way to disable drag of parent element of the drag element like this: $('#carousel').on('drag.owl.carousel', function(event) { $('.carousel').on('drag.owl.carousel', function(event) { //disable drag }) }) $('#carousel').on('dragged.owl.carousel', function(event) { $('.carousel').on('dragged.owl.carousel', function(event) { //enable drag }) }) 回答1: Rather than try to disable the drag via hooking into

Owl Carousel - Items are stacking on top of each other

由 怎甘沉沦 提交于 2019-12-10 12:30:26
问题 I'm trying to group images into groups of 8, and use each grouping as a separate slide for Owl Carousel. However, rather than stacking horizontally like normal, the groupings are just stacked vertically. My owl settings: //Gallery carousel gallery(); function gallery(){ $('.gallery').owlCarousel({ margin: 10, nav: true, items: 1, }); } The php generating the HTML (uses ACF gallery plugin for WordPress) <!-- Gallery Thumbs --> <?php $images = get_field('gallery'); if( $images ): ?> <div class=

Can not add dynamically items to Owl Carousel in Javascript

由 前提是你 提交于 2019-12-10 10:53:20
问题 I'm trying to dynamically add items to an Owl carousel. Here is how I'm doing it: HTML <div id="avatar-carousel" class="owl-carousel lesson-carousel"> <div class="item item-logo"> <div class="product-item"> <div class="carousel-thumb" style="height: 77px!important;width: 70px;" > <img src="http://placehold.it/140x100" alt=""> </div> </div> </div> <!-- Start Item --> </div> <button id="click"> click </button> JS $("#avatar-carousel").owlCarousel({ items: 5 }); $("#click").click(function(){ $('

The clicked item should be in center in owl carousel

由 我怕爱的太早我们不能终老 提交于 2019-12-09 22:58:32
问题 $(".owl-carousel").owlCarousel({ margin:10, dots:false, nav:true, responsive:{ 0:{ items:1 }, 600:{ items:3 }, 1000:{ items:5 } } }); The Above is my Owl carousel. Now i need clicked owl-item should be center. please any me 回答1: You can trigger the to.owl.carousel event when the user clicks on the item. This event causes the Owl Carousel to move to a specific position. I've set the data-position attribute for each div inside the carousel before initializing the carousel. Then I use this

owl carousel 2 not work with loop and 1 items (Bug Fixed Now)

由 喜夏-厌秋 提交于 2019-12-09 16:36:11
问题 I work with owl carousel 2 for carousel content. JS: $('#owl-demo').owlCarousel({ loop: true, margin: 10, nav: true, items: 1, }); HTML: <div id="owl-demo" class="owl-carousel"> <div class="item"><h4>1</h4></div> </div> Problem: when I have one content (dynamic content using PHP) loop:true and items:1 not work and I see blank But if I add two content Owl worked true!! EDIT : my content is dynamic ( 1 - ....). when my result is one content owl have a problem. Problem DEMO worked DEMO how do

Owl carousel still transitions when only 1 slide in carousel

由 こ雲淡風輕ζ 提交于 2019-12-08 22:00:54
问题 I wonder if anyone could help with this. I am using carousel in a CMS and would like the ability for the customer to sometimes only have 1 slide if they so wish. However if only 1 slide is there the fade transition still occurs so it basically transitions to itself. Is there any way to stop the carousel transitioning when there is only 1 slide? I am surprised that this is not a built in function as it has been with other carousels I have used. <div id="owl-demo" class="owl-carousel"> <div

Pause HTML5 video in Owl Carousel on slide

由 被刻印的时光 ゝ 提交于 2019-12-08 08:34:27
Im using Owl Carousel 2.0.0-beta.2.4 and in one slide I have a HTML5 video. What I want to do is when I change slide I want the video to be paused or stopped if pause is not possible. The slide can be changed by drag, touch, next and prev buttons and by keyboard arrows. My script looks like this right now: $('.owl-carousel').owlCarousel({ items: 1, animateOut: 'fadeOut', animateIn: 'fadeIn', URLhashListener: true, startPosition: 'URLHash', nav: true, autoHeight : true, video:true, }); var owl = $('.owl-carousel').data('owlCarousel'); $(document.documentElement).keyup(function(event) { if
订阅 owl-carousel