Поэтапная смена блока в блоке при скролле страницы
Всем привет, есть код, который должен менять при скролле блок, но он не работает. Подскажите, пожалуйста, что не так. Спасибо.
var func = function(e) {
setTimeout(function() {
$('#my-price-list').one('mousewheel', func);
}, 500);
var sec_1 = $(".section");
let main__current = $('.main__current');
if (e.originalEvent.wheelDelta / 120 > 0) {
if (main__current.is(':first-child')) {
return;
}
main__current.removeClass("main__current").addClass("main__next")
main__current.prev().addClass("main__current").removeClass("main__next main__previous")
} else {
if (main__current.is(':last-child')) {
return;
}
main__current.removeClass("main__current").addClass("main__previous");
main__current.next().addClass("main__current").removeClass("main__next main__previous")
}
};
$('#my-price-list').one('mousewheel', func); <div class="price-list" id="my-price-list">
<ul>
<li class="price-list-li">
<div class="price-list-li-div section section_1 main__section main__current">
<div class="price-list-upper-part">
<div class="price-list-li-text">
<h3>Landing page</h3>
<p>Разработка и дизайн креативного лендинга, который <br>привлекает внимание ваших клиентов и выделяет вас <br>среди конкурентов. </p>
</div>
<div class="price-list-li-info">
<div class="price-list-li-info-h">
<h4 id="span">От 30 000 рублей </h4>
<h4>Дизайн</h4>
<h4>Под ключ</h4>
<h4>От 10 дней</h4>
</div>
</div>
</div>
<div class="portfolio-price-list">
<ul>
<li>
<div class="portfolio-pl-link">
<p>Октябрь 2023</p>
<img src="./Img and icon/Group2087.png">
<a href=""><img src="./Img and icon/arrow45.svg" class="portfolio-price-list-arrow" alt="">
</div>
</a>
</li>
<li>
<div class="portfolio-pl-link">
<p>Октябрь 2023</p>
<img src="./Img and icon/Group2087.png">
<a href=""><img src="./Img and icon/arrow45.svg" class="portfolio-price-list-arrow" alt="">
</div>
</a>
</li>
<li>
<div class="portfolio-pl-link">
<p>Октябрь 2023</p>
<img src="./Img and icon/Group2087.png">
<a href=""><img src="./Img and icon/arrow45.svg" class="portfolio-price-list-arrow" alt="">
</div>
</a>
</li>
</ul>
</div>
<div class="price-list-li-link">
<a href="#!" class="price-list-BTN">Получить консультацию <img src="./Img and icon/Arrow - Down 7.svg" alt=""></a>
</div>
</div>
</li>
<li class="price-list-li">
<div class="price-list-li-div section section_1 main__section main__current">
<div class="price-list-upper-part">
<div class="price-list-li-text">
<h3>Landing page</h3>
<p>Разработка и дизайн креативного лендинга, который <br>привлекает внимание ваших клиентов и выделяет вас <br>среди конкурентов. </p>
</div>
<div class="price-list-li-info">
<div class="price-list-li-info-h">
<h4 id="span">От 30 000 рублей </h4>
<h4>Дизайн</h4>
<h4>Под ключ</h4>
<h4>От 10 дней</h4>
</div>
</div>
</div>
<div class="portfolio-price-list">
<ul>
<li>
<div class="portfolio-pl-link">
<p>Октябрь 2023</p>
<img src="./Img and icon/Group2087.png">
<a href=""><img src="./Img and icon/arrow45.svg" class="portfolio-price-list-arrow" alt="">
</div>
</a>
</li>
<li>
<div class="portfolio-pl-link">
<p>Октябрь 2023</p>
<img src="./Img and icon/Group2087.png">
<a href=""><img src="./Img and icon/arrow45.svg" class="portfolio-price-list-arrow" alt="">
</div>
</a>
</li>
<li>
<div class="portfolio-pl-link">
<p>Октябрь 2023</p>
<img src="./Img and icon/Group2087.png">
<a href=""><img src="./Img and icon/arrow45.svg" class="portfolio-price-list-arrow" alt="">
</div>
</a>
</li>
</ul>
</div>
<div class="price-list-li-link">
<a href="#!" class="price-list-BTN">Получить консультацию <img src="./Img and icon/Arrow - Down 7.svg" alt=""></a>
</div>
</div>
</li>
<li class="price-list-li">
<div class="price-list-li-div section section_1 main__section main__current">
<div class="price-list-upper-part">
<div class="price-list-li-text">
<h3>Landing page</h3>
<p>Разработка и дизайн креативного лендинга, который <br>привлекает внимание ваших клиентов и выделяет вас <br>среди конкурентов. </p>
</div>
<div class="price-list-li-info">
<div class="price-list-li-info-h">
<h4 id="span">От 30 000 рублей </h4>
<h4>Дизайн</h4>
<h4>Под ключ</h4>
<h4>От 10 дней</h4>
</div>
</div>
</div>
<div class="portfolio-price-list">
<ul>
<li>
<div class="portfolio-pl-link">
<p>Октябрь 2023</p>
<img src="./Img and icon/Group2087.png">
<a href=""><img src="./Img and icon/arrow45.svg" class="portfolio-price-list-arrow" alt="">
</div>
</a>
</li>
<li>
<div class="portfolio-pl-link">
<p>Октябрь 2023</p>
<img src="./Img and icon/Group2087.png">
<a href=""><img src="./Img and icon/arrow45.svg" class="portfolio-price-list-arrow" alt="">
</div>
</a>
</li>
<li>
<div class="portfolio-pl-link">
<p>Октябрь 2023</p>
<img src="./Img and icon/Group2087.png">
<a href=""><img src="./Img and icon/arrow45.svg" class="portfolio-price-list-arrow" alt="">
</div>
</a>
</li>
</ul>
</div>
<div class="price-list-li-link">
<a href="#!" class="price-list-BTN">Получить консультацию <img src="./Img and icon/Arrow - Down 7.svg" alt=""></a>
</div>
</div>
</li>
<li class="price-list-li">
<div class="price-list-li-div section section_1 main__section main__current">
<div class="price-list-upper-part">
<div class="price-list-li-text">
<h3>Landing page</h3>
<p>Разработка и дизайн креативного лендинга, который <br>привлекает внимание ваших клиентов и выделяет вас <br>среди конкурентов. </p>
</div>
<div class="price-list-li-info">
<div class="price-list-li-info-h">
<h4 id="span">От 30 000 рублей </h4>
<h4>Дизайн</h4>
<h4>Под ключ</h4>
<h4>От 10 дней</h4>
</div>
</div>
</div>
<div class="portfolio-price-list">
<ul>
<li>
<div class="portfolio-pl-link">
<p>Октябрь 2023</p>
<img src="./Img and icon/Group2087.png">
<a href=""><img src="./Img and icon/arrow45.svg" class="portfolio-price-list-arrow" alt="">
</div>
</a>
</li>
<li>
<div class="portfolio-pl-link">
<p>Октябрь 2023</p>
<img src="./Img and icon/Group2087.png">
<a href=""><img src="./Img and icon/arrow45.svg" class="portfolio-price-list-arrow" alt="">
</div>
</a>
</li>
<li>
<div class="portfolio-pl-link">
<p>Октябрь 2023</p>
<img src="./Img and icon/Group2087.png">
<a href=""><img src="./Img and icon/arrow45.svg" class="portfolio-price-list-arrow" alt="">
</div>
</a>
</li>
</ul>
</div>
<div class="price-list-li-link">
<a href="#!" class="price-list-BTN">Получить консультацию <img src="./Img and icon/Arrow - Down 7.svg" alt=""></a>
</div>
</div>
</li>
</ul>
</div>