Hiding previous/next image – Slider Carousel BM Content Builder

[Miguel]

Hi,

I am using a the Slider carousel of BM Content Builder for my portfolio elements, like the one you have in this demo:

https://art.seatheme.net/portfolio2/ux-portfolio/slider-b/

Would it be possible with CSS to hide all of the previous / following images, and just display the active one?

That would be necessary only in Desktop, not for the mobile.

Thanks in advance,

[SeaTheme]

Hi,
Thank you for purchasing our theme.

It is possible by custom CSS(“Appearance > Customize: Additional CSS”), like:

.owl-carousel .owl-item {
    visibility: hidden;
}
.owl-carousel .owl-item.active.center {
      visibility: visible;
}

But it will the whole website, you could use the page/post ID like:

.postid-3191 .owl-carousel .owl-item {
    visibility: hidden;
}
.postid-3191 .owl-carousel .owl-item.active.center {
      visibility: visible;
}

https://seatheme.net/forums/topic/how-to-find-wordpress-postpage-id/

Regards!

SeaTheme – SeaTheme.net – Twitter – Facebook

[Miguel]

Thank you!
This works perfect and makes a very clean slider in combination with the fluid height.
In my case I use the Slider Carousel for all portfolio items – and no other Slider Carousel in the site, so is fine for all posts.
Have a nice day,

[Miguel]

Hi,
I just realized that with this custom CSS, no image will be shown in Tablet in portrait mode (768×1024 or 1024×1366).

for Slider like in https://art.seatheme.net/portfolio2/ux-portfolio/slider-b/

Does it happen only to me?

[Miguel]

This reply has been marked as private.

[SeaTheme]

Hi,

Please update the Custom CSS(the above post) as:

@media (orientation: landscape) {
 .owl-carousel .owl-item {
    visibility: hidden;
 }
 .owl-carousel .owl-item.active.center {
      visibility: visible;
 }
}

Regards!

SeaTheme – SeaTheme.net – Twitter – Facebook

[Miguel]

Thanks! Now the slides will display again in tablet portrait mode.

[Author]

Posts