0

Alguém poderia me dar uma dica de como fazer um seletor de links através de ancoras, com setas de avançar e recuar, parecido com o da imagem aí?? pois só sei utilizar ancoras através de slides ou com target display:block e none. queria um do mesmo jeito do da imagem ou parecido só que com setas na laterias, uma de recuar e outra de avançar, já procurei no google e não consegui achar um tutorial a respeito disso https://i.sstatic.net/GO1py.png

5
  • 1
    Qual imagem?....
    – Sam
    Commented 9/05/2018 às 14:19
  • eu acabei de editar a pergunta, a imagem eu já inseri aí no final do texto Commented 9/05/2018 às 14:22
  • Cara sua pergunta está muito confusa, seu problema deve ser fácil de resolver, mas o pessoal tem que entender o que vc precisa realmente.
    – LeAndrade
    Commented 9/05/2018 às 14:52
  • Vc quer só o CSS com o estilo similar ao da imagem, uma seta de cada lado e a paginação no meio?
    – hugocsl
    Commented 9/05/2018 às 14:59
  • Sim eu quero com setas nas laterais e a numeração no meio, mas é incrível que eu consigo fazer com slides e não com links, que aparentam ser bem mais simples kkkk Commented 10/05/2018 às 1:01

1 Resposta 1

0

O bootstrap tem alguns exemplos prontos, como segue abaixo

<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>

Se você usar o Laravel será mais fácil ainda bastando apenas usar o seguinte comando

{{ $users->links() }}

Fonte: Pagination

4
  • Nossa! era o que eu queria, muito obrigado! Commented 10/05/2018 às 1:03
  • Eu consegui achar no w3schools e não consegui fazer as setas passarem de forma linear por cima de cada link numerado, cara eu não estou entendendo de como setar cada link de forma ordenada um após o outro, pois utilizado um unica seta para seleciona-los tá bem complicado, é só por causa das setas se deixar só os números é possível e também eles não ficaram marcados na página que o usuário estiver Commented 10/05/2018 às 1:27
  • Por que voce nao usa um framework, como o Laravel? Commented 23/05/2018 às 19:59
  • Eu consegui, separei a estilização do seletor em varias paginas html, e definindo links diferentes conforme o usuário pressionar na seta e avançar para próxima página é meio complicado, mas o negocio é utilizar o iframe pegando apenas o seletor e adicionando as paginas de forma ordenada apenas mudando a ordem do links no seletor numérico Commented 23/05/2018 às 21:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .