CODEWITHSUNDEEP
javascriptjqueryowl-carousel
YeahMKD
YeahMKD

Reputation: 425

Owl Carousel Auto Height Recalculation

Im trying to create a form wizard using owl carousel. I have some conditional javascript running to see what form elements get certain inputs.

For example, I have a number of select boxes that have yes or no answers and depending on which one you pick, it will show or hide other select boxes. Here is an example of what I am trying to do.

http://jsfiddle.net/eju2uw20/1/

Here is the code I am using for the Owl Carousel.

$('.consultationSlider').owlCarousel({

    singleItem:true,
    mouseDrag: true,
    touchDrag: false,
    navigation : false,
    pagination : false,
    autoHeight: true,
    slideSpeed: 800

});

If you click on the next button, you will see the autoheight working. However, when you click on the "please choose" select box and click "no", you will see another select box appear.

How can I make it so that owl carousel recalculates the height to make up for the added elements?

Upvotes: 4

Views: 16993

Answers (4)

Tamilselvan K
Tamilselvan K

Reputation: 1211

remove property this prperty autoHeight:true, from owl initilization

Upvotes: 0

MiniWasp
MiniWasp

Reputation: 41

The other answer updates the code every few seconds using an interval which will increase the load and is not a clean solution. This solution is much cleaner no need for extra code and only uses the function when needed...

setInterval(function () {
  $(".owl-carousel").each(function () {
    $(this).data('owlCarousel').autoHeight();
  });
});

Upvotes: 4

Christina
Christina

Reputation: 34652

Demo: http://jsfiddle.net/g23aqagv/

$(document).ready(function() {

setInterval(function(){
 $(".owl-carousel").each(function(){
    $(this).data('owlCarousel').updateVars();
 });
},1500);

});

Shorten the time for the update, but not too short. This works in the stable version 1 release of Owl Carousel, I don't know about Owl2.

In your situation, you can do the following (as per @YeahMKD):

$('.websiteDeveloped').change(function(){
    if ($(this).val() == 'no'){
        $('.completitionDate').show();
        $('.consultationSlider').data('owlCarousel').updateVars();
    } else if ($(this).val() == 'yes'){
        $('.completitionDate').hide();
        $('.consultationSlider').data('owlCarousel').updateVars();
    }
});

Upvotes: 1

Bobadevv
Bobadevv

Reputation: 366

Owl carousel provides documentation on manipulating content within a slider be worth looking at.

http://owlgraphic.com/owlcarousel/demos/manipulations.html

You will have to rebuild the slider if the select is ticked and a new select box is added.

Upvotes: 1

Related Questions