Please refer to this accidentally closed ticket:
https://toolset.com/forums/topic/add-next-and-previous-to-flex-slider/
My problem is not solved. In switching to building another slider I lost the mobile swipe abillity that the flex slider offered in the javascript.
Please understand - I want simply to add next and previous arrows to my slider instead of thumbnails.
I am offering to email a login to anyone so they can look at all the code - impossible to paste here.
The slider I require help with is on this page at the top:
hidden link
Or please explain how to touch enable the second slider - partner slider - touch enabled.
The flexslider from wp-types modules sample is based on jquery FlexSlider from:
hidden link
As I suggest in the post:
https://toolset.com/forums/topic/add-next-and-previous-to-flex-slider/#post-295247
You will need customize your javascripts to support previous/next navigation
If you need more assistance for it, please duplicate same problem in a test site, and fill below private detail box with login details, also point out the problem page URL and view URL, thanks
I updated the password to the previously given to make sure it is the correct one now. Can you try again? Thank you.
Thanks for the details, I am trying to log into your website, will feedback if there is any found.
I have create a View in your test site:
hidden link
1) without any Pagination and Sliders Settings in the view
2) in section "Loop Output", use the same CSS codes from your problem view, , and replace the
the codes in it from:
<em><u>hidden link</u></em>
To:
<em><u>hidden link</u></em>
3) use the same JS codes from your problem view, and add below codes:
jQuery(document).ready(function($){
$(".flexslider").flexslider({
animation: "slide",
controlNav: true, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)
prevText: "Previous", //String: Set the text for the "previous" directionNav item
nextText: "Next", //String: Set the text for the "next" directionNav item
});
});
You will need customize the slide by following their document:
hidden link
See the result page:
hidden link
It is so encouraging that this is swipe-enabled.
However, when I clicked on the next and previous arrows, nothing happens.
I was thinking this might be a z-index issue, so I tried to inspect the code in chrome dev, but the arrows keep going away.
I couldn't find in the view where the settings or css were for the next/pre arrows, since no pagination is marked.
How can this be resolved?
1) However, when I clicked on the next and previous arrows, nothing happens.
I just tested the URL:
hidden link
With Chrome +IE + Firefox + Safari, the next and previous arrows work fine in all Browsers, what browser are you using?
2) I couldn't find in the view where the settings or css were for the next/pre arrows, since no pagination is marked.
As I mentioned above, the custom CSS codes is in the section "Loop Output", click button "Open CSS editor"
hidden link
I am using chrome. You cannot see the whole arrow. I am at resolution 2160x1440.
I am sorry to report this but I cannot click on the arrows.
1) My computer does not support resolution 2160x1440. I am using resolution 1690*1050, could you try some lower resolutions?
if the problem is fixed, it should be a problem of "flexslider", you can try ask help from it's author:
hidden link
2) OK, I edit the problem view:
hidden link
In section "Loop Output", click button "Open CC editor", modify the CSS codes, line 55
From:
.flex-direction-nav a {width: 30px; height: 20px; margin: -20px 0 0; display: block; background: url('<em><u>hidden link</u></em>') no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease; z-index:999999;}
To:
.flex-direction-nav a {width: 50px; height: 50px; margin: -20px 0 0; display: block; background: url('<em><u>hidden link</u></em>') no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease; z-index:999999;}
You should be able see the previous and next button in the front-end:
hidden link
I edited the code as instructed.
I changed screen resolution down to 1400px.
I attached a screen below showing the problem, which still exists.
hidden link
apologies: try this link instead:
hidden link
This is strange, it works fine in my chrome browser, I ask my colleagues to test it, also you can try test with other browsers, such as IE + Firefox + Safari
I ask help from some of my colleagues, they all confirm it is working, please try clear your browser cache, and test with other browsers, such as IE + Firefox + Safari
