I just finished a website that required arrows being added above the active bxSlider pager item. It wasn’t immediatly obvious to me how to accomlish this so I thought I’d share how I did it in case someone else is looking for an answer to the riddle.
First, I used the thumbnail pager 1 method
Step 1:
Add desired padding to the parent div
Step 2:
Add the background image to the active anchor tag class
Step 3:
Make sure the anchor tag is set to display inline and add additional padding to it to push it’s height beyond the #bx-pager div
See CSS used to accomplish this below
| // Add desired padding to the parent div | |
| #bx-pager { text-align: center;position: relative;z-index: 9990;background: #428752;padding: 19px 0; } | |
| // Add the background image to the active anchor tag class | |
| #bx-pager a.active { background: url(images/slider-active-arrow.png) no-repeat center top; } | |
| // Make sure the anchor tag is set to display: inline; and add additional padding to it to push it's height beyond the #bx-page div | |
| #bx-pager a { padding: 37px 25px; display: inline; } |
Also you can visit the site where I set this up as well if you want to see it in action!
Hope this helps you out!
Leave a Reply