owl-carousel-2

How to change options based on number of items in the carousel using Owl Carousel 2?

由 冷暖自知 提交于 2019-12-12 02:27:13
问题 I'm using Owl Carousel 2 on a project with dynamic content with an unlimited amount of slides that can be added. So there could be an instance where there is only three slides or an instance where there is six. My desired functionality is that if there is less than four slides (the carousel shows four items at a time), then add the mouseDrag: false and touchDrag: false options. Here is my JS: $('.owl-carousel').owlCarousel({ loop:false, margin:20, responsive : { // breakpoint from 0 up 0: {

Owl Carousel 2 Responsive image

由 大兔子大兔子 提交于 2019-12-10 09:44:37
问题 There are some topics in this case, but after tried all way, no success. I am trying to make image responsive in owl carousel 2 plugin, I used responsive option in plugin option and I have control on number of item on desire resolution but in some resolution image not fit to parent height, the parent is view-ad-image and it has 250px height, and I want to to all resolution, images fit to this height. What I tried so far: .owl-carousel .owl-item img { display: block; height: 250px; min-width:

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

ngx-owl-carousel is not working in angular 6

由 。_饼干妹妹 提交于 2019-12-08 11:56:09
问题 I have a simple angular 6 app and I have a added a simple ngx-owl-carousel , I have followed all steps as per instruction here is the link : https://www.npmjs.com/package/ngx-owl-carousel. Here is my html : <owl-carousel [options]="{items: 4, dots: false, navigation: false}" [items]="images" [carouselClasses]="['owl-theme', 'row', 'sliding']"> <div class="item" *ngFor="let image of images;let i = index"> <div class="thumbnail-image"></div> </div> </owl-carousel> here is component.ts array of

Owl carousel 2 dynamic content JSON

由 不想你离开。 提交于 2019-12-08 05:33:34
问题 I have a problem with displaying dynamic content with Owl carousel 2 using JSON/AJAX. I get no error messages in console, but cant get the carousel to work. I only see a blank page. I am able to append the image url's fetched from JSON file with jquery.append, but they wont be shown in the carousel that way. Displays are set to "block". Any tips what am i missing? index.html - <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title

Owl Carousel, show child absolute div, over parent overflow hidden div

由 梦想的初衷 提交于 2019-12-07 13:53:12
问题 I am using owl carousel 2, I am facing following problem. I have parent div with a name owl-stage-outer , it has overflow:hidden as per requirement of the carousel. I have another child div name: ribbon (showing 'New Arrival' and 'Big Sale') which is position: absolute Now the problem which I am facing, on first item of carousel, ribbon is hiding because of overflow: hidden reference image Link on which I am working I have tried solution provided in this link, but it will only work on

Owl Carousel, show child absolute div, over parent overflow hidden div

由 无人久伴 提交于 2019-12-06 03:49:37
I am using owl carousel 2, I am facing following problem. I have parent div with a name owl-stage-outer , it has overflow:hidden as per requirement of the carousel. I have another child div name: ribbon (showing 'New Arrival' and 'Big Sale') which is position: absolute Now the problem which I am facing, on first item of carousel, ribbon is hiding because of overflow: hidden reference image Link on which I am working I have tried solution provided in this link , but it will only work on immediate child. Thanks in Advance. You can add this margin-left: 25px; its works. <div class="owl-item

Owl Carousel 2 Responsive image

由 回眸只為那壹抹淺笑 提交于 2019-12-06 03:26:30
There are some topics in this case, but after tried all way, no success. I am trying to make image responsive in owl carousel 2 plugin, I used responsive option in plugin option and I have control on number of item on desire resolution but in some resolution image not fit to parent height, the parent is view-ad-image and it has 250px height, and I want to to all resolution, images fit to this height. What I tried so far: .owl-carousel .owl-item img { display: block; height: 250px; min-width: 100%; } Result: images are stretched on some resolution, so not successfull. .owl-carousel .owl-item

Owl Carousel 2 - autoHeight (multiple items)

由 好久不见. 提交于 2019-12-05 12:53:14
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, and give the invisible items a small height. Is there already a more elegant solution? $('.owl-carousel').owlCarousel({ loop: true, items: 3, margin: 1, autoHeight: true, }); Fiddle Any Ideas? Thanks! Dennis Helfensteller I solved it via the internal API using several events calling the same autoHeight-function. Fiddle The jQuery-Part: $('.owl-carousel

Owl Carousal2 with items 1 and loop true

由 邮差的信 提交于 2019-12-05 00:11:32
问题 $(document).ready(function(){ $('.owl-carousel').owlCarousel({ loop:true, margin:10, nav:true, items: 1 }) }); <div class="owl-carousel"> <div class="item"><h4>1</h4></div> </div> <link href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script> Console Error
订阅 owl-carousel-2