How to control bxslider banner slide show in Allegro Pro (Brandon Lee)?


(Markus Wernig) #1

Allegro Pro (by Brandon Lee) seems to be using bxslider for its built in banner slider show.

Does anyone know how to control transition speed? Bxslider seems to allow for lots of customization, but how exactly does one apply this to Rapidweaver?

In particular - I’d like to control how long a slide is displayed (pause) and the transition speed of all fades (speed). In addition to that, I’d like to turn the navigation arrows and the bullets (pager) off.

Would this be entered in Javascript? Any hints / sample scripts on how to do that would be greatly appreciated.

Thank you so much in advance.


(Markus Wernig) #2

Here are the options for bxslider: http://bxslider.com/options

How can these options be entered into a Rapidweaver theme that has bxslider built into? I guess this is not unique to Brandon Lee’s Allegro Pro theme.

Any hint would be really, really helpful. Thank you so much in advance.


(scott williams) #3

Probably the best thing to do is contact brandin lee and ask directly.

Can you give a URL to your site?


(Markus Wernig) #4

I did contact Brandon Lee. And while I am waiting for him to get back to me, I thought it never hurts to ask the community.

My current site (with a different but older theme) doesn’t have that problem, but I’d like to use a more modern theme - Allegro Pro. Unfortunately the built in banner slider comes with controls and pager bullets (also on Brandon’s website). I am just trying to turn them off. There must be a way…


(scott williams) #5

More than likley there is a way. Unfortunately, it’s hard to help with out being able to see the site (and therefore the code) unless you actually have the theme which I do not have.


(David) #6

I don’t have the theme but when i visited the theme page this worked in Chrome to hide the pager bullets and arrows. Paste it into your site wide CSS code to use site wide or in the page inspector CSS box to use just on that page (or pages). Hope it works for you.

.bx-pager.bx-default-pager {
display: none;

}

.bx-controls-direction {
display: none;
}


(Markus Wernig) #7

Thanks everyone, but I figured out the easiest way - and I just remembered that I had run into this problem before a few years ago. - I knew there was a solution and it was driving me crazy.

When these free javascript slideshows are part of a theme, the easiest way to modify them is to open up the package content of the theme (a simple control click in Rapidweaver on the actual theme will give you that option), then look for the actual slideshow js file and open it in Textwrangler (or a similar app) - in my case it was the file slideshow_fade.js.

Once opened it is super easy to add all the options you want to change (in my case all I had to do was go to the bxslider website http://bxslider.com/options)

The theme came with 2 options enabled in the slideshow_fade.js file
auto: true,
mode: fade

So I added a bunch more and saved the js file with Textwrangler. Works perfectly now and really expands the possibilities of the built in slider enormously. I can understand why the theme developer does not want to hand out that information, as unexperienced users could really mess up things. But for people who know what they are doing, it really opens up a whole new world.