в доках свайпера написано, что надо так подключать // core version + navigation, pagination modules: import Swiper, { Navigation, Pagination } from 'swiper'; // configure Swiper to use modules Swiper.use([Navigation, Pagination]); // init Swiper: const swiper = new Swiper(...); после этого пагинация работает
Как было сказано ниже в комментариях npm версия отличается, если вы хотите оставить ее следуйте следующим правилам: import Swiper, { Navigation, Pagination } from 'swiper'; // configure Swiper to use modules Swiper.use([Navigation, Pagination]); // init Swiper: const swiper = new Swiper(...); Стили же я подключал в vendor.scss при помощи импорта (ваш локальный путь может отличаться): @import "./../../node_modules/swiper/modules/navigation/navigation"; @import "./../../node_modules/swiper/modules/pagination/pagination"; P.S. Центрирование пагинации можно не стилизовать т.к. это уже реализовано в пакете.
Я бы еще добавил смену картинки через vars.marketingEL.querySelector('.marketing__img').src = dataMarketing[marketingCounter].image где собственно в дате мы передаем путь. И если человек нажимает на закрытие по крестику, т.е. не хочет это видеть то задержку поставил бы овердофига, чтобы окошко долго не появлялось. И что касается элементов дата и коунт, а безопасно их так называть или лучше как у меня dataMarketing и т.д. Просто в конце мы это все сольем в один main.js, чтобы нигде пересечений не было. Я не выеживаюсь, просто уточная, с JS ом пока на вы.
your pixel perfect tutorials are well executed and explained, although i can't understand the language i am still following along. Thanks for your efforts.
Отличное видео. Спасибо за реально нужные и информативные уроки по веб разработке. Очень здорово что стараешься подробно объяснять простые и сложные вещи. Для кого-то это просто, а кому-то что-то даже простое и вовсе не простое. Респект
Максим подскажи пожалуйста почему у меня не работает автопрокрутка hero в swipere в main-slider.js указываю import Swiper from 'swiper'; import vars from '../_vars'; const bannerSlider = new Swiper(vars.$bannerSlider, { loop: true, slidesPerView: 1, autoplay: true,
у установленного через npm слайдера не установлены модули для его работы, возможно поэтому. Я в видео поэтому убрал установку из npm и сделал старым методом
Доброго времени суток Max. Сталкивался ли ты, когда стрелки переключения слайдера за пределы .swiper-container нужно вынести? Из-за свойства overflow: hidden. Они могут быть видны только внутри контейнера, а вот за пределами)
@@maxgraph Может быть тоже самое) Только твой слайдер у меня ломался, может я что-где запутался)) Главное работает, сама реализация: codepen.io/nikitapomogatelev/pen/jOqMwPe .
в доках свайпера написано, что надо так подключать
// core version + navigation, pagination modules:
import Swiper, { Navigation, Pagination } from 'swiper';
// configure Swiper to use modules
Swiper.use([Navigation, Pagination]);
// init Swiper:
const swiper = new Swiper(...);
после этого пагинация работает
Ага, про это ещё сам отдельно расскажу
@@maxgraph есть какие-то подводные камни?
Нет, просто чтоб люди знали)
@@maxgraph понял. Спасибо за труды!
Классно! Сделал как в доках и все заработало!
Не могу что-то понять для чего нужен visually-hidden?
Чтобы скрыть элемент визуально, но оставить видимым для экранных читалок
А почему бы в settings не прописать один раз сброс стилей для button? Просто у каждой кнопки класс btn-reset
А привычка уже)) надо переучиться
Как было сказано ниже в комментариях npm версия отличается, если вы хотите оставить ее следуйте следующим правилам:
import Swiper, { Navigation, Pagination } from 'swiper';
// configure Swiper to use modules
Swiper.use([Navigation, Pagination]);
// init Swiper:
const swiper = new Swiper(...);
Стили же я подключал в vendor.scss при помощи импорта (ваш локальный путь может отличаться):
@import "./../../node_modules/swiper/modules/navigation/navigation";
@import "./../../node_modules/swiper/modules/pagination/pagination";
P.S.
Центрирование пагинации можно не стилизовать т.к. это уже реализовано в пакете.
Макс, вопрос по верстка блока "3х баннеров".
Почему используете там width для элементов, а не flex-basis ??
Хочу использовать width, не более)
Для чего используется тег article?
Для независимого контента, который может быть перенесён на другой сайт. Товары, виджеты погоды, посты блога, и так далее
привет)почему ты баннера вставлял через бэкграунд а не img. Они видимо часто меняются в магазинах а через css менять не удобно. Или я не прав?
Потому что правильно делать их через бэк. Менять можно легко, так же как и с img
hey, green, blue, yellor color line, how to vscode settings? Tahnks!
I dont understand))
@@maxgraph example: 19:50, green color line...
Почему использовал для картинки продукта обертку product__img? Как понять, когда стоит использовать обертку, а когда нет?
Я бы еще добавил смену картинки через vars.marketingEL.querySelector('.marketing__img').src = dataMarketing[marketingCounter].image где собственно в дате мы передаем путь. И если человек нажимает на закрытие по крестику, т.е. не хочет это видеть то задержку поставил бы овердофига, чтобы окошко долго не появлялось. И что касается элементов дата и коунт, а безопасно их так называть или лучше как у меня dataMarketing и т.д. Просто в конце мы это все сольем в один main.js, чтобы нигде пересечений не было. Я не выеживаюсь, просто уточная, с JS ом пока на вы.
Самая последняя сборка gulp и это видео уже не совсем актуальны друг для друга ?
Да
@@maxgraph то есть, крайняя сборка рассчитана на другую верстку?
Много полезного узнал, спасибо!
your pixel perfect tutorials are well executed and explained, although i can't understand the language i am still following along. Thanks for your efforts.
Thanks!
Круто, спасибо за ролик!
Отличное видео. Спасибо за реально нужные и информативные уроки по веб разработке. Очень здорово что стараешься подробно объяснять простые и сложные вещи. Для кого-то это просто, а кому-то что-то даже простое и вовсе не простое. Респект
Пожалуйста)
Классное видео! А два момента вообще потрясные - генерируемые всплывашки и накрытие всей карточки ссылкой через псевдоэлемент! Спасибо!!!
Пожалуйста))
А не проще все btn обнулить, чем писать класс "btn-reset" для каждого?
Проще, но это неправильно. сбросы лучше классами делать
Максим, добрый день! А есть видео как в сборку gulp подключать слайдер без установки через npm?
Как обычный код, в документации все написано)
Максим подскажи пожалуйста почему у меня не работает автопрокрутка hero в swipere в main-slider.js указываю
import Swiper from 'swiper';
import vars from '../_vars';
const bannerSlider = new Swiper(vars.$bannerSlider, {
loop: true,
slidesPerView: 1,
autoplay: true,
});
у установленного через npm слайдера не установлены модули для его работы, возможно поэтому.
Я в видео поэтому убрал установку из npm и сделал старым методом
хмм.. почему бы карточки товара не сделать на гридах?
А вы посмотрите новые ui-компоненты :)
И кстати про пагинацию вопрос: вы подключали стили от npm версии? Или это там не нужно, что-то никогда не подключал swiper как модуль
Нет, обычную версию
Почему какие-то ошибки у меня в жс (
Уже как тока не исправлял
Исходники скачены ,а ошибок нету
Ну выбивает
Странно)
.marketing уезжает с новым title каждый раз
М?
43:20
Доброго времени суток Max. Сталкивался ли ты, когда стрелки переключения слайдера за пределы .swiper-container нужно вынести? Из-за свойства overflow: hidden. Они могут быть видны только внутри контейнера, а вот за пределами)
Приветствую, конечно) например - codepen.io/MaxGraph/pen/bGdPLOZ
Разобрался. Спасибо за то что откликнулся. Жду следующей части по верстке. Если интересно могу скинуть пример с моими комментариями)
Давай :) Но в целом там должно быть то же самое)
@@maxgraph Может быть тоже самое) Только твой слайдер у меня ломался, может я что-где запутался)) Главное работает, сама реализация: codepen.io/nikitapomogatelev/pen/jOqMwPe .