html and css, link selector through anchors, with next and Prev arrows

Asked

Viewed 86 times

0

Could someone give me a hint on how to make a link selector through anchors, with forward and backward arrows, similar to the one in the image there?? because I only know how to use anchors through slides or with target display:block and None. wanted one the same way of the image or similar only that with arrows on the side, a back and forward, I already searched on google and could not find a tutorial on this https://i.stack.Imgur.com/Go1py.png

html5 css3
  • 1

    What image?....

  • I just edited the question, the image I already inserted there at the end of the text

  • Face your question is very confusing, your problem should be easy to solve, but the staff has to understand what you really need.

  • You want only CSS with the style similar to the image, an arrow on each side and paging in the middle?

  • Yes I want with arrows on the sides and the numbering in the middle, but it’s amazing that I can do with slides and not with links, which appear to be much simpler kkkk

1 answer

0


The bootstrap has some ready-made examples, as follows:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

If you use the Laravel it will be easier to just use the following command

{{ $users->links() }}

Source: Pagination

  • Wow! That’s what I wanted, thank you very much!

  • I was able to find in w3schools and I could not get the arrows to pass linear over each numbered link, man I’m not understanding how to set each link in order one after the other, because used a single arrow to select them is very complicated, is only because of the arrows if leaving only the numbers is possible and also they were not marked on the page that the user is

  • Why Voce does not use a framework like Laravel?

  • I did it, I separated the selector styling into several html pages, and defining different links as the user presses the arrow and moves to the next page is kind of complicated, but the business is to use iframe by taking only the selector and adding the pages in an orderly way only by changing the order of the links in the numeric selector

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.