Greetings

!!! Here I am wise with a slider. I need help with this: when flipping through a slide, the list item attached to it should be underlined, that is:

1st slide - 1st item underlined
Slide 2 - the 2nd item in the list is underlined
Slide 3 - the 3rd item in the list is underlined

I have no idea how this is implemented. I would be grateful if someone can help.

    1 answer 1

    Good afternoon, something like this. All the necessary information to make it on the slider site

     $(document).ready(function() { $('.howto-slider').slick({ autoplay: true, arrows: false, dots: false }); $('.howto-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide) { $('ul li:nth(' + nextSlide + ')').addClass('underline').siblings().removeClass('underline'); }); }); 
     .howto-slider { margin-bottom: 0; } .howto-item { bg: white; padding: 6rem 0; } .howto-item ul { padding-left: 2rem; } .howto-item ul li { font-size: 1rem; list-style-position: outside; margin-bottom: 4rem; } .slick-slider { margin-bottom: 0; } .slick-dots { bottom: 25px; } .slick-dots li button::before { color: blue; font-size: 5rem; } .underline { text-decoration: underline; } 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> <div class="row no-gutters"> <div class="col-lg-6"> <div class="howto-item"> <div class="row no-gutters"> <div class="col-lg-10 offset-lg-1 col-md-10 offset-md-1 col-sm-10 offset-sm-1 col-10 offset-1"> <h2>Как сдать Судебный/Досудебный тест</h2> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione magnam harum voluptate delectus ex quod quia voluptatibus iste saepe quaerat!</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore delectus porro, temporibus asperiores exercitationem eos quia tempora laborum ad illum!</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem quas repudiandae voluptates cumque ipsum culpa voluptatibus sed, laboriosam, iusto molestias?</li> </ul> <button class="button more-link">Подробнее</button> </div> </div> </div> </div> <div class="col-lg-6"> <div class="howto-slider"> <img src="http://via.placeholder.com/300.png/09f/fff" alt=""> <img src="http://via.placeholder.com/300.png/09f/fff" alt=""> <img src="http://via.placeholder.com/300.png/09f/fff" alt=""> </div> </div> </div>