javascript - Flickity轮播: Wrap prev and next buttons inside a custom div

Question

我正在使用 flickity 轮播，我想在一些自定义 div 内扭曲下一个和上一个按钮。

默认情况下，flickity 将按钮动态创建为 .main-carousel div/section 的直接子级。

这是我运行 flickity js 的代码:

<section class="main-carousel>
   <div class="flickity-viewport">...</div>
   <button class="flickity-button flickity-prev-next-button previous"></button>
   <button class="flickity-button flickity-prev-next-button next"></button>
</section>```

And this is what i want to get:

<section class="main-carousel>
    <div class="flickity-viewport">...</div>
    <div class="my-div">
        <button class="flickity-button flickity-prev-next-button previous"></button>
        <button class="flickity-button flickity-prev-next-button next"></button>
    </div>
</section>

Answer 1

您可以尝试使用 jQuery。

// first make sure the plugin has generated the html
$(document).ready(function(){

    // select the buttons
    buttons = $('.main-carousel .flickity-button')

    // add them to a newly created div
    new_div = $('<div class="my-div"></div>').append(buttons)

    // append the new div (my-div) to .main-carousel
    $('.main-carousel').append(new_div)
})

您可能还需要在 <section class="main-carousel> 中添加缺少的 "