Link pictures to <input type = "range> using js or jQuery

Question

Tell the non-experienced programmer to assign an event with input type = "range" as a picture (any element), so that when the value value changes, the pictures scroll. Just with the arrows it turned out, but with the range I can not understand how ..

here's the codepen http://codepen.io/vitekiss/pen/oLZRWQ

var lis = document.querySelectorAll('li.partn'); for (var i = 0; i < lis.length; i++) { /*lis[i].style.position = 'relative'; var span = document.createElement('span'); //этот код - для удобства разработки span.style.cssText = 'position:absolute;left:0;top:0'; span.innerHTML = i + 1; lis[i].appendChild(span);*/ } /* конфигурация */ var width = 212; // ширина изображения var count = 1; // количество изображений для сдвига var carousel = document.getElementById('carousel'); var list = carousel.querySelector('div.gallery>ul'); var listElems = carousel.querySelectorAll('li.partn'); var position = 0; // текущий сдвиг влево carousel.querySelector('.prev').onclick = function() { // сдвиг влево // последнее передвижение влево может быть не на 3, а на 2 или 1 элемент position = Math.min(position + width * count, 0) list.style.marginLeft = position + 'px'; }; carousel.querySelector('.next').onclick = function() { // сдвиг вправо // последнее передвижение вправо может быть не на 3, а на 2 или 1 элемент position = Math.max(position - width * count, -width * (listElems.length - count)); list.style.marginLeft = position + 'px'; };

 .carousel { position: relative; width: 250px; } .carousel img { display: block; } .arrow { position: absolute; top: 100px; padding: 0; background: white; /*border-radius: 15px;*/ border: none; font-size: 1.8em; line-height: 24px; color: #444; display: block; } .prev { left: 7px; } .next { right: 7px; } .gallery { width: 100%; overflow: hidden; } .gallery ul { width: 9999px; margin: 0; padding: 0; list-style: none; transition: margin-left 1000ms; font-size: 0; } .gallery li { display: inline-block; }

  <div id="carousel" class="carousel"> <button class="arrow prev"><</button> <div class="gallery"> <ul class="images"> <li class="partn"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Great_dane.jpg/250px-Great_dane.jpg"></li> <li class="partn"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Great_dane.jpg/250px-Great_dane.jpg"></li> <li class="partn"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Great_dane.jpg/250px-Great_dane.jpg"></li> </ul> </div> <button class="arrow next">></button> <input type="range" value="0" max="3" id="position_new_product" /> </div>

If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer).

Accepted Answer · 2016-06-29T18:52:07

Instead of storing the number by how many elements you need to move, you can simply take it from the input value.

The size of the shift can be determined very simply: ширина_изображения*номер_картинки

номер_картинки in this case coincides with the value of the input.

To move the list to the left - the value of the margin-left must be negative, as a result, the function of the change handler degenerates into the next

 document.getElementById('position_new_product').addEventListener('input', function() { list.style.marginLeft = (-width * this.value) + 'px'; });

Working example:

 /* конфигурация */ var width = 256; // ширина изображения var list = carousel.querySelector('#carousel div.gallery>ul'); document.getElementById('position_new_product').addEventListener('input', function() { list.style.marginLeft = (-width * this.value) + 'px'; });

 .carousel { position: relative; width: 256px; } .carousel img { display: block; } .arrow { position: absolute; top: 100px; padding: 0; background: white; /*border-radius: 15px;*/ border: none; font-size: 1.8em; line-height: 24px; color: #444; display: block; } .prev { left: 7px; } .next { right: 7px; } .gallery { width: 100%; overflow: hidden; } .gallery ul { width: 9999px; margin: 0; padding: 0; list-style: none; transition: margin-left 1000ms; font-size: 0; } .gallery li { display: inline-block; }

 <div id="carousel" class="carousel"> <div class="gallery"> <ul class="images"> <li class="partn"> <img src="//www.gravatar.com/avatar/802d132837bedd698ebd9b8fe7fb77ae?s=256&d=identicon"> </li> <li class="partn"> <img src="//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=256&d=identicon"> </li> <li class="partn"> <img src="//www.gravatar.com/avatar/1ab1d534250b21d145a3bf548b954901?s=256&d=identicon"> </li> <li class="partn"> <img src="//www.gravatar.com/avatar/4ffa137ca41767871222a5ca3d4e24ad?s=256&d=identicon"> </li> <li class="partn"> <img src="https://graph.facebook.com/905721779505680/picture?type=large"> </li> </ul> </div> <input type="range" value="0" max="4" id="position_new_product" /> </div>

@Webitek, what do you mean by responsive design in this case, and why might something like it or not be suitable for it?

Answer 2 · 2016-06-29T17:11:59

 $("#i").on('input', function () { $("#dest").css('transform', "translate(-" + $(this).val() + "00%, 0)"); })

 p { text-align: center; } input { width: 256px; } section { white-space: nowrap; overflow: hidden; width: 256px; margin: auto; } div { width: 100%; transform: translate(-100%, 0); transition: transform 1s linear; } img { vertical-align: middle; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p><input type=range id=i min=0 max=3 value=1 autofocus></p> <section><div id=dest><img src="//www.gravatar.com/avatar/802d132837bedd698ebd9b8fe7fb77ae?s=256&d=identicon" ><img src="//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=256&d=identicon" ><img src="//www.gravatar.com/avatar/1ab1d534250b21d145a3bf548b954901?s=256&d=identicon" ><img src="//www.gravatar.com/avatar/4ffa137ca41767871222a5ca3d4e24ad?s=256&d=identicon" ></div></section>

Of course, thanks for the code, but you can at least some explanation .... I did not understand everything.
and what does it mean (- "+ $ (this) .val () +" 00%, 0) ");? Thanks in advance and apologies for stupid questions for many
@Webitek, e - this event - in this case is not used, so you can remove.
The rest is just a string being formed as in css translate(-100%, 0);
If you change the event to input - then the pictures will move immediately when you change the slider, and not after releasing :-)
@Grundy, I just wasn't sure about cross-browser input for the range type.

Link pictures to <input type = "range> using js or jQuery

2 answers 2

More articles: