Cycle2 within dropdown

Question

I'm trying to put a Cycle2 within a javascript dropdown, but the next and previous buttons aren't responding.

This is the code.

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn"></button>
<div id="myDropdown" class="dropdown-content">

<div class="cycle-slideshow"
data-cycle-swipe=true
data-cycle-swipe-fx=scrollHorz
data-cycle-timeout=0
data-cycle-prev=".prev"
data-cycle-next=".next"
data-cycle-slides="> div"
>

<div style="background:#fcc">
  <p>Lorem Ipsum...1</p>
</div>
<div style="background:#cfc">
  <p>Lorem Ipsum...2</p>
</div>
<div style="background:#ccf">
  <p>Lomem Ipsum...3</p>
</div></div>

<div class="center">
<a href=# id="prev">Prev</a>
<a href=# id="next">Next</a> </div>

Can someone help me with this?

Answer 1

You are using class selector not id selector. There is no prev or next class on those elements

try changing

data-cycle-prev=".prev"
data-cycle-next=".next"

To

data-cycle-prev="#prev"
data-cycle-next="#next"