<div class="container-sliders">
<div class="left-side">
<div class="left-slider">
<div class="left-slide" style="background-image: url(https://www.w3schools.com/w3css/img_lights.jpg);"></div>
<div class="left-slide" style="background-image: url(https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350);"></div>
<div class="left-slide" style="background-image: url(https://www.elastic.co/assets/bltada7771f270d08f6/enhanced-buzz-1492-1379411828-15.jpg);"></div>
</div>
</div>
<div class="right-side">
<div class="right-slide">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt iste suscipit corporis vitae amet nam veritatis libero ut dignissimos itaque, illum earum adipisci asperiores consequuntur? Libero quidem deleniti ipsam voluptas voluptatibus fugiat quasi laudantium fugit, magni eum nihil quos fuga distinctio ab aliquid laboriosam dignissimos sed quas saepe dolores sunt.</div>
<div class="right-slide">Animi reiciendis repellat architecto doloremque, ab quaerat unde amet perspiciatis deleniti inventore quibusdam repudiandae labore ullam dolorem laborum? Ullam, voluptate voluptas perferendis molestiae illum temporibus quibusdam et possimus itaque maxime sapiente quisquam omnis nobis rerum architecto sint veritatis sit ea, delectus non impedit? Quas quos sed laudantium vero laborum sint?</div>
<div class="right-slide">Et ipsam nihil necessitatibus officia repellat itaque perspiciatis quam! Dicta eum ipsam neque beatae excepturi temporibus sint soluta quibusdam exercitationem adipisci unde, quaerat minima! Harum architecto ipsum velit cupiditate ea possimus dolores molestiae alias at atque eaque dignissimos placeat, quibusdam nesciunt in aperiam quaerat amet quia qui fugiat incidunt! Accusantium?</div>
</div>
</div>
body {
margin: 50px;
}
.container-sliders {
display: flex;
width: 900px;
}
.left-side, .right-side {
width: 50%;
}
.left-side {
background-image: url(http://pluspng.com/img-png/monitor-transparent-lcd-png-image-1135.png);
background-size: 80%;
background-repeat: no-repeat;
height: 400px;
position: relative;
}
.left-slider {
background-color: #CCC;
position: absolute;
left: 28px;
top: 15px;
width: 305px;
height: 191px;
}
.left-slide {
background-size: cover;
background-position: center;
width: 305px;
height: 191px !important;
outline: none;
}
$( document ).ready(function() {
$('.right-side').slick({
dots: false,
arrows: false,
vertical: true,
autoplay: true,
verticalSwiping: true,
asNavFor: '.left-slider'
});
$('.left-slider').slick({
dots: false,
arrows: false,
vertical: true,
autoplay: true,
verticalSwiping: true,
asNavFor: '.right-side'
});
});
