Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

jquery - How to re-render a owl-carousel item?

Well, I'm using a owl-carousel-2 plugin now.

And I encounter the following problem:

The markup code:

<div class="owl-carousel" style="display: none;">
    <div class="item"><img src="..." /></div>
    <div class="item"><img src="..." /></div>
    <!-- ... -->
    <div class="item"><img src="..." /></div>
</div>

<script>
$(function() {
    var $owl = $('.owl-carousel');
    $owl.owlCarousel();

    // Doing many things here.

    $owl.show();
});
</script>

The problem is:

When I initialize with the $owl.owlCarousel(); statement, which under an hidden state, its size is not initialized.

So when I show that control, the control displays in a mess!

But when I resize the window, it seemed to be triggering a re-render. The control render the contents, then displayed well.


So I'm wondering if there is a way to trigger this re-render (or refresh) method on it.

In order to make sure the control won't display in a mess.

I tried to read the documents and sources, but not yet have a good solution.

Please help.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

I found out an ugly, dirty solution. Anyway, it worked:

Main procedure:

  1. Destroy that owl-carousel.
  2. Manually change the markup to the initial state.
  3. Initialize the owl-carousel.

var $owl = $('.owl-carousel');
$owl.trigger('destroy.owl.carousel');
// After destory, the markup is still not the same with the initial.
// The differences are:
//   1. The initial content was wrapped by a 'div.owl-stage-outer';
//   2. The '.owl-carousel' itself has an '.owl-loaded' class attached;
//   We have to remove that before the new initialization.
$owl.html($owl.find('.owl-stage-outer').html()).removeClass('owl-loaded');
$owl.owlCarousel({
    // your initial option here, again.
});

It worked, but in such a dirty way. Hoping to see a better, neat solution.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...