Remove arrow and pause buttons from slideshow on home page

  • Unknown's avatar
    hariscoussidis · Member ·

    Hi,
    How can I remove/hide the pause and arrow buttons from the slideshow on homepage?

    And how do I also remove the slight grey frame behind the pictures, so the background is completely white for the homepage slideshow?

    The website I need help with is hariscoussidis.com
    Many thanks
    Haris

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    khushbudesaiblog · Member ·

    Hi @ hariscoussidis,

    Please put below CSS in to My Sites > Customise > Additional CSS

    How can I remove/hide the pause and arrow buttons from the slideshow on homepage? 

    .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-next, .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-prev {
    display: none !important;
}

.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-next, .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-prev {
    display: none !important;
}

    And how do I also remove the slight grey frame behind the pictures, so the background is completely white for the homepage slideshow?

    .wp-block-jetpack-slideshow .swiper-container-fade .wp-block-jetpack-slideshow_slide
{
background: White;
}

    I hope it works.

  • kokkieh · Staff ·

    @khushbudesaiblog,

    When posting code for people, please make sure you wrap it in backticks so it displays properly in the forum. I’ve updated your comment above to add those.

  • Unknown's avatar
    khushbudesaiblog · Member ·

    Thank you for bringing it to my attention @kokkieh

  • Unknown's avatar
    hariscoussidis · Member ·

    Hi, thanks for these. But I’m not clear about the first CSS code you posted. Do I copy paste the lot? Because it looks like the same code posted twice.

    Thanks
    Haris

  • kokkieh · Staff ·

    I think @khushbudesaiblog just did that by accident. You can just use one set from the first block of code, though the way CSS works posting duplicates shouldn’t actually have any effect.

  • Unknown's avatar
    hariscoussidis · Member ·

    Ok, so the arrows are gone, but the pause button is still there. As are the small indicate circles at the bottom of the picture slide show. How do I get rid of these?

    Cheers
    Haris

  • Unknown's avatar
    khushbudesaiblog · Member ·

    Hi there,

    Below code is for the pause button.

    .wp-block-jetpack-slideshow[data-autoplay=true] .wp-block-jetpack-slideshow_button-pause {
    display: none !important;
    }

    Below code is for hiding small circles at the bottom.

    .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_pagination.swiper-pagination-bullets {
    display: none;
    }

  • Unknown's avatar
    hariscoussidis · Member ·

    Thank you!! It worked!!!

    One last thing that I just realised. There seems to be a scroll bar on the right hand side of the homepage. How can that be removed?

    Many thanks again
    Haris

  • supernovia · Staff ·

    Haris, this might help:

    @media screen and ( min-width: 1120px ) and ( min-height: 768px ) {
	.home, .home .content {
	overflow-y: hidden;
  }
}

    The scroll bars will still be there on smaller screens, just in case someone needs to use them. Also, this only removes them from the home page.

  • Unknown's avatar
    hariscoussidis · Member ·

    Thank you!! All done!! :)

  • The topic ‘Remove arrow and pause buttons from slideshow on home page’ is closed to new replies.