Flickity carousel：将 prev 和 next 按钮包装在自定义 div 中

Posted 2023-02-25

【中文标题】Flickity carousel：将 prev 和 next 按钮包装在自定义 div 中

【英文标题】：Flickity carousel: Wrap prev and next buttons inside a custom div

【发布时间】：2019-07-17 22:28:05

【问题描述】：

我正在使用 flickity carousel，我想在一些自定义 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>

【参考方案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> 中添加缺少的 "