Removing Dots on Carousel in Place of Arrows?

This topic has 4 replies, 2 voices, and was last updated 3 years, 2 months ago by Andres.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
July 28, 2020 at 1:18 pm #17738

Andres
Participant

Hi Tom

I went ahead and ditched the idea of having a posts carousel with photos that opened in a lightbox image gallery populated with photos that were in the body of a post. It’s an unnecessary complication. Instead, I converted it to a “Recent Weddings” carousel.

Question: is it possible to remove the dots under the carousel and instead have the arrows-overlay function? On mobile, the padding above and below the dots take up quite a bit of space and looks odd.

The carousel is just under the heading: Recent Costa Rica Weddings.

* After you read this message, could you please delete the URL? Thank you.

Thank you, Tom. Have a good one.

Andrés

July 28, 2020 at 3:39 pm #17755
Tom
Keymaster
Hi there,

This function should help:
```
add_filter( 'wpsp_carousel_args', function( $args ) {
    $args['arrows'] = true;
    $args['dots'] = false;

    return $args;
} );
```
Then add this CSS:
```
.wp-show-posts .slick-next:before, 
.wp-show-posts .slick-prev:before {
    color: black;
}

.wp-show-posts .slick-arrow {
    z-index: 500;
}

.wp-show-posts .slick-prev {
    left: 0;
}

.wp-show-posts .slick-next {
    right: 0;
}
```
Let me know 🙂
July 28, 2020 at 4:08 pm #17761

Andres
Participant

Hi Tom

You rock!

I wish I knew 10% of what you do about this.

Thank you very much.

Cheers!

Andrés

July 29, 2020 at 2:19 pm #17786

Tom
Keymaster

Glad I could help! 🙂

July 29, 2020 at 4:08 pm #17813

Andres
Participant

Hi Leo,

Thanks.

I had a question regarding styling as explained in another support topic to ask, so I’ll start another topic.

Have a good afternoon.

Regards,

Andrés
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

[Resolved] Removing Dots on Carousel in Place of Arrows?