Move navigation arrows to margins

  • Resolved glabs

    (@glabs)


    4 years, 4 months ago

    I’m trying to move the previous/next navigation arrows to the margins outside the carousel feed so that they don’t overlap any images. I’ve tried to use CSS but the parent divs have overlay:hidden setting and, when turned off, shows all the upcoming images in the carousel. Have also tried playing with margins and feed width but it keeps cutting off part of outer images.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author quadlayers

    (@quadlayers)

    Hello @glabs
    can you share screenshot?

    Thread Starter glabs

    (@glabs)

    Sure.Here’s a screenshot. As you can see, by default, the navigation arrows are overlaid on top of the leftmost and rightmost images. Instead, I’d like to relocate them outside of the carousel so that they’re just over a white background (without messing with the image dimensions). I’ve been playing with different css but I haven’t been able to really get it to look or behave right.

    Plugin Author quadlayers

    (@quadlayers)

    Hello @glabs
    I’m afraid this is outside plugin features
    You can manually add custom css but you need coding skils

    #insta-gallery-feed-xxxx .swiper-button-next > i {
    negative margin
    }
    #insta-gallery-feed-xxxx .swiper-button-prev > i {
    negative margin
    }

    kind regasrds

    Thread Starter glabs

    (@glabs)

    This css doesn’t work however. Pushing the arrows off of the images using negative margins also makes them disappear since the parent area has overflow: hidden. Disabling that overflow property however shows all of the photos in the carousel (beyond the chosen number of columns) stretching to each end of the page.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Move navigation arrows to margins’ is closed to new replies.