Foros del Web » Programando para Internet » Jquery »

Paginacion Responsive

Estas en el tema de Paginacion Responsive en el foro de Jquery en Foros del Web. Estoy usando un plugin jquery (easyPaginate.JS) https://st3ph.github.io/jquery.easyPaginate/ para hacer una paginacion, donde solo quiero que se muestren 3 imagenes por pagina en la version desktop, ...
  #1 (permalink)  
Antiguo 26/05/2018, 16:18
 
Fecha de Ingreso: agosto-2005
Mensajes: 97
Antigüedad: 18 años, 8 meses
Puntos: 1
Pregunta Paginacion Responsive

Estoy usando un plugin jquery (easyPaginate.JS)
https://st3ph.github.io/jquery.easyPaginate/


para hacer una paginacion, donde solo quiero que se muestren 3 imagenes por pagina en la version desktop, y una abajo de la otra segun adapto la pantalla....?, son como 20 imagenes con este codigo de muestra:

<div id="easyPagination>

<img class="imgpast" src="images/past_events/Kunsthanverkerne- -Kongensgate.jpg" alt="Kunsthanverkerne-i-Kongensgate" title="Kunsthanverkerne-i-Kongensgate">
<p class="detaile">Desember 2017. Kunsthåndverkerne i Kongens gate</p>
<hr>

</div>

El script es:


$("#easyPaginate").easyPaginate({
paginateElement: "img",
elementsPerPage: 3,
effect: "climb"
});

el CSS:

#easyPaginate img {display:block;margin-bottom:10px;margin:auto;}
.easyPaginateNav a {padding:5px;}
.easyPaginateNav a.current {font-weight:bold;text-decoration:underline;}

Estoy usando un plugin jquery (easyPaginate.JS)
https://st3ph.github.io/jquery.easyPaginate/


para hacer una paginacion, donde solo quiero que se muestren 3 imagenes por pagina, son como 20 imagenes con este codigo de muestra:

<div id="easyPagination>

<img class="imgpast" src="images/past_events/Kunsthanverkerne- -Kongensgate.jpg" alt="Kunsthanverkerne-i-Kongensgate" title="Kunsthanverkerne-i-Kongensgate">
<p class="detaile">Desember 2017. Kunsthåndverkerne i Kongens gate</p>
<hr>

</div>

El script es:


$("#easyPaginate").easyPaginate({
paginateElement: "img",
elementsPerPage: 3

});

el CSS:

#easyPaginate img {display:block;margin-bottom:10px;margin:auto;}
.easyPaginateNav a {padding:5px;}
.easyPaginateNav a.current {font-weight:bold;text-decoration:underline;}

Como puedo hacer para que la paginacion sea responsiva??, de la forma que la hago y pruebo me funciona bien en desktop pero no en mobile...como podría arreglarlo..?

Gracias

Última edición por maire; 26/05/2018 a las 16:44
  #2 (permalink)  
Antiguo 26/05/2018, 23:47
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Paginacion Responsive

La solución a tu problema la puedes hallar usando Media Queries.

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 30/05/2018, 03:46
 
Fecha de Ingreso: abril-2016
Mensajes: 19
Antigüedad: 8 años
Puntos: 1
Respuesta: Paginacion Responsive

Si lo que quieres es que se muestren 3 imágenes seguidas en la versión desktop y al hacer más pequeña la pantalla se pongan una debajo de la otra pon la propiedad float:left, esto hará que sino caben se pongan debajo.

Como bien han dicho con media queries también puedes solucionarlo.

Etiquetas: js, paginacion, responsive
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:23.