Сделать галерею изображений с ползунком

Question

Я хочу сделать изображение с ползунком. При прокрутке изображения ползунка изменится. Как это можно сделать?

Нечто похожее на обновление проекта по этой ссылке: https://www.belgradewaterfront.com/en/register-for-belgrade-waterfront-residences/

Смотрите эту JSFiddle http://jsfiddle.net/yFnwD/33/

$(".scroll-img-wrap").hide(); 

$: шоу(); ("прокручивать-IMG-обертку первым."). $ (".slider") .slider ({ одушевленные: правда, диапазон: "мин", значение: 0, мин: 0, макс: "прокрутить-IMG-обертку" $() длины. - 1, шаг: 1,

slide: function(event, ui) { 
     $(".scroll-img-wrap").hide(); 
     $(".scroll-img-wrap:eq("+ui.value+")").show(); 
    }, 
    change: function(event, ui) {  
    } 

}); 

ползунок должен быть над изображениями

Answer 1

вы не объяснили вашу проблему в деталях, но я могу иметь представление о том, что вы хотите сделать. .

Вот как я сделал бы это.

Сначала создайте дивы для каждого изображения, которое вы хотите в качестве слайдера

<div class="pic1"> 

</div> 
<div class="pic2"> 

</div> 
<div class="pic3"> 

</div> 

Далее вы хотите, чтобы сделать их фоны с использованием css.`

.pic1{ 
    background:url(../images/background4.jpg) no-repeat center center fixed; 
    height:100vh; 
} 

Тогда, наконец, вы будете использовать JQuery, чтобы сделать эффекты моделирования на ваших фотографических классах

});