Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 image at a time at full size....however what happens is it shows all the images rather small and then if i resize the screen even 1 pixel it snaps into how it should be.....

any idea on how to avoid having to resize the screen to get the image to be full sized ?

Here is my HTML

<div class="owl-carousel">
    <img src="assets/background1.jpg" />
    <img src="assets/background2.jpg" />
    <img src="assets/background3.jpg" />
</div>

Here is my js

var owl = $('.owl-carousel');
owl.owlCarousel({
    singleItem: true,
    items:1,
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:15000,
    autoplayHoverPause:true


});
$('.play').on('click',function(){
    owl.trigger('autoplay.play.owl',[1000])
})
$('.stop').on('click',function(){
owl.trigger('autoplay.stop.owl')
})
like image 992
RubberDucky4444 Avatar asked Nov 18 '14 23:11

RubberDucky4444


People also ask

How do I change the size of the picture on Owl carousel?

I fixed it using max-width attribute and then setting the height to auto . Thanks for your reply.

How do you make an owl carousel slider responsive?

Setting of the responsive is very simple. Structure of responsive option: responsive : { // breakpoint from 0 up 0 : { option1 : value, option2 : value, ... }, // breakpoint from 480 up 480 : { option1 : value, option2 : value, ... }, // breakpoint from 768 up 768 : { option1 : value, option2 : value, ... } }

How do you change transitions in Owl carousel?

Use transitionStyle option to set transtion. There are four predefined transitions: "fade" , "backSlide" , goDown and scaleUp . You can also build your own transition styles easily. For example by adding "YourName" value transitionStyle: "YourName" , owlCarousel will add .


1 Answers

Reason could be one of the following:

  1. Either you're calling the owl.owlCarousel method before the DOM is loaded. So try initiating it in document ready.
  2. Or your .owl-carousel div might be inside a container that is not visible when the DOM is loaded.

I faced a similar issue for using owl carousel in a bootstrap modal and it was fixed by initiating owlCarousel in the shown event of bootstrap modal.

Let me know if you need more details on this or you got it fixed.

like image 88
Nitish Avatar answered Sep 18 '22 00:09

Nitish