• Skip to content
  • Skip to primary sidebar

Hire Jordan Smith

  • About
  • Portfolio
    ▼
    • Web Design
    • Logo Design
  • Services
    ▼
    • All Services
    • Web Design
    • Logo Design
    • SEO Services
    • Web Hosting
  • Reviews
  • FAQ
  • Blog
  • Hire Me
  • About
  • Portfolio
    • Web Design
    • Logo Design
  • Services
    • All Services
    • Web Design
    • Logo Design
    • SEO Services
    • Web Hosting
  • Reviews
  • FAQ
  • Blog
  • Hire Me
HomeBlog Web DevelopmentBX SliderHow To Add An Arrow To Active bxSlider Pager Item

How To Add An Arrow To Active bxSlider Pager Item

Share
Tweet
Share
+1
Pin
0 Shares

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; }
view raw add-active-arrow-to-bxslider-pager-item.css hosted with ❤ by GitHub

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!

Share
Tweet
Share
+1
Pin
0 Shares

Related Posts

  • How to Add WordPress Custom Image Sizes & Selectors

  • How to replace bxSlider controls with Font Awesome icons

    Have you ever wondering if you could replace the bxSlider default controls text, which is Prev / Next, with Font Awesome icons. It turns out it's very simple but I…

  • How to add a column with the User ID in WordPress

    I do a lot of custom Gravity Forms work and on a recent site, I built I was trying to track down an issue a user was having and I…

  • How to make BxSlider hide all slides until the page loads

    This is the simplest and cleanest way to fix the issue of BxSlider slides all showing up in a bunch when the page loads. First we'll add a div around…

  • Add Custom Image Sizes & Connect Custom Image sizes to WordPress

    This allows you to create custom image sizes to be used throughout your files and also connects the custom images sizes that you create into WordPress, to be used throughout…

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Categories

  • SEO
  • Web Design
  • Web Development
    • ACF Development
    • BX Slider
    • Genesis Development
    • Gravity Forms Development
    • jQuery Development
    • Materialize Development
    • WooCommerce Development
    • WordPress Development

Quick Connect

Phone
912-656-6434

Email
jordan@hirejordansmith.com

Address
Hire Jordan Smith, LLC.
580 White Oak Lane
Richmond Hill, GA 31324

  • Facebook
  • Twitter
  • Linkedin
  • Google
  • About
  • Portfolio
  • Services
  • Savannah Website Design
  • Reviews
  • FAQ
  • Blog
  • Hire Me
  • Sitemap

© 2019 Hire Jordan Smith