Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

250
Visualizações
I am trying to Horizontal timeline chart using slick plugin with the dates implemented in it

Horizontal timeline slick

Issue:

  • I am trying to implement the horizontal timeline -Slick [https://codepen.io/perikan/pen/vjwXyg] but I got only one dot.
  • It is not meeting the functionality of implementation.

Goal:

  • As we click on the timeline dots the photos have to be moved in accordance with it.

Tried Code:

  • These are the following code I have tried.

    <script type="text/javascript">
    
          function slider_config() {
            $('.slideshow').slick({
              dots: true,
    
              customPaging: function(slick,index) {
                // Array conversion from the doc element
                
            var dateList = [...document.querySelectorAll('.photo-date-info')].map(x => x.textContent);
            return '<a>' + dateList[index] + '</a>';
        },
              infinite: false,
              speed: 500,
              fade: true,
              cssEase: 'linear',
          });
    
     $(".loading-bar").slick({
      centerMode: true,
      // centerPadding: "80px",
      dots: false,
      infinite: false,
      speed: 300,
      slidesToShow: 6,
      slidesToScroll: 3,
      focusOnSelect: true,
      asNavFor: ".labels"
    });
          $(".labels").slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: false,
                fade: true,
                draggable: false,
                asNavFor: ".loading-bar"
    });
            $('.slideshow').slickLightbox({
              src: 'src',
              itemSelector: 'img',
              caption: 'caption',
              slick: {infinite:false}
            });
    
          }

    

div += "></i><a href='"+photo+"' download><i class='fas fa-download' style ='float: right;padding-top: 7px;color: black;'></i></a><img style='object-fit: contain;height:400px' src='"+photo+"' data-caption='As on : "+photo_date+"'><h4>As on : <span class=\"photo-date-info\">" + photo_date + "</span></h4><h5>"+p_desc+"</h5></center><span class=\"loading-bar loading-bar-bullet\"></span></div>";

   //The same CSS code as in code pen

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda