[Resolved] Create pagination arrows for slider

[Author]

Posts

[adamR-11]

Thank you.

I have 3-4 problems left.

Now I would like to create pagination arrows like the ones I created previously with Beaver Themer.

They can be found here:
hidden link

Attached is a screenshot as well.

How can I do this?

Thanks.

[Christian Cox]

Toolset's slider pagination controls can be generated by shortcodes in the View editor. You can add custom markup to that pagination structure and use CSS to style the output. Here are some examples of styling and positioning the components. To achieve the exact look you're going for, you will have to tweak these examples as needed.

Filter code:

[wpv-pagination]
<div class="ts-slider-pagination-container">
    [wpv-pager-prev-page]
        <span class="ts-slider-pagination previous">[wpml-string context="wpv-views"]>[/wpml-string]</span>
    [/wpv-pager-prev-page]
    [wpv-pager-next-page]
        <span class="ts-slider-pagination next">[wpml-string context="wpv-views"]<[/wpml-string]</span>
    [/wpv-pager-next-page]
</div>
[/wpv-pagination]

CSS code:

.ts-slider-pagination-container {
  position: relative;
}

.ts-slider-pagination {
  color: #4d86ae;
  font-size: 40px;
  position: absolute;
  font-weight: bold;
  top: 115px;
}

.ts-slider-pagination:hover {
  text-decoration: none;
}

.ts-slider-pagination.previous {
  right: 0;
}

.ts-slider-pagination.next {
  left: 0;
}

More information about paginating sliders: https://toolset.com/documentation/user-guides/creating-sliders-with-types-and-views/

[adamR-11]

Hi, thanks.

I'm a bit frustrated because I have difficulty knowing which section in the View editor you're referring to. I also have had this problem when following the Toolset knowledge base - the names of the various editing fields in the knowledge base articles do not always correspond to the ones in the actual plugin.

You wrote:

"Toolset's slider pagination controls can be generated by shortcodes in the View editor."

All I see is:

1. Search and Pagination
2. Loop Editor
3. Templates for this View
4. Output Editor

Which area are you referring to when you say "View editor"?

You also wrote:

"You can add custom markup to that pagination structure and use CSS to style the output."

To which of those 4 sections do I add the CSS?

Can you please clarify this for me?

Thanks.

[Christian Cox]

Which area are you referring to when you say "View editor"?
The entire wp-admin page is what I refer to as the View editor. You can use either the Search and Pagination editor panel or the Loop editor panel. Both have a "Pagination Controls" button to help you insert the proper shortcodes. It's up to you to decide which panel works better for your HTML markup and CSS design, to give you the visual style you want. By default, the search filters are included in HTML markup before the results. The Output editor panel gives you the ability to change that order. You can swap the two shortcodes here if you want to include the results before pagination in your HTML markup structure.

If you choose to place pagination controls in the Loop editor panel, you should add the pagination outside the wpv-loop tags, since markup inside those tags will be repeated for each result. More info about that:
https://toolset.com/documentation/user-guides/digging-into-view-outputs/

To which of those 4 sections do I add the CSS?
It depends on how you want the CSS loaded on your site.
- You can add CSS to the Search and Filter panel editor if you want the CSS to be included on any page where this View's filters are shown.
- You can add CSS to the Loop editor to if you want the CSS to be included on any page where this View's results are shown.
- You can add CSS to one of the loop template editors if you want to include the CSS anywhere that template is displayed (which may or may not be in this View, because templates are reusable).
- It's probably a good idea to include the CSS in the same area that you place your pagination shortcodes, since they are related. This makes it easier to find what you're looking for.
- There is no CSS editor for the Output editor panel, just to clarify.

[adamR-11]

Thanks.

I'm working on this as best I can.

My current problem is that the arrows "jump" whenever the slider moves.

You can see it happen here (click on the slider at the bottom):

hidden link

Do you know what can be done to stop this from happening?

Thanks.

[Christian Cox]

It sounds like you want to take those arrows out of the normal CSS flow, so they are not affected by the position of the items above them. Are you familiar with absolute positioning? Items that are absolutely positioned do not affect the position of items below them, and are not affected by the position of items above them (within a relatively positioned container).
https://developer.mozilla.org/en-US/docs/Web/CSS/position
https://css-tricks.com/almanac/properties/p/position/

[adamR-11]

Thanks.

Please see the attached image to get a better idea of what I'm referring to.

[Christian Cox]

Yes I understand exactly what you're referring to. That's what absolute positioning is for in CSS. You should familiarize yourself with CSS layout techniques like relative and absolute positioning. The links I provided include examples that will help you solve this problem with custom CSS.

[adamR-11]

Thanks.

I understand that absolute and relative positioning effect the arrows *when the slider is not moving*.

But why do the arrows move *when the slider is moving*?

They jump down and to the inside of the slider columns.

Is there a way to stop this from happening?

[Christian Cox]

I understand that absolute and relative positioning effect the arrows *when the slider is not moving*.
Positioning influences the arrows when the slider is moving, as well. The difference is the markup structure of the View changes during animation. Those markup changes influence the relative points during transitions. If you set a DOM breakpoint for subtree modifications you can step through to see how the markup structure changes. Here's a screenshot showing you a wrapper element, div.wpv_slide_remove, during the transition. You'll have to account for this and any other issues in your own custom CSS and markup.

[adamR-11]

Thanks.

The fix you're suggesting may be beyond my abilities at the moment.

It may be too complex for me to try to recreate the experience that I created with Beaver Themer.

I'm a bit disappointed because I was expecting Toolset to work with Beaver Builder in this instance, as promised by Toolset.

I need to look at this content slider with fresh eyes and see how I can make it work.

Thank you for your continued support.

[Christian Cox]

The content in the Search and Pagination editor panel isn't affected by the slider row div the same way. Try placing the pagination elements there instead of the Loop editor area, and adjust your CSS top position to compensate if necessary. Then I can take another look and see what we can do.

[adamR-11]

Thank you - it works!

Putting the arrows in the Search and Pagination editor panel made the difference.

There's still a bit more styling to do, but I think I can work it out.

***

Another question:

In the slides within the content slider, once the slider moves once, the author names start appearing in English, not in Hebrew. Can this be fixed?

Thanks.

[Christian Cox]

In WPML > Languages there is an option "Store a language cookie to support language filtering for AJAX". Make sure that option is activated. If this doesn't solve the problem, we should split the issue off into a separate ticket so we can investigate in more detail.

[adamR-11]

Thanks.

I selected the option to store a language cookie in WPML.

The problem is still there in the content slider.

Could this be a caching issue?