Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Slider ui модифицировать (https://javascript.ru/forum/misc/80429-slider-ui-modificirovat.html)

Hovik 03.06.2020 18:54
Slider ui модифицировать
 
Добры день всем я пытаюсь модифицировать слайдер на 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)
    }
  });
});

рони 03.06.2020 20:38
Цитата:
Сообщение от Hovik
slep не могу трогать от нее зависеть другая функциональность.
чтобы это значило?

Hovik 03.06.2020 21:03 
step: 1,

рони 03.06.2020 22:30
slider с отступами
 
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>

Hovik 04.06.2020 01:02
рони,
Классно все как мне и нужно, но мне больше всего интересует логика по которому ты правил код, если можно то коротко объясни пожалуйста эти математические операции плюсы, минусы.

рони 04.06.2020 10:39
Hovik,
основное:
строка 79. шкала увеличена в 10 раз, чтоб у слайдера был больше диапазон для клика.
шкала ограничена слева и справа строки 93 и 94.
чтоб получить правильный индекс шкала делится на 10 и отбрасывается остаток строка 87.


Часовой пояс GMT +3, время: 19:58.