@dark-cucumber

Как сделать вертикальный липкий слайдер?

Здравствуйте, хабровцы. Делаю заказ на фрилансе, столкнулся с проблемой. Гуглил, не смог найти подходящие темы на форумах, не нашел подходящий плагинов, писал сам. Вышло, как понимаете, через пятую точку. Уже у всех форумах спрашивал, всех чатах, но никто не может ответить.

Вот что у меня вышло
p.s. там начинается первый слайд с 12-ДЮЙМОВЫЙ СЕНСОРНЫЙ ЭКРАН UCONNECT®, нужно вниз проскролить.

У меня вышло: сделать конструкцию слайдера, изображение с правой стороны имеет липкое позиционирование, изминяется при скроллинге, когда меняется слайд. Текстовые элементы слева статические, они меняются при скроллинге, определяя активный слайд(увеличивается немного в размерах и цвет более черный).
У меня не вышло: написать условие, при котором меняется слайд. Оно вроде как на ПК разрешении работает, на другом не работает, на телефоне вообще не успеваешь дойти до слайда, а картинка уже меняется и тд.
// когда прокрутка окна/страницы достигает слайда(текстовый элемент, тот что слева)
if($(window).scrollTop() <= $(el).offset().top)
{
    // some code
}


Помогите пожалуйста решить проблему, я запутался, что я делаю не так?
  • Вопрос задан
  • 123 просмотра
Пригласить эксперта
Ответы на вопрос 2
SilenceOfWinter
@SilenceOfWinter
та еще зажигалка...
тебе нужно переключать слайды когда элемент +- по середине экрана и учитывать padding/margin элемента.
Ответ написан
@antares4045
а телефон это какое разрешение?
просто я посмотрел: на всех стандартных разрешениях выглядит слегка стремновато, но работоспособно.

разве что я бы вам порекомендовал вычесть из scrollTop половину высоты экрана, чтобы картинка переключалась когда большая часть текста видна, а не "снизу показался первый пиксель заголовка".
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы