There is a row. It has 3 columns: "Description", "Slider", "Form".

$('.product-name').slick({ autoplay: true, autoplaySpeed: 3000, dots: true, arrows: false }); 
 <div class="col-md-3"> <div class="1"> </div> <div class="2"> </div> <div class="3"> </div> <div class="4"> </div> </div> <div class="col-md-6"> <div class="product-name"> <div class="slide_1"> </div> <div class="slide_2"> </div> <div class="slide_3"> </div> <div class="slide_4"> </div> </div> </div> <div class="col-md-3"> <div class="form"></div> </div>

The center column is the slick slider http://kenwheeler.imtqy.com/slick/ . I need that while the slider switches the picture the div with the description was switched, that is, one was displayed, and the others did not. Tell me, please, how to implement it?

PS classes at divs in numbers just for example

    1 answer 1

    I see several solutions to your problem:

    1. Place the description in the slide block

    Expand your slide to have a description inside each one. For example:

     <div class="col-md-6"> <div class="product-name"> <div class="slide_1"> <img crs="..." alt="" class=""> <p class="">Тут сделайте описание и отформатируйте как Вам удобно.</p> </div> <div class="slide_2">аналогично 1-му</div> <div class="slide_3">аналогично 1-му</div> <div class="slide_4">аналогично 1-му</div> </div> </div>

    2. Make 2 sliders that will synchronously scroll

    To do this, you must link them and for the second remove the dots and arraws :

     $('.product-name').slick({ autoplay: true, autoplaySpeed: 3000, dots: true, asNavFor: '.product-description', // свойство для синхронизации arrows: false });

    An example will be found in the documentation .

    3. Hang up the event

     // On swipe event $('.your-element').on('swipe', function(event, slick, direction){ console.log(direction); // Здесь менять контент в Вашем блоке form });