Как сделать карусель как в Skipperlimited - PullRequest
0 голосов
/ 15 ноября 2018

Я что-то делаю и хочу оформить как http://www.skipperlimited.com/

Но я не знаю, что делать с этой каруселью изображений и каруселью внутри их логотипа. Может кто-то показать какой-то путь. Заранее спасибо

1 Ответ

0 голосов
/ 15 ноября 2018

Вопрос в том, чтобы «показать какой-то путь» - и я думаю, что этот вопрос разумен и прекрасно отвечает. Не все должно быть кодом, иногда речь идет также о том, как начать / как туда добраться. Возможны разные подходы, вот мой путь:

Я бы изучал исходный код через «Инструменты разработчика», которые предлагает каждый браузер. Там я вижу, что сами изображения готовятся очень стильным способом, который не имеет ничего общего с HTML. Вот прямая ссылка на одно из их изображений:

http://repository.skipperlimited.com/images/home-images/home-bg3.jpg

Кроме того, я вижу, что другой текст располагается над изображением, используя контейнер с абсолютным позиционированием, называемый «home-wrapper». Здесь важно абсолютное позиционирование и z-индекс: текст должен располагаться поверх контейнера изображений.

В теге head я также вижу, что jquery.bxslider.js включен, так что вы можете проверить эту библиотеку и изучить их документацию.

Чтобы выяснить, как работают кнопки: к ним, похоже, прикреплены слушатели событий. Итак, снова в devTools, я нахожу их в исходном коде и проверяю вкладку «EventListeners» в devTools. Существует список прослушивателей событий, которые в данный момент активны для элемента, и я вижу, что к этим маленьким квадратам прикреплено событие «jquery.bxslider».

и т. Д.

Это был бы мой способ исследования. Надеюсь, это немного поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...