Pagination Controlling Content in Two Areas

[3HExapaT]

Hi, I was able to get help in setting up a slider with hovering that triggers a slide change. This was very helpful. However, Now I’m trying to get the pagination to control a text color change similar to the hover color change. As you mouse over the text it changes from gray to green. I would like the pagination on this page to also change the heading text to change from gray to green. Is this possible?

The page I have built so far.

Admissions and Ticketing - f511debd41.nxcli.io

The page I’m trying to recreate.
https://www.theassistantmanager.com/features/admissions-and-ticketing/

Maybe this needs to be done differently for this effect to work.

Thank you!

[prakash_s]

Hello @3HExapaT,

Thanks for writing to us.

In order to have a pagination I would suggest you please use the slide Paginations element.

To change the color on the hover you need to go to the set the Interaction color from the color settings.

Hope it helps
Thanks

[3HExapaT]

Thank you for the feedback. I currently have the pagination with the dots so the user would click on the dots to see the different icons. I have the hover set up and when I mouse over the three columns it shows the icons. But what I’m looking to do is have it set up so that when you click on one of the dots the icon shows along with changing the headline green in the corresponding text below. Hopefully that makes sense.

[ruenel]

Hey @3HExapaT,

The element structure on your page is missing something. You should have Two Sliders indicated with the red boxes. The 1st Slider is a stacked slider which the 2nd one is an inline slider with only 3 slides displaying all the slides.

Hope this makes sense.

[3HExapaT]

Hi, I made the suggested changes adding a second slider where the three columns are now. I also added in data-x-slide-goto with the corresponding slide number and data-x-slide-goto-trigger with mouseenter on the three new sliders at the bottom. These don’t seem to be triggering the top slider as they did before. I’m also not seeing the effect I was looking for. Any ideas on this?

[ruenel]

Hey @3HExapaT,

Please provide us with your WP access so we can check your Slider settings. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[ruenel]

Hey @3HExapaT,

The suggested solution does not in your case. What you need to do is to apply a similar method used here:

• Slider as gallery with thumbnails navigation elements

A custom CSS needs to be added in your child theme’s style.css. The data-x-slide-context custom Slider attribute must be added to the section.

.SectionClass[style*="--x-slide-current: 1"] .columnClass .headlineClass{
  color: #123456 !important;
}

Kindly check the demo I added on the page.

Thanks.

[3HExapaT]

We are very close! We also want, when hovering over the three paragraph columns, for the icons to change to the corresponding icon. Is this possible?

[3HExapaT]

Let me know if you need any clarification on this.

[ruenel]

Hello @3HExapaT,

You will need to add a custom attribute to the Headline element adding the following:

• data-x-slide-goto - to go to the correct slide
• data-x-slide-goto-trigger with data-x-slide-goto-trigger to make sure that when someone hovers the headline, the slider displays the correct slide.

Please check out the Slider Custom Attributes here:

• Sliders | Themeco Docs

Best Regards.