owl-carousel

owl carousel scroll to clicked item

浪子不回头ぞ 提交于 2021-02-18 10:30:06
问题 I have a simple owl-carousel, HTML: <div class="owl-carousel"> <div class="item"><h4>1</h4></div> <div class="item"><h4>2</h4></div> <div class="item"><h4>3</h4></div> <div class="item"><h4>4</h4></div> <div class="item"><h4>5</h4></div> <div class="item"><h4>6</h4></div> <div class="item"><h4>7</h4></div> <div class="item"><h4>8</h4></div> <div class="item"><h4>9</h4></div> <div class="item"><h4>10</h4></div> <div class="item"><h4>11</h4></div> <div class="item"><h4>12</h4></div> </div>

Owl Carousel and Elementor Page Builder full width Problem

廉价感情. 提交于 2021-02-11 14:27:12
问题 When I create custom widgets of elementor with owl-carousel. after when i use it in full width. then it create left site. not middle. 回答1: Take a look at your js init. is there something like "margin: 25" ? delete it. otherwise, I guess, it could be css. do you have a testing link? 来源: https://stackoverflow.com/questions/59808913/owl-carousel-and-elementor-page-builder-full-width-problem

Wordpress owl carousel add empty item

别来无恙 提交于 2021-02-08 06:14:28
问题 I've got a question with pre-install widget in my theme (called meteroite). The full widget code if needed is here: https://codeshare.io/5Mbrne This is the exact part responsible for displaying all of my CPT 'employees' items: $employees = new WP_Query(array( 'no_found_rows' => true, 'post_status' => 'publish', 'post_type' => 'employees', 'posts_per_page' => $number, 'employee-category' => $category ) ); $type_class = ''; if ( $type == 'Square' ) : $type_class = 'square'; elseif ( $type ==

Wordpress owl carousel add empty item

一曲冷凌霜 提交于 2021-02-08 06:14:07
问题 I've got a question with pre-install widget in my theme (called meteroite). The full widget code if needed is here: https://codeshare.io/5Mbrne This is the exact part responsible for displaying all of my CPT 'employees' items: $employees = new WP_Query(array( 'no_found_rows' => true, 'post_status' => 'publish', 'post_type' => 'employees', 'posts_per_page' => $number, 'employee-category' => $category ) ); $type_class = ''; if ( $type == 'Square' ) : $type_class = 'square'; elseif ( $type ==

Owl Carousel 2 Nav on Sides

▼魔方 西西 提交于 2021-02-05 12:55:49
问题 Hi I'm using Owl Carousel version 2 and can't find an example to put the navigation on the sides of the carousel like right and left chevrons or arrows. How do you do it? 回答1: I just did this yesterday:) Firstly make sure nav is turned on in the config https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html $('#_samewidth_images').owlCarousel({ margin:10, autoWidth:false, nav:true, items:4, navText : ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right

jQuery OwlCarousel v1.3.3 - center align items

佐手、 提交于 2021-01-29 12:21:24
问题 I have 4 items in a row in carousel sample. There is still about 50% empty unused space. I want to align this items to the center. I tried to center them via margin: 0 auto; and display: flex; align-items: center; but with no success. I found that style="width: 2888px; left: 0px;" is computed bis javascript owl.carousel.custom.js. Changing left to some value will work but is not what I expected. Here are the computed values of the class owl-wrapper-outer : How should I fix this in order to

Owlcarousel 2 - elements not visible while translate3d()

孤街醉人 提交于 2021-01-28 15:24:33
问题 I'm using Owlcarousel 2 for sliding over multiple divs, the problem is that inside each "sliding-page" there are some elements positioned as absolute (relative not working neither), and they are not visible while animating, they just "blick-in" when the animation is finished. This is what my html looks like <div id="owl-example" class="owl-carousel width-height-100"> <div class="advert-bg lazyOwl owl-lazy" data-src="ad_preview_new.png"> <div class="col-sm-6 col-md-7 col-lg-8 col-elg-9 pull

Owlcarousel 2 - elements not visible while translate3d()

旧街凉风 提交于 2021-01-28 15:13:58
问题 I'm using Owlcarousel 2 for sliding over multiple divs, the problem is that inside each "sliding-page" there are some elements positioned as absolute (relative not working neither), and they are not visible while animating, they just "blick-in" when the animation is finished. This is what my html looks like <div id="owl-example" class="owl-carousel width-height-100"> <div class="advert-bg lazyOwl owl-lazy" data-src="ad_preview_new.png"> <div class="col-sm-6 col-md-7 col-lg-8 col-elg-9 pull

Owlcarousel 2 - elements not visible while translate3d()

♀尐吖头ヾ 提交于 2021-01-28 15:06:24
问题 I'm using Owlcarousel 2 for sliding over multiple divs, the problem is that inside each "sliding-page" there are some elements positioned as absolute (relative not working neither), and they are not visible while animating, they just "blick-in" when the animation is finished. This is what my html looks like <div id="owl-example" class="owl-carousel width-height-100"> <div class="advert-bg lazyOwl owl-lazy" data-src="ad_preview_new.png"> <div class="col-sm-6 col-md-7 col-lg-8 col-elg-9 pull

Owlcarousel 2 - elements not visible while translate3d()

≯℡__Kan透↙ 提交于 2021-01-28 15:05:48
问题 I'm using Owlcarousel 2 for sliding over multiple divs, the problem is that inside each "sliding-page" there are some elements positioned as absolute (relative not working neither), and they are not visible while animating, they just "blick-in" when the animation is finished. This is what my html looks like <div id="owl-example" class="owl-carousel width-height-100"> <div class="advert-bg lazyOwl owl-lazy" data-src="ad_preview_new.png"> <div class="col-sm-6 col-md-7 col-lg-8 col-elg-9 pull