Slider partner infinity

Question

Znalazłem w internecie taki efekt: https://bootsnipp.com/snippets/Q0Z1j
 

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

<div class="container">
  <h2>Our  Partners/ Our Clients</h2>
   <section class="customer-logos slider">
      <div class="slide"><img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg"></div>
      <div class="slide"><img src="http://www.webcoderskull.com/img/logo.png"></div>
      <div class="slide"><img src="https://image.freepik.com/free-vector/3d-box-logo_1103-876.jpg"></div>
      <div class="slide"><img src="https://image.freepik.com/free-vector/blue-tech-logo_1103-822.jpg"></div>
      <div class="slide"><img src="https://image.freepik.com/free-vector/colors-curl-logo-template_23-2147536125.jpg"></div>
      <div class="slide"><img src="https://image.freepik.com/free-vector/abstract-cross-logo_23-2147536124.jpg"></div>
      <div class="slide"><img src="https://image.freepik.com/free-vector/football-logo-background_1195-244.jpg"></div>
      <div class="slide"><img src="https://image.freepik.com/free-vector/background-of-spots-halftone_1035-3847.jpg"></div>
      <div class="slide"><img src="https://image.freepik.com/free-vector/retro-label-on-rustic-background_82147503374.jpg"></div>
   </section>
   
<h2><a href="http://www.webcoderskull.com" target="_blank">http://www.webcoderskull.com</a></h2>
</div>

h2{
  text-align:center;
  padding: 20px;
}
/* Slider */

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

$(document).ready(function(){
    $('.customer-logos').slick({
        slidesToShow: 6,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 1500,
        arrows: false,
        dots: false,
        pauseOnHover: false,
        responsive: [{
            breakpoint: 768,
            settings: {
                slidesToShow: 4
            }
        }, {
            breakpoint: 520,
            settings: {
                slidesToShow: 3
            }
        }]
    });
});

Ogólnie chodzi o to że chce napisać dla własnych potrzeb skrypt, który będzie mi przesuwał w przedstawiony sposób na przykładzie powyżej partnerów których może być nieograniczona ilość, jednak nie rozumiem kodu jQuery i nigdy mnie jQuery nie interesowało, owszem używałem skryptów gotowych w swoim kodzie, ale nie jest to rozwiązanie do mnie. Do czego zmierzam... chcę pobierać partnerów z bazy danych, może ich być nieokreślona liczba. Jakich mechanizmów powinienm użyć w javascript żeby móc to zrobić? Przypuszczam że chodzi tu o coś w stylu setInterval lub setTimeout . Ogólnie ktoś jak by mógł zerknąć i powiedzieć jakie parametry powinienm zobaczyć i co mogło by być dla mnie przydatne do stworzenia takiego rozwiązania?
 

Comments

Możesz dodawać "partnerów" ilu chcesz, więc w czym problem? Nie wiesz jak to zrobić dynamicznie? Do pobierania danych z zewnątrz służy AJAX

---

Nie o Ajax mi chodzi partnerów dodaje i pobieram w pętli foreach z bazy. Chodzi mi raczej o długość całego kontenera połączonych ze sobą partnerów. I zamianę ostatniego na pierwszy i by zawsze wszystko się składało i pokazywali.

---

Wydaje mi się, że tak to właśnie działa. Dodaje na sztywno obrazki i DZIAŁA!!!

---

<div class="container">
   <section class="slider">
      <div class="slide"> ... 1 ... </div>
      <div class="slide"> ... 2 ... </div>
   
      ... Tutaj wstawiasz z bazy danych dowolną ilość "partnerów"

      <div class="slide"> ... 100 ... </div>
   </section>
</div>

 

---

https://codepen.io/studiojvla/pen/qVbQqW czy mogę jakoś wyciągnąć do inline  style jakieś wartości  z animacji ?

Answer 1

Odświeżam temat