0

El caso es que estoy recogiendo en forma de lista los valores de una API. El UL está fuera del valor que recorre el array del API y dentro del array están los elementos de lista que recojo. Cada valor me recoge un div y me lo posiciona horizontalmente en 3 divs (cada uno corresponde a un LI que ha recogido del API). Entonces mi pregunta es; ¿cómo hacer alguna clase de slider para que me aparezcan los elementos de la api e ir pasándolos de tres en tres con flechas?.

El segundo valor recoge la imagen, el primero la URL y el tercero el título, y así se generan los elementos de lista. El código sería algo así.

El esquema cutre sería algo así, con botones que van pasando elementos de lista de tres en tres.

introducir la descripción de la imagen aquí

<?php
  echo '<ul>';
    echo '<li class="botonizquierda">';
      foreach($data as $valor){
      echo '<div>';
        echo '<li>';
          echo '<img src="'.$valor->API[2]->value.'">
          echo '<div><a href="'.$valor->API[1]->value.'">'.$valor->API[3]->value.'</a></div>';
          echo '</li>';
          echo '</div>;
       }
     echo '<li class="botonderecha">';
     echo '</ul>';
?>    

1 respuesta 1

0

Existe una librería llamada owl-carousel que podrá venirte al pelo. Es la que suelo recomendar a la hora de hacer carouseles, que es lo que parece que necesitas. Te ahorra mucho trabajo y además tiene una muy fácil implementación.

Básicamente funciona con unas clases que debes asignar a tus elementos HTML para que los CSS de la librería hagan su magia y además también funciona con un objeto que debes construir con Jquery, para que los JS de la librería hagan la suya. Te pongo un ejemplo:

HTML

<div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

JQUERY

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

Este es el ejemplo más sencillo de uso, al que llaman básico, pero tienes muchos más en la web oficial, además de una sencilla guía de instalación. Creo que su estructura se adapta perfectamente a lo que necesitas y que con un par de retoques en el código del ejemplo podrías conseguir lo que te propones.

Referencia: Owl-Carosusel2

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.