owl-carousel

owl carousel slideSpeed not working

由 柔情痞子 提交于 2019-12-20 20:14:10
问题 I have multiple owl carousel set up on my home page. I have the first one (the one about free shipping) set to a slideSpeed of 10000. As you can see all the slide change at the same speed. Is there a reason this doesn't work? Am i doing something wrong? 回答1: Please note that you have to use autoplay:true, autoplayTimeout:5000 when using owlCarousel 2.0 回答2: Autoplay is where you set the slide changing speed. Not slidespeed 回答3: Just set time to autoPlay option $("#slider").owlCarousel({

Add class on OWL Carousel afterLazyLoad

由 落花浮王杯 提交于 2019-12-18 09:42:39
问题 I'm using OWL Carousel, trying to add class .border-red to <div class="item"> after lazyLoad, means call this function after lazyLoad afterLazyLoad Example : $(".item").addClass("border-red"); when lazy loaded. Means add class function execute after OWLCarousel lazyLoaded. JS $(document).ready(function() { $("#owl-demo").owlCarousel({ items : 4, lazyLoad : true, navigation : true }); }); HTML <div id="owl-demo" class="owl-carousel"> <div class="item"><img class="lazyOwl" data-src="assets/owl1

How to use owl-carousel in Angular2?

由 眉间皱痕 提交于 2019-12-17 09:58:39
问题 I am new to Angular2 and was trying to convert owl-carousel in Angularjs to Angular2. Below is the index.html file for the owl-carousel implementation: <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" /> <link rel="stylesheet" href="https://cdnjs

OWL 2 Carousel Auto Play Not Working

由 天大地大妈咪最大 提交于 2019-12-13 14:43:29
问题 I have two slides going. I was using OWL 1 and it worked great. I would like the infinite loop, so moved to OWL 2. The following code works great. The slides stay in sync, but autoplay never starts. I have to drag the slides or show the navigation and click next/prev. Hoping the answer is pretty obvious to someone with more experience. $(document).ready(function() { var carousel_1 = $('#the_carousel'), carousel_2 = $('#the_carousel_content'); carousel_2.on('change.owl.carousel', function

Is it possible to implement a circular/infinite carousel using owl carousel? [closed]

由 百般思念 提交于 2019-12-13 11:38:41
问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 12 months ago . I am using owl carousel and it works perfectly except it does not support circular/infinite scrolling. I did search for ideas on google and stackoverflow with no luck. Has anyone implemented circular/infinite scrolling in owl carousel? 回答1: Owl Carousel does have the loop: true

owl carousel not working after ajax load

由 断了今生、忘了曾经 提交于 2019-12-13 07:16:34
问题 i use jquery 1.11 and this code to ajax load wordpress post content in sidebar . everything is good but jquery functions of owl carousel not work and the carousel in post content not showing anything. ajaxify code to load post content: $(document).ready(function(){ $.ajaxSetup({cache:false}); $(".post-link").click(function(){ var post_link = $(this).attr("href")+' #content'; $("#single-post-container").html("loading ..."); $("#single-post-container").load(post_link); return false; }); }); is

Owl Carousel not inline

由 情到浓时终转凉″ 提交于 2019-12-13 02:47:15
问题 I cannot seem to get owl carousel to work in drupal 7. I thought it might be a conflict with Chaos tools but now I'm not sure. I had zero issues with it functioning as expected in Drupal 8 but my client needs it in Drupal 7. I've tried it as a Block and as a Page. Currently, it stacks the content vertically instead of 3 inline as I hoped. Here is the working Drupal 8 link to show what I'd like to achieve: https://bryanbowers.me/cms/slideshow Here is the Drupal 7 version not working: https:/

Uncaught TypeError: $(…).owlCarousel is not a function

由 给你一囗甜甜゛ 提交于 2019-12-12 04:11:57
问题 I'm getting the below error trying to setup owl carousel: Uncaught TypeError: $(…).owlCarousel is not a function Here's from my head: <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src=

Owl carousel v2, item width calculated wrong if the carousel behind Tab content

由 不羁的心 提交于 2019-12-12 03:02:16
问题 I built 2 responsive Owl-carousel-v2 in a page which look perfect. After I put them into tabs, the first one carousel works but the one behind tab panel lost it's item width, and I couldn't make it work. If I have all the items with a certain width then all items will be listed vertically. Here is my demo pen: http://codepen.io/bard/pen/NxqyQy/ I guess the problem is item width are calculated when the page loads. How to solve this? HTML: <ul class="nav nav-tabs"> <li class="active"><a data

Owl carousel show a different image on mobile

由 旧街凉风 提交于 2019-12-12 02:56:50
问题 I've been using PageSpeed Insights from google to see how I can improve my website and the main point I'm getting is that my images are to large for mobile users. Currently I'm using the owl-carousel which came with the template I'm using. Google automatically supplied me with resized images but I've got no idea how to implement these into the carousel. I tried something like https://github.com/teleject/hisrc but after trying it in multiple ways it just kept removing the images completely.
订阅 owl-carousel