Build Your Own Business Website header image

How to Style the Previous and Next Buttons on the Display Buddy Slider

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we demonstrate how to change the style of the previous and next buttons on the Display Buddy Slider from its default configuration. We show how to turn off the pagination and how to change the positioning and style of the next button using CSS.

Video Transcript

Member:  And I used Display Buddy Slider for my website. This isn’t my website. This is what I would like the slider to look like. My website is infinity2websites.com. Let me just put this in the box.

Rick:  There we are. I’m here.

Member:  Okay, great. Great. So in a moment… so I wanted to use this slider because the person is going to be updating it. It’s a lot easy because you just put the image in and then you write the text in like you would in a post or on a page. So I mean I’m still playing around with it at the moment. What I don’t like is this, the pagination and the next. Is there any easy way to maybe do arrows like on the other site that you first put up or is that… there isn’t anything on me obviously in the actual Display Buddy Slider settings. The only thing you can change, obviously, the background here and the pagination background. But there’s nothing to say to change the next background. Can you do that without… with CSS?

Rick:  Yeah, you should be able to do that. The first place, you’d turn off the pagination. And you can see here that you’ve got an A class next and an A class previous.

Member:  Yeah.

Rick:  And so you should be able to do… get both previous and next positioned. So yeah, look. So you’ve got the PB slides 1 has a relative position so then you could go down to previous and next and give them absolute positions. So the next, you’d give it position absolute. Okay so it’s position absolute and then let’s see, left -20px for a second. Give it a width of 40 px and then top… and maybe say 50%. Okay and so maybe… and then give it a height of 40 pixels or you know, 30. So you know, you can move that up into place using this absolute positioning and size. And you’re probably going to need to either give yourself some padding over here or change it z value so that it is… it sits on top of the image. So z index 1000.

Member:  So is that what you are doing there now, that element style? I do that in my CSS.

Rick:  Yeah, you would do that to your CSS for pb_slides-1.next.

Member:  Right, yeah. Okay, I see. So it’s the position absolute… and then I can give it… can I put then like an arrow image in there?

Rick:  Yeah, you could put a background image in there instead or add a background image, yeah.

Member:  Oh you know, I’ve been messing around with this for so long, I should have just asked you straight away.

Rick:  Well, what you’re looking for is you’re looking for the element first, the previous and next elements. And then once you find the previous and next elements, since they are inside of a div that has a relative position, you can just give them absolute positions and move them where you want.

Member:  That’s brilliant. Yeah, that’s fantastic. Okay so I think that was all because I think most of the things I can change the… that’s brilliant. Thank you so much.

Rick:  You’re welcome. You have a great evening.

Member:  Yes, and you. Take care.

Rick:  Okay, bye bye.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment