I tried to solve the problem and came across such a problem.
There is a slick slider with a vertical arrangement of blocks ( vertical: true ). In each block "hidden" image to the text. When you select the active (or central) slide, this latent image appears.
But for some reason, the slider behaves “inadequately” (it jumps, then displays all slides instead of the required 3). adaptiveHeight - does not work for vertical arrangement of blocks.
Question: How to solve this problem, so that vertical slides were 3 (for example), central (or just active) with an image? How to solve the problem with the adaptive height of the blocks for the vertical arrangement of the blocks in slick slider?
Code:
$('.slider').slick({ slidesToShow: 3, slidesToScroll: 1, arrows: false, dots: false, infinite: false, centerMode: true, vertical: true, focusOnSelect: true, asNavFor: '.control', }); $('.control').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, dots: false, infinite: true, asNavFor: '.slider', focusOnSelect: true, vertical: true }); * { box-sizing: border-box; } body, html { position: 0; margin: 0; } body, html, .wrap { width: 100%; height: 100%; } p { font-size: .75rem; line-height: 1rem; color: #333; } img { max-width: 100%; width: 100%; } .wrap { padding: 0 1rem; } .slider { width: 50%; float: left; } .control { width: 50%; float: right; padding: .5rem; } .slider.slick-vertical .slick-slide { padding: .5rem 1rem; border: 1px solid #ddd; position: relative; } .slider.slick-vertical .slick-slide img { display: none; } .slider.slick-vertical .slick-current img, .slider.slick-vertical .slick-center img { display: block; } .slider.slick-vertical .slick-current p, .slider.slick-vertical .slick-center p { position: absolute; top: 0; left: 0; right: 0; } .control.slick-vertical .slick-slide { border: 1px solid red; margin: .5rem; } <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script> <div class="wrap"> <div class="slider"> <div> <p> 1/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos atque saepe beatae esse necessitatibus maxime tempora eos quisquam et voluptas? </p> <img src="https://dummyimage.com/300x100/ccc/fff&text=img-1" alt="" /> </div> <div> <p> 2/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos atque saepe beatae esse necessitatibus maxime tempora eos quisquam et voluptas? </p> <img src="https://dummyimage.com/300x100/ccc/fff&text=img-2" alt="" /> </div> <div> <p> 3/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos atque saepe beatae esse necessitatibus maxime tempora eos quisquam et voluptas? </p> <img src="https://dummyimage.com/300x100/ccc/fff&text=img-3" alt="" /> </div> <div> <p> 4/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos atque saepe beatae esse necessitatibus maxime tempora eos quisquam et voluptas? </p> <img src="https://dummyimage.com/300x100/ccc/fff&text=img-4" alt="" /> </div> <div> <p> 5/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos atque saepe beatae esse necessitatibus maxime tempora eos quisquam et voluptas? </p> <img src="https://dummyimage.com/300x100/ccc/fff&text=img-5" alt="" /> </div> </div> <div class="control"> <div> <p> 1/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ipsa atque possimus numquam cumque dolores eaque, voluptatibus ex eos. Nisi aspernatur quia deserunt libero doloremque blanditiis animi? Optio officiis dignissimos perferendis aperiam tenetur reprehenderit, odio dolores asperiores perspiciatis nobis doloribus soluta explicabo ut neque repellat quia molestiae consequuntur maxime quis! </p> </div> <div> <p> 2/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ipsa atque possimus numquam cumque dolores eaque, voluptatibus ex eos. Nisi aspernatur quia deserunt libero doloremque blanditiis animi? Optio officiis dignissimos perferendis aperiam tenetur reprehenderit, odio dolores asperiores perspiciatis nobis doloribus soluta explicabo ut neque repellat quia molestiae consequuntur maxime quis! </p> </div> <div> <p> 3/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ipsa atque possimus numquam cumque dolores eaque, voluptatibus ex eos. Nisi aspernatur quia deserunt libero doloremque blanditiis animi? Optio officiis dignissimos perferendis aperiam tenetur reprehenderit, odio dolores asperiores perspiciatis nobis doloribus soluta explicabo ut neque repellat quia molestiae consequuntur maxime quis! </p> </div> <div> <p> 4/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ipsa atque possimus numquam cumque dolores eaque, voluptatibus ex eos. Nisi aspernatur quia deserunt libero doloremque blanditiis animi? Optio officiis dignissimos perferendis aperiam tenetur reprehenderit, odio dolores asperiores perspiciatis nobis doloribus soluta explicabo ut neque repellat quia molestiae consequuntur maxime quis! </p> </div> <div> <p> 5/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ipsa atque possimus numquam cumque dolores eaque, voluptatibus ex eos. Nisi aspernatur quia deserunt libero doloremque blanditiis animi? Optio officiis dignissimos perferendis aperiam tenetur reprehenderit, odio dolores asperiores perspiciatis nobis doloribus soluta explicabo ut neque repellat quia molestiae consequuntur maxime quis! </p> </div> </div> </div> 