Skip Navigation

[Resolved] adding pagination to flex slider from modules samples

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 15 replies, has 2 voices.

Last updated by Marisa 6 years, 4 months ago.

Assigned support staff: Luo Yang.

Author
Posts
#295503

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.

#295504

The slider I require help with is on this page at the top:

hidden link

#295508

Or please explain how to touch enable the second slider - partner slider - touch enabled.

#295613

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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

#296005

I updated the password to the previously given to make sure it is the correct one now. Can you try again? Thank you.

#296327

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

Thanks for the details, I am trying to log into your website, will feedback if there is any found.

#296584

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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

#300896

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?

#300988

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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

#302679
weird-arrow.PNG

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.

#302784

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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

#302928

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

#302930

apologies: try this link instead:

hidden link

#303152

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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

#303343

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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