Во первых, ознакомся с документацией на codepen. Внещние файлы стилей и скриптов подключаются не так, а через Pen Settings и в окне html пишется только содержимое body без самого тега body.
То есть в html дожно быть только:
<div class="swiper swiper-hero">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="hero__slider">
<div class="hero__slider-link">
<a href="#">
<img class="hero__slider-img hero__slider-img_desktop swiper-lazy" data-src="https://images.unsplash.com/photo-1492098116625-46bb70755996?dpr=1&auto=format&fit=crop&w=1500&h=1124&q=80&cs=tinysrgb&crop=&bg=" style="width: 100% !important; height: 556px !important;">
</a>
</div>
</div>
</div>
</div>
</div>
Во вторых ты пропустил элемент swiper-wrapper, который я добавил в примере выше.
UPDATE:
в третьих не надо ничего импортировать, ты и так подключаешь bundle всего свайпера
То есть в js убери строку
import Swiper, { Navigation, Pagination, Autoplay, Lazy } from "swiper";
и соответсвенной при создании инстанса не надо указывать modules, то есть надо убрать строку
modules: [Navigation, Pagination, Autoplay],
ну и вот
пример
Ах да, и ты почему-то подключаешь в теге скрипт файл css
