Create a slider with values collected from a PHP API

0

The fact is that I am collecting the values of an API in the form of a list. The UL is outside the value that runs through the API array and within the array are the list elements that I collect. Each value collects me a div and places it horizontally in 3 divs (each corresponds to an LI that has been collected from the API). So my question is; How to make some kind of slider so that I can see the elements of the api and go through them three by three with arrows?

The second value collects the image, the first the URL and the third the title, and thus the list elements are generated. The code would be something like that.

The sketchy scheme would be something like that, with buttons going through three-in-three list items.

<?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>';
?>    
    
asked by Aitor Sola 12.11.2018 в 17:02
source

1 answer

0

There is a library called owl-carousel that can come to your hair. It's the one I usually recommend when making carouseles , which is what it seems you need. It saves you a lot of work and also has a very easy implementation.

Basically it works with some classes that you have to assign to your HTML elements so that the CSS of the library do their magic and also works with an object that you have to build with Jquery , so that JS of the library can do theirs. I'll give you an example:

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

This is the simplest example of use, which is called basic, but you have many more on the official website, as well as a simple installation guide. I think that its structure adapts perfectly to what you need and that with a couple of tweaks in the code of the example you could get what you propose.

Reference: Owl-Carosusel2

    
answered by 12.11.2018 / 17:16
source