Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #9493

    Hi there,

    I am really struggling to make what should probably be a simple change to way the portfolio slideshow controls look.

    I need to ensure that a user of my site knows that there are multiple images to see related to the specific project without having to hover over the image first.

    What I am trying to achieve is to have the ‘dots’ and ‘arrows’ always visible (even before a hover over) underneath the featured image and aligned to the center. It might be nicer to have each arrow on either side of the image.

    This is quite an important thing I need to implement before I can allow this site to go ‘Live’

    Many thanks in advance.



    to keep them visible at all times you can add this to your custom.css or Quick CSS

    .slide_controls .ctrl_previous, .slide_controls .ctrl_pause_play, .slide_controls .ctrl_next, .slide_controls .active_item, .numeric_controls a {
    opacity: 1 ! important;

    The arrows are blocked together so you’d have to do quite some editing to split them up and then style them. To center your dots you can add this in there too:


    I’ve set it to 400px because I recall you plan on making your images span the entire page, you can change this value to whatever suits you best.

    Best regards,



    Hi Chris, thanks for your reply.

    I have just given this a go. It appears that the controls stay on only after the user hovers over the image. This means that the user has no idea that there is more than one image to view until they roll the mouse over the image, something that might not be that clear on an iPad etc.

    Is there a way we can have the controls visible at all times, even before a hover-over?

    Also, I am just wondering about the ‘.numeric_controls{margin-left:400px;}’ Will this be responsive? I mean that if the site is viewed on a smaller screen or ipad etc, will the 400px margin be set in stone? If so is there a way to have the controls centered for all scenarios as this is a responsive theme and the reason I am upgrading my original ‘Display’ theme :)

    Thanks for all your help mate.




    try opening up angularjsaviapoly.js and find

    //hover event

    replace the part that follows by this

    //hover event
    //if($('.slideshow_caption, .slideshow_inner_caption')) return;
    controls = container.find('.slide_controls a').stop().css({display:'block', opacity:1}).animate({opacity:0.9});

    if(!controls) return;

    controls.stop().animate({opacity:1}, function()


    ^You basically change all the 0’s to 1’s.

    Then, in the custom.css make sure you have this added:

    .slide_controls a{display:block !important;}

    The 400px is not responsive, you can use percentages instead. This will work for both numeric_controls as for arrow_controls.


    HI Chris,

    Thank you for your help.

    I am having an issue with aligning the numeric controls to the center.

    I am sure these are the areas that need adjusting ? but I am unsure how to get it to align in the center properly :-(

    ‘div .numeric_controls{ left:50px; display:none;}

    div .arrow_controls{ right:10px; }’

    in slideshow.css ?

    Or am I heading down the wrong road here?

    Thanks again,





    I’d add following code to css/custom.css:

    div .numeric_controls {
    left: 50%;




    Hi Peter,

    Thanks for your reply.

    Although your solution does indeed work it isnt quite what I am looking for as what it does is adds 50% space between the first bullet and the far left, thus pushing the remaining bullets further right.

    What I am trying to achieve is to center the ‘bullets’ regardless of how many there are. I want to align them to the center, so for example, if there were 3 bullets the middle one would be at the 50% mark.

    My second request was to push the nav controls under the image in the portfolio pop up (not portfolio single page), this is something I have been unable to achieve currently.

    Any help appreciated.

    Many Thanks


    1) I’m not aware of a way to achieve this because the controls have an absolute position. This would require some jquery calculations but this is to complex to cover this here.

    2) Add following code to css/custom.css:

    div .numeric_controls {
    bottom: 0px !important;
    left: 50%;
    top: auto !important;

    This will push the controls down. However you can not display them outside the slideshow area – otherwise they’ll be overlapped/hidden.


    1) Ok. Is this Avia Slider a Kriesi creation ? If so can you please point me in the direction of where I need to go to find / learn the answers I am looking for ? i.e. support for the Avia Slider !

    I mealy want to achieve something similar to how the slider is advertised here:

    Many Thanks,



    Angular doesn’t use the avia slider but a responsive/flexible slider (called aviapoly). It’s a creation of Kriesi but we don’t sell the script itself and we can’t provide (time intensive) modification to the slider code. The code itself can be found in js/aviapoly.js but I’d use the uncompressed dev version to modify the code (aviapoly_nomin.js) and compress/paste this code into aviapoly.js afterwards. I played around with some hacks on stackoverflow but I couldn’t get it to work properly (made it even worse in firebug) (eg: (Purchase code hidden if logged out) -in-div didn’t work for me, but the script link at the end is a good starting point).


    Thanks Dude, I really appreciate that !

    I’ll post back if I have any success..



    Great. I’ll close this thread for now.

    Best regards,


Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Help needed! Changing Slideshow controls position and appearance.’ is closed to new replies.