cssflickity

Flickity gallery: Style so clicking anywhere on the image advances to next?

I am trying to get the following behavior in my Flickity gallery:

Click anywhere on the entire image, and it advances to the next image.

I am finding that resizing (+hiding) the buttons isn't behaving as expected. Can anybody suggest a better approach? Website built using Semplice, the CSS I'm using is:

.flickity-prev-next-button.next {  
     width:100%; 
     height:100%;
     opacity:0; 
}

The corners of the image are draggable but not clickable when I style it this way. Weirder to me, the clickable region is shaped like a diamond.

I want the entire image to be clickable to advance the gallery. I'd be grateful for any help. Thank you.

Solution

  • Solved by defining a border-radius and background color for the Flickity control button.

    My layperson's thought is that default background transparency in the button was affecting its shape. Only the "arrow" part had a color, the background was transparent, so the shape got defined by this into a diamond shape and that's why I had a "diamond" inside of the image that was clickable.

    Once a border-radius and background color were added, the dimensions of the button were fully rectangular instead of the diamond shape of the arrow control.

    .flickity-prev-next-button.next {  
   width:100%;
     height:100%;
     background: #333;
     border-radius:15px;
     opacity:0;
    }