2

I'm working with flickity carousel, and I want to warp next and prev buttons inside some custom div.

By default, flickity creates the buttons dinamically as direct children of the .main-carousel div/section.

This is the code i'm getting running 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>
Fedegiro
  • 53
  • 3
  • 9

2 Answers2

0

You could try using 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)
})

You might also need to add the missing " in <section class="main-carousel>

Kyle
  • 302
  • 2
  • 5
0

This is how I did it in vanilla js:

document.addEventListener("DOMContentLoaded", function(){

   var buttonWrapper = document.createElement('div')
   buttonWrapper.setAttribute("class", "my-div")

   Array.prototype.forEach.call(elem.querySelectorAll('.flickity-button'), (item) => {
      buttonWrapper.appendChild(item)
   })
   elem.appendChild(buttonWrapper)

})

Where elem is your document.querySelector('.main-carousel').

johangiraud
  • 33
  • 5