Questions tagged [owl-carousel]

Owl Carousel is a touch-enabled jQuery plugin that lets you create a beautiful responsive carousel slider.

Version 2

Version 1

1693 questions
6
votes
3 answers

Animation on multiple slide owl carousel

Is there any feature about animation on multiple slide item? I have tried its fine on single slide but not working on multiple item slide. You can use JSFiddle or below code to debug. $('.loop-test').owlCarousel({ center: true, items: 2, …
Ram kumar
  • 3,152
  • 6
  • 32
  • 49
6
votes
4 answers

How to reinitialize Owl Carousel after ajax call?

I am trying to reinitialize owl carousel after a successful ajax call. The ajax call will change the data but the view should stay the same.I am having an issue where the view carousel structure will not reinitialize. I don't know where I did…
sandip kakade
  • 1,346
  • 5
  • 23
  • 49
6
votes
3 answers

How to make custom dots in owl carousel?

I have implemented custom prev next buttons(i ommit css styles for prev next buttons), but havent dots. Who know what is mistake I did? // owl.carousel.css .owl-controls { text-align: center; } .owl-controls .owl-dot { display:…
Marik Zuckor
  • 295
  • 2
  • 4
  • 14
6
votes
8 answers

owl carousel flashing on page load

I have several owl carousels running. When it first loads the carousel flashes at full width until the jquery kicks in and then resizes everything. Is there anyway to stop this? Here's my code: Html
Daniel Robinson
  • 643
  • 1
  • 10
  • 25
6
votes
1 answer

Owl Carousel v1.3.2 with Vertical slide animation

I am using Owl Carousel v1.3.2 in my code base. This is awesome carousel plugin with fully responsive UI. But recently we got one requirement in which we want slider contents should move vertically upward/downward. I checked documentation as well as…
user5243536
6
votes
4 answers

Owl Carousel 2 - autoHeight (multiple items)

At the moment the Owl Carousel autoHeight works only with 1 item on screen. Their plan is to calculate all visible items and change height according to highest item. I work around this problem by calling the .active classes on the visible items,…
Schakelen
  • 115
  • 1
  • 3
  • 9
6
votes
6 answers

How to add margin between owl carousel

I want to add margin-left or margin-right between carousel items.but not margin-left for first item. below is my code.how can i apply to this. $("#carousel").owlCarousel({ items : 4, itemsCustom : false, itemsDesktop :…
Dishan TD
  • 8,528
  • 7
  • 26
  • 41
6
votes
1 answer

OWL Carousel image not right size at first

I am using OWL Carousel and I have coded it so there will be one image displayed and then every 15 seconds the next image will slide in. I have set the width to be 100% of the screen so and coded the js appropriately so in theory there should be ONE…
RubberDucky4444
  • 2,330
  • 5
  • 38
  • 70
6
votes
1 answer

Placing text over images

I am using owl-carousel to make a slider for a website. I could easily make a slider using the following code :
6
votes
3 answers

OwlCarousel2 - Add Item + Update Carousel

I've been having difficulty adding the Owl Carousel to our app, and was hoping that the latest 2.0.0-beta.2.4 version would be easier, but I am not able to just get the basic feature of adding an item and updating the carousel to work. Is there…
mheppler9d
  • 169
  • 2
  • 2
  • 9
5
votes
4 answers

Owl carousel multiple rows

I just want to show multiple rows and with owl dots. Like this way. But it seems there are no nay inbuilt option for this. So I tried to give .owl-item { width: 20%; } so it will be in 5 items in row. But it didn't work at all. I think plugin…
Janath
  • 1,218
  • 4
  • 26
  • 53
5
votes
2 answers

Owl-carousel - TypeError: Cannot read property 'fn' of undefined

I tried to use owl.carousel package in my react app. I installed jquery and owl.carousel package with npm. npm install jquery owl.carousel In App.js import React from 'react'; import $ from 'jquery'; import 'owl.carousel'; componentDidMount()…
Xueming
  • 168
  • 1
  • 1
  • 11
5
votes
3 answers

Owl Carousel not showing in Elementor live preview

I'm developing a WordPress website. There are a few sections that I made by Owl Carousel js plugin. I'm developing this site with Elementor page builder for WordPress. It works fine in site preview but not showing in Elementor Live Preview (in Edit…
5
votes
1 answer

How to display only a single item in Owl Carousel?

So I'm using ngx-owl-carousel in my project to display slides that will display dynamic data coming from REST API.The carousel works fine when the number of data coming are large.But in case of when only one data the carousel display repeated slides…
Pawan Patel
  • 195
  • 1
  • 1
  • 8
5
votes
2 answers

PinchZoom.js not compatible with Owl Carousel on iOS devices

So I have been wrapping my head(again) on this problem that I encountered. I have pinpointed my problem to the Owl Carousel v2.2.1 plugin not being compatible with PinchZoom.js v2.3.4. I also took the latest version of Owl Carousel v2.3.4 and…
Rahul Sharma
  • 7,768
  • 2
  • 28
  • 54