Styling the Play/Pause button of Slider

Sparkling
1

Is there a way i can style the FlexSlider Play/Pause button to appear like in the attached screenshot?
I’ve taken this screenshot from the FlexSlider homepage.

2

Hi @hesham,

I hope you are well today and thank you for your question.

Do you want to just style the buttons or also want to display them?

Could you please share me your site URL and FlexSlider homepage URL where it’s displaying so that i can help you to achieve it?

Kind Regards,
Movin

3

Hi @movin

I know how to display the Pause button. It appears as a textual link only.

$('.flexslider').flexslider({
    ...
    pausePlay: true,
    pauseText: 'Pause',
    playText: 'Play', 
});

I just want to style it to look like a nice button.

I am developing my website locally.

4

Could you please share me the FlexSlider homepage URL from where you have taken the attached screenshot so that i can help you to achieve it?

5

Sure … FlexSlider 2

6

You can try achieving this by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS


#page .flex-pauseplay a {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 5px;
  left: 10px;
  opacity: 0.8;
  z-index: 10;
  overflow: hidden;
  cursor: pointer;
  color: #000;
}
#page .flex-pauseplay a:before {
  font-family: "flexslider-icon";
  font-size: 20px;
  display: inline-block;
  content: '\f004';
}
#page .flex-pauseplay a:hover {
  opacity: 1;
}
#page .flex-pauseplay a.flex-play:before {
  content: '\f003';
}

Please make sure you have loaded flexslider-icon font in your site.

7

Great effort @movin :slight_smile: … I will try it now.