Не хочет отрабатывать код js файл, хотя подключен правильно в html

Question

Есть 3 файла (в папке больше ничего нет) Html,Css,Js. Все подключил в html файле верно. Перепроверял css изменением фона, js - алертом. Все работало, тобеж подключено верно.

Вношу код с Codepen [https://codepen.io/sldkfjwelkgmerbgki/pen/RwQBrWJ][1] по отдельным файлам. При внесении кода в js перестает работать код, попросту не обрабатывается. Даже алерт вверху файла не работает. Просто черный экран благодаря css, с помощью js эллементы должны отобразится.

Также пробовал ввести тот же код на JSFiddle [https://jsfiddle.net/dn6pwre4/4/][2] - Все работает

// https://dribbble.com/shots/11012652--Timed-Cards-Opening

alert('Hi')

import splitting from "https://cdn.skypack.dev/[email protected]";

const heroEl = document.querySelector(".hero");
const fullSizeWrapEl = heroEl.querySelector(".hero__fullsize");
const contentEls = heroEl.querySelectorAll(".swiper .content");
const contentFullsizeEls = Array.from(contentEls, (el) => {
  const clone = el.cloneNode(true);
  splitting({ target: clone, by: "words" });
  clone.classList.add(
    "hero__content",
    "hero__content--hidden",
    "content--hero"
  );
  clone.classList.remove("content--slide");
  return clone;
});

contentFullsizeEls.forEach((el) => fullSizeWrapEl.appendChild(el));

const state = {
  topContent: null,
  bottomContent: null
};

function slideChange(swiper) {
  const total = swiper.slides.length - swiper.loopedSlides * 2;
  const contentIndex = (swiper.activeIndex - swiper.loopedSlides) % total;

  const content = contentFullsizeEls[contentIndex];
  if (!content) return;

  if (state.bottomContent) {
    state.bottomContent.classList.remove("hero__content--bottom");
    state.bottomContent.classList.add("hero__content--hidden");
  }

  if (state.topContent) {
    state.topContent.classList.remove("hero__content--top");
    state.topContent.classList.add("hero__content--bottom");
  }

  state.bottomContent = state.topContent;
  state.topContent = content;

  const slidetRect = swiper.slides[swiper.activeIndex].getBoundingClientRect();
  const parentRect = heroEl.getBoundingClientRect();

  content.style.transition = "none";
  content.style.left = slidetRect.left - parentRect.left + "px";
  content.style.top = slidetRect.top - parentRect.top + "px";
  content.style.width = slidetRect.width + "px";
  content.style.height = slidetRect.height + "px";
  content.style.borderRadius = "var(--border-radius, 0)";

  content.getBoundingClientRect();

  content.classList.remove("hero__content--hidden");
  content.classList.add("hero__content--top", "hero__content--grow");

  content.style.transition = "";
  content.style.left = "";
  content.style.top = "";
  content.style.width = "";
  content.style.height = "";
  content.style.borderRadius = "";

  const onShowTextEnd = (event) => {
    if (event.target !== event.currentTarget) {
      event.currentTarget.classList.remove("hero__content--show-text");
      event.currentTarget.removeEventListener("transitionend", onShowTextEnd);
    }
  };

  const onGrowEnd = (event) => {
    event.currentTarget.classList.remove("hero__content--grow");
    event.currentTarget.classList.add("hero__content--show-text");
    event.currentTarget.addEventListener("transitionend", onShowTextEnd);
  };

  content.addEventListener("transitionend", onGrowEnd, { once: true });

  // console.log(slideIndex, total);
}

function swiperInit(swiper) {
  const total = swiper.slides.length - swiper.loopedSlides * 2;
  const contentIndex = (swiper.activeIndex - swiper.loopedSlides) % total;

  const content = contentFullsizeEls[contentIndex];
  if (!content) return;

  content.classList.remove("hero__content--hidden");
  content.classList.add("hero__content--top");
  state.topContent = content;
}

const swiper = new Swiper(".swiper", {
  slidesPerView: 3.5,
  spaceBetween: 25,
  loop: true,
  speed: 1000,
  simulateTouch: false,

  autoplay: {
    delay: 1000
  },

  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
  on: { realIndexChange: slideChange, init: swiperInit }
});

* {
  box-sizing: border-box;
}

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #222;
  font-family: sans-serif;
  line-height: 1.35;
  margin: 0;
  padding: 0;
}

.hero {
  --border-radius: 12px;
  --transition-duration: 1000ms;
  position: relative;
  width: 100%;
  height: 100vh;
}

.hero__fullsize {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.hero__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  filter: drop-shadow(0 5px 5px #0007);
  transition:
    top var(--transition-duration), 
    left var(--transition-duration), 
    width var(--transition-duration), 
    height var(--transition-duration),
    border-radius var(--transition-duration),
    transform var(--transition-duration),
    opacity var(--transition-duration);
}

.hero__content--hidden {
  visibility: hidden;
  transition: none;
  transform: none;
  opacity: 1;
  z-index: 0;
}

.hero__content--bottom {
  opacity: 0;
  transform: scale(1.5);
  z-index: 1;
}

.hero__content--top {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  z-index: 2;
}

/* curtain */

.hero__content--show-text::before {
  transform: translateX(0);
  transition: transform 300ms;
}

.hero__content--grow::before {
  transform: translateX(-100%);
  transition: none;
}

/* title */
.hero__content--show-text .content__title {
  transform: translateY(0);
  transition: transform 300ms;
}

.hero__content--show-text .content__title .word {
  clip-path: inset(0);
  transition: clip-path 300ms;
}

.hero__content--grow .content__title {
  visibility: hidden;
  transform: translateY(48px);
  transition: none;
}

.hero__content--grow .content__title .word {
  clip-path: inset(0 0 48px);
  transition: none;
}

/* desc */

.hero__content--show-text .content__desc {
  transform: translateY(0px);
  transition: transform 300ms;
}

.hero__content--show-text .content__desc .word {
  clip-path: inset(0);
  transition: clip-path 300ms;
}

.hero__content--grow .content__desc {
  visibility: hidden;
  transform: translateY(18px);
  transition: none;
}

.hero__content--grow .content__desc .word {
  clip-path: inset(0 0 18px);
  transition: none;
}

.hero__swiper {
  position: absolute;
/*   right: 0; */
  float: right;
  top: 20px;
  width: 70%;
  aspect-ratio: 2.5 / 1;
  right: 0px;
  bottom: 50px;
  padding: 15px 0;
  z-index: 1;
  user-select: none;
}

.swiper {
  --swiper-navigation-size: 20px;
  visibility: hidden;
}

.swiper.swiper-initialized {
  visibility: visible;
}

.swiper-slide-prev,
.swiper-slide-active {
  opacity: 0;
}

.swiper-slide {
  display: flex;
}

.content {
  display: flex;
  position: relative;
  width: 100%;
  filter: drop-shadow(0 5px 5px #0007);
  overflow: hidden;
  z-index: 0;
}

.content--slide {
  position: relative;
  border-radius: var(--border-radius, 0);
}

.content__text {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: #fff;
}

.content__desc {
  margin: 0;
}

.content--slide .content__title {
  font-size: 12px;
  margin: auto 0 0;
  padding: 0.35em 0.75em;
  background-color: #0007;
}

.content--slide .content__desc {
  position: absolute;
  left: 0;
  visibility: hidden;
}

.content--hero {
  padding: 100px 50px 0;
  position: absolute;
  border-radius: 0;
}

.content--hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, hsl(49deg 70% 5% / 67%), transparent);
  pointer-events: none;
  z-index: -1;
}

.content--hero .content__title {
  font-size: 42px;
  margin: 0 0 0.2em;
}

.content--hero .content__text {
  width: 45%;
}

.content__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.swiper-button-next {
  right: auto !important;
  left: calc((100% - 25px * 2) / 3.5);
  top: calc(50% - 20px) !important;
  width: 40px;
  height: 40px;
  background-color: #fffb;
  border-radius: 50%;
  color: forestgreen;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="main.css">

</head>
<body>
<div class="hero">
  <div class="hero__fullsize"></div>
  <div class="hero__swiper swiper">
    <div class="swiper-wrapper">

      <div class="swiper-slide">
        <div class="content content--slide">

          <img class="content__image" src="https://images.unsplash.com/photo-1598188306155-25e400eb5078?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzN8fGNhdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=1200&q=80" alt="">

          <div class="content__text">
            <h2 class="content__title">Lorem ipsum dolor</h2>
            <p class="content__desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Earum, nobis tempora quam ducimus veritatis sint aut adipisci quibusdam repudiandae autem at! At nihil repudiandae dicta obcaecati</p>
          </div>

        </div>
      </div>

      <div class="swiper-slide">
        <div class="content content--slide">

          <img class="content__image" src="https://images.unsplash.com/photo-1573865526739-10659fec78a5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=80" alt="">

          <div class="content__text">
            <h2 class="content__title">вDolore minus quibusdam</h2>
            <p class="content__desc">Enim facilis dolorem maiores quis exercitationem vitae numquam fugiat ex cupiditate deserunt praesentium. Nesciunt autem quasi assumenda exercitationem cupiditate.Earum, nobis tempora quam ducimus veritatis sint aut adipisci quibusdam repudiandae autem at!</p>
          </div>

        </div>
      </div>

      <div class="swiper-slide">
        <div class="content content--slide">

          <img class="content__image" src="https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGNhdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=1200&q=80" alt="">

          <div class="content__text">
            <h2 class="content__title">Sequi provident ratione</h2>
            <p class="content__desc">Ipsa quos earum nobis eius voluptates neque dolores mollitia illum quae hic! Aspernatur delectus quas praesentium debitis doloribus velit, fugiat error veritatis est dolorum! Enim, ea optio. Corrupti ab, provident perferendis, doloremque in enim reprehenderit dolorum ea eius ullam eos impedit repellendus.</p>
          </div>

        </div>
      </div>

      <div class="swiper-slide">
        <div class="content content--slide">

          <img class="content__image" src="https://images.unsplash.com/photo-1478098711619-5ab0b478d6e6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fGNhdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=1200&q=80" alt="">

          <div class="content__text">
            <h2 class="content__title">Aspernatur fugiat qui dolorum</h2>
            <p class="content__desc">Cupiditate voluptas facere nostrum illum quo mollitia ut natus, maiores ipsam veritatis deserunt dignissimos sed harum perferendis dolores quisquam consequuntur tempore! Quae quos neque ex fuga quis! Deleniti obcaecati quo officiis perferendis repellat inventore! Voluptates, tenetur neque perspiciatis nisi dolorem iure voluptas!</p>
          </div>

        </div>
      </div>

      <div class="swiper-slide">
        <div class="content content--slide">

          <img class="content__image" src="https://images.unsplash.com/photo-1511275539165-cc46b1ee89bf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDF8fGNhdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=1200&q=80" alt="">

          <div class="content__text">
            <h2 class="content__title">Tempora repellat aliquam</h2>
            <p class="content__desc">Odio ullam iure quisquam tempora eaque, dolores officia harum, perspiciatis nobis amet vitae optio, deserunt maxime delectus atque laborum iusto voluptatem. Iure facere, mollitia nobis adipisci sapiente et, ea maiores accusantium quos fuga at quam magnam soluta eligendi beatae ipsa a! Assumenda!</p>
          </div>

        </div>
      </div>

      <div class="swiper-slide">
        <div class="content content--slide">

          <img class="content__image" src="https://images.unsplash.com/photo-1596854307943-279e29c90c14?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NjR8fGNhdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=1200&q=80" alt="">

          <div class="content__text">
            <h2 class="content__title">Debitis rem soluta nulla</h2>
            <p class="content__desc">Eligendi non sunt dolorem nulla iste atque quos suscipit omnis, numquam culpa mollitia, earum inventore, reprehenderit ipsum cumque debitis repellat adipisci quis incidunt natus ad! Atque quidem explicabo ex voluptatibus vero ratione consectetur culpa perferendis quibusdam, id sunt ipsa aliquid porro nemo!</p>
          </div>

        </div>
      </div>

    </div>

    <div class="swiper-button-next"></div>
  </div>

</div>

 <script src="app.js" type="module"></script>
</body>
</html>

БЛОГ НА HUSL

Не хочет отрабатывать код js файл, хотя подключен правильно в html

Ответы (0 шт):