Привет.
Пытаюсь настрочить пет-проект, а конкретно верстку лендинга с интерактивными штуками.
Там присутствует слайдер-карусель, который я пытаюсь сделать по различным гайдам.
На текущий момент проблема состоит в том, что не присваивается dataset.order карточкам, чтоб задать им порядок
Вроде все проверил, все написано правильно и без ошибок, не понимаю куда копать
<div class="rates__slider-container">
<button class="rates__slider-prev" type="button"></button>
<button class="rates__slider-next" type="button"></button>
<div class="rates__slider">
<article class="rates__card">
<h3 class="rates__card-title">Сайт “Каталог”</h3>
<p class="rates__card-text">Сайт-каталог – это полноценный веб-ресурс, в котором потребители могут ознакомиться с товарами или услугами компании. Являясь удобным инструментом продаж, сайт-каталог может повысить доходность бизнеса и упростить задачу по предоставлению ассортимента целевой аудитории.
</p>
<div class="rates__card-info">
<div class="rates__card-prices">
<span class="rates__card-price">От 60.000₽</span>
<span class="rates__card-term">От 15 дней</span>
</div>
<button class="rates__card-button">Подробнее ></button>
</div>
</article>
<article class="rates__card">
<h3 class="rates__card-title">Сайт “Визитка”</h3>
<p class="rates__card-text">Сайт-визитка - компактный веб-ресурс – отличный старт бизнеса в интернете. Сайт-визитка содержит несколько страниц, в том числе – информацию о компании, её товарах и услугах, прейскурант цен, контакты и координаты для связи.
</p>
<div class="rates__card-info">
<div class="rates__card-prices">
<span class="rates__card-price">От 30.000₽</span>
<span class="rates__card-term">От 5 дней</span>
</div>
<button class="rates__card-button">Подробнее ></button>
</div>
</article>
<article class="rates__card">
<h3 class="rates__card-title">Сайт “Интернет магизин”</h3>
<p class="rates__card-text">Сайт-визитка - компактный веб-ресурс – отличный старт бизнеса в интернете. Сайт-визитка содержит несколько страниц, в том числе – информацию о компании, её товарах и услугах, прейскурант цен, контакты и координаты для связи.
</p>
<div class="rates__card-info">
<div class="rates__card-prices">
<span class="rates__card-price">От 75.000₽</span>
<span class="rates__card-term">От 30 дней</span>
</div>
<button class="rates__card-button">Подробнее ></button>
</div>
</article>
<article class="rates__card">
<h3 class="rates__card-title">Сайт “Landing page”</h3>
<p class="rates__card-text">Одностраничный сайт (Landing Page) – так называют промо-сайты для презентации товара, услуги и организации мгновенных продаж. Мы умеем создавать веб-ресурсы, полностью готовые к наплыву лавины посетителей. Одна-единственная страница принесёт колоссальную прибыль: иначе и быть не может.
</p>
<div class="rates__card-info">
<div class="rates__card-prices">
<span class="rates__card-price">От 25.000₽</span>
<span class="rates__card-term">От 17 дней</span>
</div>
<button class="rates__card-button">Подробнее ></button>
</div>
</article>
<article class="rates__card">
<h3 class="rates__card-title">Сайт “Корп.сайт”</h3>
<p class="rates__card-text">Корпоративный сайт – это крупномасштабный портал, который создается не только для контакта организации с клиентами, но и для обмена информацией, мнениями, идеями между сотрудниками и руководством. Электронный ресурс такого типа – лицо компании, солидный «костюм», вызывающий у партнёров и контрагентов уважение и интерес.
</p>
<div class="rates__card-info">
<div class="rates__card-prices">
<span class="rates__card-price">От 60.000₽</span>
<span class="rates__card-term">От 17 дней</span>
</div>
<button class="rates__card-button">Подробнее ></button>
</div>
</article>
<article class="rates__card">
<h3 class="rates__card-title">Сайт “Индивидуальный”</h3>
<p class="rates__card-text">Мы готовы выслушать вашу идею, и выполнить задание. Цена проекта будет складываться от ее технического задания и сроков выполнения.
</p>
<div class="rates__card-info">
<div class="rates__card-prices">
<span class="rates__card-price">От ?₽</span>
<span class="rates__card-term">От ? дней</span>
</div>
<button class="rates__card-button">Подробнее ></button>
</div>
</article>
</div>
</div>
const RatesSlider = document.querySelector('.rates__slider');
const SliderContainer = document.querySelector('.rates__slider-container');
const Slides = document.querySelector('.rates__card');
const btnNext = document.querySelector('.rates__slider-next');
const btnPrev = document.querySelector('.rates__slider-prev');
let activeOrder = 0;
init();
function init() {
for (let i = 0; i < Slides.length; i++) {
const slide = Slides[i];
slide.dataset.order = i;
slide.style.transform = "translate(50%, 50%)";
}
activeOrder=Math.floor(Slides.length / 2);
update();
}
function update() {
const {width, height} = SliderContainer.getBoundingClientRect();
for (let i = 0; i < Slides.length; i++) {
const leftSlide = document.querySelector(`.rates__slider[data-order="${activeOrder - i}"]`);
if (leftSlide) {
leftSlide.style.left=`${width / 2}px`
}
const rightSlide = document.querySelector(`.rates__slider[data-order="${activeOrder + i}"]`);
}
}
Код в хтмл подключен. length написал правильно, что еще может быть?
