Veteran Owned & Operated
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| // 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!
Have Questions? I can help! Get Started
Leave a Reply