Добры день всем я пытаюсь модифицировать слайдер на jquery ui все сделал осталось только выравнивания имя с ползунком, но не получается.
slep не могу трогать от нее зависеть другая функциональность. Прошу помощи заранее благодарю за ответ.
<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>
<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>
<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>
$(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');
$("#slider1").slider({
min: 0,
max: (myImages.length - 1),
step: 1,
value: 0.3,
// animate: "slow",
change: function(event, ui) {
$('#flask').attr('src', myImages[ui.value]);
$('#text div').css('display','none');
$('#text .text_item' + (ui.value+1)).css('display','block');
$(myLaybers).removeClass('active');
$(myLaybers[ui.value]).addClass('active');
console.log(ui.value)
}
});
});
