Hovik,
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.myslider2{
width: 800px;
display: block;
margin: 0 auto;
}
#flask{
display: block;
margin: 0 auto;
}
#text{
margin-top: 20px;
}
#text div:not(:first-child){
display: none;
}
#slider1{
height: 18px;
background: #0024d6;
}
#slider1 > span{
height: 30px;
top: -10px;
cursor: pointer;
background: linear-gradient(0deg,#d3d3d3 0,#fff);
}
#slider1 .ui-state-focus{
outline: none;
}
#slider1 .ui-state-active{
border: 1px solid #cccccc;
background: #ededed;
}
.slider-labels{
margin: 15px auto;
font-size: 16px;
table-layout: fixed;
}
.slider-labels > div{
display: flex;
justify-content: space-between;
}
.myslider2 .slider-labels .active {
color: #0024d6;
font-weight: 700;
}
.gich{
display: flex;
justify-content: space-around;
}
.gich span{
width: 1px;
background-color: #fff;
opacity: .8;
height: 18px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script>
$(function() {
var myImages = [
"slider1/1.jpg",
"slider1/2.jpg",
"slider1/3.jpg",
"slider1/4.jpg",
"slider1/4.jpg",
];
var myLaybers = $('.myslider2 .slider-labels .slider-label');
var bisy;
$("#slider1").slider({
min: 0,
max: myImages.length * 10,
step: 1,
value: 5,
change: function(event, ui) {
if(bisy) {
bisy = false;
return;
};
var num = Math.floor(ui.value/10);
$('#flask').attr('src', myImages[num]);
$('#text div').css('display','none');
$('#text .text_item' + (num + 1)).css('display','block');
$(myLaybers).removeClass('active');
$(myLaybers[num]).addClass('active');
var current = (num * 10) + 5;
current = Math.min(current, myImages.length * 10 - 5);
if(current != ui.value) {
bisy = true;
$("#slider1").slider('option', 'value', current);
}
}
});
});
</script>
</head>
<body>
<div class="myslider2">
<img src="slider1/1.jpg" id="flask">
<div class="slider-labels">
<div>
<div class="slider-label poor active">Médiocre/passable</div>
<div class="slider-label good">Bonne</div>
<div class="slider-label everygood">Très bonne</div>
<div class="slider-label ideal">Idéale</div>
<div class="slider-label signature">Astor by Blue Nile™</div>
</div>
</div>
<div id="range">
<div id="slider1">
<div class="gich">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div id="text">
<div class="text_item1">
1numquam, quod, facere porro maxime expedita quo quae? Doloribus accusantium, iste praesentium aliquam minima necessitatibus vitae quia vero commodi quas?
</div>
<div class="text_item2">
2Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui consequatur nam tenetur porro expedita saepe voluptatem tempora voluptatibus? Tempore voluptatibus
</div>
<div class="text_item3">
3Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus
</div>
<div class="text_item4">
4Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus
</div>
<div class="text_item5">
5Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus olore libero
</div>
</div>
</div>
</body>
</html>