$('.object-container').scroll(function() {
var ratio = $('.object-container').scrollTop() / (($('.all').height() - $(window).height()) / 100);
$(".hr").width(ratio + "%");
});
<div class="hr">
с полосой прокрутки? flex-grow: 1
, а при фокусе один из слайдов получает flex-grow: 15
. Это сделано для того, чтобы открытый слайд занимал ровно 75%, остальным по 5%. В CSS я не нашел прямого события "клик", поэтому выбрал :focus
для решения своей задачи. У каждого слайда задан своей бэкграунд и таб-индекс. Поэтому при фокусе он открывается.
.hide()
и.show()
строго не рекомендуется использовать, ибо удалять и добавлять в ДОМ элементы каждый раз не очень хороший паттерн