I need to do a carousel slider of rewiews from this maket: https://www.figma.com/proto/WKFG4SvIHfjELwFsrtCjZD/%D0%B0%D0%B2%D1%82%D0%BE%D1%88%D0%BA%D0%BE%D0%BB%D0%B0?node-id=0-1&viewport=-354%2C-167%2C0.13&t=1PR5Ev17pLz3WT3O-0&scaling=scale-down&content-scaling=fixed&starting-point-node-id=19.
i have some code written by chat gpt, but it works incorrectly. I’m a newbie js, so it would be good if you explained what the problem is and solved it.
I need to do this slider in pure js.
Thanks in advance)
This is html:
<section class="reviews">
<img class="element" src="img/element.svg" alt="element">
<h2>Отзывы</h2>
<div class="rewiews_wrapper">
<div class="rewiew_carousel">
<div class="rewiew_item active" id="slide1">
<img src="img/rewiew_korchevnikova.jpg" alt="Александра Корчевникова">
<div class="rewiew_text">
<h4>Александра Корчевникова</h4>
<p>Отличная автошкола, своим выбором однозначно довольна! Администраторы очень приятные и вежливые девушки,
всегда готовы помочь, любой вопрос решается быстро и незамедлительно!</p>
<div class="marks_wrapper">
<img src="img/quotation_mark.svg" alt="quotation mark">
</div>
</div>
</div>
<div class="rewiew_item" id="slide2">
<img src="img/rewiew_karpov.jpg" alt="Михаил Карпов">
<div class="rewiew_text">
<h4>Михаил Карпов</h4>
<p>Мне очень повезло, что из всех автошкол я выбрал Дебют. Это самая лучшая автошкола - классный преподавательский состав,
доступные материалы, а самое главное -теплая атмосфера.</p>
<div class="marks_wrapper">
<img src="img/quotation_mark.svg" alt="quotation mark">
</div>
</div>
</div>
<div class="rewiew_item" id="slide3">
<img src="img/rewiew_romanov.jpg" alt="Данил Романов">
<div class="rewiew_text">
<h4>Данил Романов</h4>
<p>Обучением доволен. Занятия по теории были интересными и продуктивными — в ГИБДД теорию сдал с первого раза.
С вождением также было всё хорошо — внимательный и спокойный инструктор, доходчиво объясняет.</p>
<div class="marks_wrapper">
<img src="img/quotation_mark.svg" alt="quotation mark">
</div>
</div>
</div>
<div class="rewiew_item" id="slide4">
<img src="img/rewiew_rogov.jpg" alt="Дмитрий Рогов">
<div class="rewiew_text">
<h4>Дмитрий Рогов</h4>
<p>Мне очень понравилось обучение в автошколе, теория классно преподносится,
и особенно понравились занятия по вождению</p>
<div class="marks_wrapper">
<img src="img/quotation_mark.svg" alt="quotation mark">
</div>
</div>
</div>
<div class="rewiew_item" id="slide5">
<img src="img/rewiew_varenzova.jpg" alt="Дарья Варенцова">
<div class="rewiew_text">
<h4>Дарья Варенцова</h4>
<p>Лучшая школа! Комфортное обучение, отличный инструктор! Однозначно буду рекомендовать друзьям</p>
<div class="marks_wrapper">
<img src="img/quotation_mark.svg" alt="quotation mark">
</div>
</div>
</div>
</div>
<div class="rewiew_circles">
<div class="rewiew_circle active"></div>
<div class="rewiew_circle"></div>
<div class="rewiew_circle"></div>
<div class="rewiew_circle"></div>
<div class="rewiew_circle"></div>
</div>
</div>
</div>
<img class="element" src="img/element.svg" alt="element">
</section>
This is css:
.rewiew {
width: 100%;
height: 100%;
}
.rewiews_wrapper {
display: flex;
justify-content: center;
position: relative;
width: 100%;
height: 100%;
}
.rewiew_carousel {
display: flex;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.rewiew_item {
display: flex;
max-width: 830px;
min-height: 250px;
border-radius: 40px;
border: 1px solid rgba(0, 0, 0, 0.658);
box-shadow: 2px 2px 6px #504f4f93;
padding: 60px 65px 35px 150px;
position: relative;
flex-shrink: 0;
z-index: 1;
opacity: 0.5;
transition: all 0.3s ease;
}
.rewiew_item.active {
opacity: 1;
z-index: 2;
transform: translate(0, 0);
}
.rewiew_item.previous {
transform: translate(-120px, -120px);
}
.rewiew_item.next {
transform: translate(120px, -120px);
}
.rewiew_item h4 {
font-size: 36px;
margin-bottom: 20px;
}
.rewiew_item p {
font-size: 18px;
line-height: 197%;
margin-bottom: 20px;
}
.rewiew_item img {
max-width: 180px;
max-height: 180px ;
padding-left: -90px;
position: absolute;
border-radius: 50%;
top: 20px;
left: -70px;
transition: transform 0.3s ease;
}
.marks_wrapper {
position: absolute;
top: -100px;
right: 130px;
}
.rewiew_circles {
display: flex;
justify-content: center;
position: absolute;
bottom: -80px; /* Position below the carousel */
left: 50%;
transform: translateX(-50%);
}
.rewiew_circle {
width: 30px;
height: 30px;
margin-right: 20px;
border-radius: 50%;
background-color: #8a8a8a;
cursor: pointer;
transition: background-color 0.3s ease;
}
.rewiew_circle.active {
background-color: #E41D20; /* Active circle color */
}
And this is js:
const rewiewCarousel = document.querySelector('.rewiew_carousel');
const rewiewItems = document.querySelectorAll('.rewiew_item');
const rewiewCircles = document.querySelectorAll('.rewiew_circle');
let currentSlide = 0;
// Function to show the active slide and its neighbors
function showSlide(n) {
// Handle wrapping around if going beyond the last or first slide
if (n < 0) {
n = rewiewItems.length - 1;
} else if (n >= rewiewItems.length) {
n = 0;
}
// Reset classes to ensure a clean transition
rewiewItems.forEach(item => {
item.classList.remove('active', 'previous', 'next');
});
// Determine previous and next slides
const previous = n - 1 >= 0 ? n - 1 : rewiewItems.length - 1;
const next = n + 1 < rewiewItems.length ? n + 1 : 0;
// Apply classes for positioning
rewiewItems[n].classList.add('active');
rewiewItems[previous].classList.add('previous');
rewiewItems[next].classList.add('next');
// Update active circle
rewiewCircles.forEach((circle, index) => {
circle.classList.remove('active');
});
rewiewCircles[n].classList.add('active');
currentSlide = n;
}
// Event listeners for clicking on circles
rewiewCircles.forEach((circle, index) => {
circle.addEventListener('click', () => {
showSlide(index);
});
});
// Initial slide
showSlide(currentSlide);
New contributor
Илзия Исхакова is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.