Tema:

• Estoy tratando de implementar la línea de tiempo horizontal -Slick [https://codepen.io/perikan/pen/vjwXyg] pero solo obtuve un punto.
• No cumple con la funcionalidad de implementación.

Meta:

• A medida que hacemos clic en los puntos de la línea de tiempo, las fotos deben moverse de acuerdo con ella.

Código probado:

• Estos son los siguientes códigos que he probado.

 <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