Post carousel doesn't work
-
Hi,
I have two post carousel on the below page. The first is showing if the screen width is more than 1080px, the other is showing if the screen width is less than 1080px (done with CSS). However, the one showing on smaller screens stops working when I add the other one to the page. It will not autoplay and it’s not possible to change posts with the arrows.
Is this a bug or some other conflict? How can I get the two carousels to work?
https://travelgrapher.com/new-page/
Best regards,
Erik
The blog I need help with is: (visible only to logged in users)
-
Hi Erik, I’m not able to duplicate this, but it might be something with your browser or mobile browser.
If you remove the CSS temporarily, are you able to see both carousels on both mobile and and desktop?
-
Hi supernova,
Thanks for your quick replay! I don’t think it’s a browser problem, I tried both with Safari on my iPhone and Safari/Firefox on my Macbook and get the same problem. Can you see both post carousels work properly, when you maximise/minimize the browser window?
If I remove the CSS, I see both post carousels in all screen sizes and they both work properly.
This is the CSS I use. I put in an additional CSS class on the post carousel blocks in the editor. I also use some other CSS to modify the post carousels, to remove the pause button, etc.
/* Hide block on mobile */
@media only screen and (max-width: 1080px) {
.hide-mobile {
display: none;
}
}/* Hide block on desktop */
@media only screen and (min-width: 1080px) {
.hide-desktop {
display: none;
}
} -
Hello there
Happy to help you with this.
The arrows on the Blog Post block do disappear after a certain screen size
There are pagination dots underneath the carousel, which are currently not visible on a black background.
This CSS should change that.
/* Change pagination colour Blog Post Block */ .wp-block-newspack-blocks-carousel .swiper-pagination-bullet { background: #fff; }The autoplay issue is quite curious – are you able to remove one carousel, and see if it autoplays?
Many thanks.
-
Hi,
Thanks for reaching out! I put in the CSS to get the dots white, thanks.
Yes, very strange. The post carousel shown on larger screens works fine, it’s the one shown on smaller screens that don’t autoplay (and it’s not possible to change posts manually, either with the arrows or by clicking on the dots). If I remove the one showing at larger screens, then the other one starts working. Same thing if I remove the CSS so that both are shown for all screen sizes.
Also noticed that the arrows disappear after a certain screen size, but that is not due to my CSS. The same thing happens on another page, but that post carousel works properly.
Best regards,
Erik
-
Hello Erik,
Many thanks for getting back to me.
Yes, very strange. The post carousel shown on larger screens works fine, it’s the one shown on smaller screens that don’t autoplay (and it’s not possible to change posts manually, either with the arrows or by clicking on the dots).
It looks like theres a bug with the theme whereby the carousel will not auto play on a mobile device.
I’ve reported this to the theme developers to look into.
Are you able to toggle between slides using the pagination dots, now that they’re visible on a mobile device?
Also noticed that the arrows disappear after a certain screen size, but that is not due to my CSS. The same thing happens on another page, but that post carousel works properly.
That’s expected behaviour with this particular block.
Many thanks in advance.
-
Hi,
Thanks for following up on this.
No, I can’t toggle between the slides either using the dots. Please do and let me know if they manage to figure out the issue.
All the best,
Erik
- The topic ‘Post carousel doesn't work’ is closed to new replies.
WordPress.com Forums 