[Resolved] Slider buttons not displaying correctly

[Author]

Posts

[richardG-4]

I am trying to display posts on a slider with navigational buttons on either side. I was able to add the arrow buttons, but their containers are showing up above the slider too. If I try to hide the arrow containers, it hides the arrows too. I could change the background to transparent, but the link will still be active and people could accidentally click them, which is sloppy.

What do you recommend? Did I set this up incorrectly somehow?

Link to a page where the issue can be seen: hidden link

Here is the code I am using in my search and pagination section:

[wpv-filter-start hide="false"]
[wpv-filter-controls][/wpv-filter-controls]
[wpv-pagination]
    <div class="ts-slider-pagination-container">
    [wpv-pager-prev-page]
        <span class="ts-slider-pagination previous">[wpml-string context="wpv-views"]<i class="fas fa-angle-left"></i>[/wpml-string]</span>
    [/wpv-pager-prev-page]
    [wpv-pager-next-page]
        <span class="ts-slider-pagination next">[wpml-string context="wpv-views"]<i class="fas fa-angle-right"></i>[/wpml-string]</span>
    [/wpv-pager-next-page]
</div>
[/wpv-pagination]
[wpv-filter-end]

And here is the CSS:

 
.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 {
  left: 0;
}
 
.ts-slider-pagination.next {
  right: 0;
}

[Minesh]

Hello. Thank you for contacting the Toolset support.

I see you have implemented slider view and you are also using the elementor. I see a few CSS that are related to the anchor tag. I need admin access details to investigate this issue further.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Thanks for sharing access details, I think for now wp-admin access details are enough.

When I try to login to wp-admin I get the message from Wordfence:

You are temporarily locked out
You have been temporarily locked out of this system. This means that you will not be able to log in for a 

Can you please remove all possible security restrictions.

[richardG-4]

I deactivated WordFence, please try again.

[Minesh]

Thanks, now I'm able to load the wp-admin but when I try to login using the access details you shared I got the following error:

ERROR: Invalid username

Can you please send me working wp-admin access details.

[richardG-4]

Yes, sorry, for some reason it appears that my temporary admin user was not created the first time.

You can use the same credentials I shared in the private message above, I have double checked, I even logged out and logged in again as that user, to make sure it will work this time.

[Minesh]

Can you please check now: hidden link

I've added the following CSS code to your view's "Search and Pagination" sectionc's CSS box:

.ts-slider-pagination-container a.page-link,
.ts-slider-pagination-container a.page-link:hover,
.ts-slider-pagination-container a.page-link:active,
.ts-slider-pagination-container a.page-link:focus {
    border:none;
    background: none;
    box-shadow: none;
}

I do not see those bars now. Can you please confirm.

[richardG-4]

I don't see the bars, but the links are still there if you hover over where the bars were visible. I was hoping you or someone else has a solution to make it so the bars can't be clicked, only the arrows.

[Minesh]

I've removed all the CSS code you added to the "Search and Pagination" sectionc's CSS box and replaced with the following code:

.ts-slider-pagination-container .page-link {
	position: absolute;
  	top: 80px;
    right: 0;
    width: 20px;
    height: 40px;
    color: #4d86ae;
    font-size: 40px;
    font-weight: bold;
    border: none;
    background: none;
  	padding: 0;
    line-height: 40px;
  	text-align: center;
}
.ts-slider-pagination-container .page-link.wpv-filter-previous-link {
	left: 0;
  	right: auto;
}

Also, I've changed "Search and Pagination" code and adjusted as given under. As you may notice I've removed span tags you added to the following code:

[wpv-filter-start hide="false"]
[wpv-filter-controls][/wpv-filter-controls]
[wpv-pagination]
    <div class="ts-slider-pagination-container">
    [wpv-pager-prev-page]
        [wpml-string context="wpv-views"]<i class="fas fa-angle-left"></i>[/wpml-string]
    [/wpv-pager-prev-page]
    [wpv-pager-next-page]
        [wpml-string context="wpv-views"]<i class="fas fa-angle-right"></i>[/wpml-string]
    [/wpv-pager-next-page]
</div>
[/wpv-pagination]
[wpv-filter-end]

For now, this change is made to the following view only:
=> hidden link

You need to adjust the "Search and Pagination" code as given above with all other views where you need to remove the span tags.

Also, you should add the CSS to Layout's CSS and JS editor so that you do not need to add CSS to your all the views.
=> hidden link

Can you please confirm now it works as expected.

[richardG-4]

My issue is resolved now. Thank you!

I'm looking for where I got the code, I'm pretty sure it was directly from the documentation. If I find it perhaps that could be updated with your superior code?