[Steve CParticipant]

Thanks for providing this script to allow an autoplay feature. I have noticed a small issue with it though, which I hope you can help fix.

When I paste the code below into the custom javascript section, the small arrows in the top left for controlling the slideshow manually dissappear and just the two rounded boxes are left.
—
jQuery(‘.x-flexslider-featured-gallery’).flexslider({
controlNav : false,
selector : ‘.x-slides > li’,
prevText : ‘<i class=”x-icon-chevron-left”></i>’,
nextText : ‘<i class=”x-icon-chevron-right”></i>’,
animation : ‘slide’,
easing : ‘easeInOutExpo’,
smoothHeight : false,
slideshow : true
});
—
I tried changing controlnav to true but this makes some really ugly little buttons appear so you can choose which slide to navigate to. I do not want these to show up but would like the arrows to display.

I also tried to change the next text icon code to something else but this doesn’t seem to help either.

Can you help with this at all?

————-
P.S. When I had smoothheight turned on (true) some portfolio’s initial images only displayed at about 30px height and most of the image was hidden.

[RadModerator]

Hi there,

This thread is a year older, provide customization mat not be applicable anymore. Would you mind providing your site’s URL?

Thanks!

[Steve CParticipant]

Sure the url is eyetooth-art.co.uk.

I customised the positioning of the arrow container boxes yesterday but would like the arrows to display; preferably vertically centred and on the left and right of the images.

Thanks

[Rue NelModerator]

Hello There,

The arrow will not display because we have updated how the arrow icons to be displayed. Please use this JS code instead:

jQuery(window).load(function() {
  jQuery('.x-flexslider-featured-gallery').flexslider({
    controlNav : false,
    selector : '.x-slides > li',
    prevText : '<i class="x-icon-chevron-left" data-x-icon=""></i>',
    nextText : '<i class="x-icon-chevron-right" data-x-icon=""></i>',
    animation : 'slide',
    easing : 'easeInOutExpo',
    smoothHeight : false,
    slideshow : true
  });
});

Please copy the raw code here (http://pastebin.com/vRuahm2b) to preserve the Unicode html entity or data-x-icon value.

We would loved to know if this has work for you. Thank you.

[Steve CParticipant]

Thanks that seems to have helped. I will just need to play around with the positioning of the arrows now.

[ChristopherModerator]

Hi there,

If you need further assist please provide us with URL of of page in question.

Thanks.

[Steve CParticipant]

Hi,

An example to show the button arrows on the portfolio pages is: http://eyetooth-art.co.uk/portfolio-item/tuska-massage-waxing/

Ideally I would like for the arrows to be close to the left and right edges (maybe 5 or 10 pixels) of the image and centred vertically.

Please let me know if you know if you need any other info?

thanks

[Paul RModerator]

Hi,

You can add this in your child theme’s style.css (wp-content/themes/x-child/style.css)

body .flex-prev .x-icon-chevron-left:before {
     content: "\f053";
}

body .flex-next .x-icon-chevron-right:before {
     content: "\f054";
}

body .flex-direction-nav a [class*="x-icon-"] {
    position: absolute;
    top: calc(50% - 15px);
}

Hope that helps.

[Steve CParticipant]

I have just tried that quickly in the custom css section of customiser and it doesn’t seem to have changed anyhting. Do I need to mark any elements as important or something to get them to override the normal theme settings?
Cheers

[ChristopherModerator]

Hi there,

I see you’re using caching plugin. Please keep the previous code in customizer and add following as well :

.flex-direction-nav a i.x-icon-chevron-left {
    left: 7%;
}
.flex-direction-nav a i.x-icon-chevron-right {
    right: 7%;
}

Please clear cache and test again.

Thanks.

[Author]

Posts