Question

我正在使用快速旋转轮播，并且我希望在某些自定义div中扭曲下一个和上一个按钮。

默认情况下，轻拂功能会动态地将按钮创建为.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>

中添加缺少的“

Flickity轮播：在自定义div中包装上一个和下一个按钮

1 个答案: