آموزش طراحی اسلایدر پیشرفته در المنتور

.watch-section{
-webkit-transition: all 1s !important;
transition: all 1s !important
}

selector{
position: absolute;
left: 0;
bottom: -10vh;
width: 160px;
transform: translateX(300%);
}
selector img{
cursor: pointer;
transition: 0.5s;
}
selector img:hover{
transform: translateY(-10px)
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
var $ = jQuery;
$(document).ready(function(){
  $('[data-vincent]').on('click', function(){
    var vincent = $(this).attr('data-vincent');
    var bColor = $(this).attr('data-color');
    $('.watch img').attr('src', vincent).attr('srcset', '');
    $(".watch-section").css("background-color", bColor);
  });
});
</script>

data-vincent|image-url
data-color|color-code