Свой слайдер изображений на jQuery

Начну с того, что эта публикация опубликована в целях поведать о том, как формируется слайдер прокрутки изображений для интернет-страниц. Данная публикация ни под каким видом не несет просвещающий характер, она только служит образцом того, как можно осуществить наш субъект рассмотрения. Код, переданный в данной публикации можно применять как некоторый стандарт для таких исследований, рассчитываю, что у меня получится довольно досконально и доступно донести до пользователя всю сущность мной написанного.

Теперь к делу, недавно мне надо было установить слайдер на 1 сайт, однако поискав в сети-интернет готовые скрипты я не отыскал ничего основательного, т.к. какие-то работали не в связи с тем что мне надо, а иные вообще не запускались без погрешностей в приставки. Применять jQuery слайдеры – плагины для слайдера мне представилось уж чересчур скучным, т.к. я этим хотя и постановлю цель, однако у меня не останется осознания о работе этого механизма, к тому же применять плагин для одного слайдера не очень и нормально. Разбираться в искривленных скриптах мне также было не очень и рыбалка, потому я и принял решение напечатать собственный script для слайдера, который сам и раскидаю как мне надо.

Сперва нам нужно определиться с логикой работы самого слайдера, а затем подходить к реализации, на этом раунде важно отчетливое осознание работы данного механизма, поскольку в его отсутствие нам не напечатать кода, работающего точь-в-точь так, как мы намерены.

Основным субъектом у нас будет viewport, другими словами блок, в котором мы станем лицезреть, как вертятся наши иллюстрации, в нем у нас будет slidewrapper, это будет нашим блоком, сохраняющим внутри себя все картинки, выстроенными в одну полосу, и который будет заменять собственную позицию внутри самого viewport.

Дальше, по краям внутри viewport, горизонтально в центре, будут находиться клавиши назад и вперед, при клике на которые мы также станем заменять позицию нашего slidewrapper сравнительно viewport, этим самым вызывая эффект пролистывания иллюстраций. И, в конце концов, заключительным субъектом будут наши кнопки навигации, располагающиеся в нижней части viewport.

Оставить комментарий

Декабрь 2018
Пн Вт Ср Чт Пт Сб Вс
« Ноя    
 12
3456789
10111213141516
17181920212223
24252627282930
31  
Яндекс.Метрика
Реклама
Ссылки: