???? ??? ????? ????? ???? ??? ??? ???? ?? ???? ???? ??? ??? ????? ? ?? ?????. ??? ?? ? ??? CSS ????? ??? ?????. ? ??? ??? ???? ???, ??? ?? ? ???? ???? ???? ???? ??? ? ????. ? ?? ?????? ????? ????? ??? ?? ???? ??? ?? ?? ?? ??? ?? ??? ?? ???? ????? ??? ?? CSS ?? ????? ???? ??? ??? ?????.

CSS ????? ??? ??? ??????

CSS ????? ??? ??? ???(?: ???, ???, ???)? ?? ???? ??? ? ?? ??? ???, ?? ???? ??? ?????? ?????. ? ??? ? ???? ?? ?? ????? ????? ????? ????. ?? ???, ?? ???, ? ??? ?? ???? ? ???? ??? ??? ?? ??? ??? ? ?? ??? ???? ?????.

CSS ????? ??? ??? ?? ??

??? ??? ??: ???? ?? ??? ??? ?? ???? ???? ?? ????? ?????.
???? ??: ???? ?? ???? ??? ?? ?? ??? ??? ? ??? ?? ?? ??? ?? ? ?? ?????? ?????.
??? ?? ???: CSS? ???? ??? ?????? ?? ??? ???? ???? ??? ??? ???? ??? ? ????.
?? CSS ????? ???? ??? ??
1??: ???? HTML ??
CSS ????? ??? ??? ??? ? ?? ??? ?? HTML ??? ???? ????. ??? ??? ????? ????.

<div>



<p>This structure features several carousel items, each containing an image and text, wrapped in div elements with appropriate class names. The main carousel item is marked with the carousel_<em>item--main class, while the adjacent items are labeled as carousel</em><em>item--left and carousel</em>_item--right.</p>

<h2>
  
  
  Step 2: Styling the Carousel with CSS
</h2>

<p>Now, it's time to style the carousel and apply the CSS animated carousel effect. This step involves defining the layout, positioning, and animation transitions.<br>
</p>

<pre class="brush:php;toolbar:false">.carousel {
  display: flex;
  position: relative;
  overflow: hidden;
}

.carousel__item {
  flex: 1;
  transition: transform 0.5s ease-in-out;
  position: absolute;
  opacity: 0;
}

.carousel__item--main {
  opacity: 1;
  transform: translateX(0);
}

.carousel__item--left {
  opacity: 0.5;
  transform: translateX(-100%);
}

.carousel__item--right {
  opacity: 0.5;
  transform: translateX(100%);
}

.carousel__btns {
  position: absolute;
  top: 50%;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.carousel__btn {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

? CSS? display: flex? ???? ??? ????? ??? ??? ??? ??? ????? ???? ?? ? ?? ? ?? ??? ?????.

3??: ??? ??? ?? JavaScript ??

???? ???? ??? ? ??? ?? ?? ????? ?????? ??? ??? ? ????. ??? ??? JavaScript ?????.

const carouselItems = document.querySelectorAll('.carousel__item');
let currentItem = document.querySelector('.carousel__item--main');
const leftBtn = document.querySelector('#leftBtn');
const rightBtn = document.querySelector('#rightBtn');

rightBtn.addEventListener('click', function() {
    currentItem = document.querySelector('.carousel__item--right');
    const leftItem = document.querySelector('.carousel__item--main');
    carouselItems.forEach((item) => {
        item.classList = 'carousel__item';
    });
    currentItem.classList.add('carousel__item--main');
    leftItem.classList.add('carousel__item--left');
    const currentId = Array.from(carouselItems).indexOf(currentItem);
    const rightItem = currentId === carouselItems.length - 1 ? carouselItems[0] : carouselItems[currentId + 1];
    rightItem.classList.add('carousel__item--right');
});

leftBtn.addEventListener('click', function() {
    currentItem = document.querySelector('.carousel__item--left');
    const rightItem = document.querySelector('.carousel__item--main');
    carouselItems.forEach((item) => {
        item.classList = 'carousel__item';
    });
    currentItem.classList.add('carousel__item--main');
    rightItem.classList.add('carousel__item--right');
    const currentId = Array.from(carouselItems).indexOf(currentItem);
    const leftItem = currentId === 0 ? carouselItems[carouselItems.length - 1] : carouselItems[currentId - 1];
    leftItem.classList.add('carousel__item--left');
});

4??: ?? ?? ???

??? ?? ???? ???? ?? ???? CSS ????? ??? ??? ??? ??? ? ??? ???? ?? ????. ???? ??? ????? ? ? ??? ?? ??? ??? ?? ?? ?? ??? ??? ? ????. ?? ???? ???? ? ??? ??? ???? ?? ??? ??? ? ????.

.carousel__item ??? ???? ?????? ?? ?? ???? ??? ?? ???? ???? ?? ?? ??? ??? ?? ? ????.

5??: ?? ??? ?? ????

CSS ????? ??? ??? ?? ?? ?? ?? ?? ? ??? ???? ???? ?? ??? ? ?? ?? ??? ???? ????. ?? ??, ???? ??? ?? ?? ???? ??? ? ??? ??? ????? ??? ??? ? ????.

<div>



<p>This structure features several carousel items, each containing an image and text, wrapped in div elements with appropriate class names. The main carousel item is marked with the carousel_<em>item--main class, while the adjacent items are labeled as carousel</em><em>item--left and carousel</em>_item--right.</p>

<h2>
  
  
  Step 2: Styling the Carousel with CSS
</h2>

<p>Now, it's time to style the carousel and apply the CSS animated carousel effect. This step involves defining the layout, positioning, and animation transitions.<br>
</p>

<pre class="brush:php;toolbar:false">.carousel {
  display: flex;
  position: relative;
  overflow: hidden;
}

.carousel__item {
  flex: 1;
  transition: transform 0.5s ease-in-out;
  position: absolute;
  opacity: 0;
}

.carousel__item--main {
  opacity: 1;
  transform: translateX(0);
}

.carousel__item--left {
  opacity: 0.5;
  transform: translateX(-100%);
}

.carousel__item--right {
  opacity: 0.5;
  transform: translateX(100%);
}

.carousel__btns {
  position: absolute;
  top: 50%;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.carousel__btn {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

?? ??? ?? ? ????? ???? ??? ?? ?? ???? ??? ? ?? ??? ??? ?? ??? ???? ?? ????? ???? ??? ??? ?????.

CSS ????? ??? ?? ??

1. ?? ??? ??? ???? ???? ??? ?? ??????.

??? ?? ??? ????.
???? ???? ????? ??, ?? ?? ?? ?? ?? ?????? CSS ?? ? ????? ?????.
will-change ??: ?? ???? ?????? ?? ??.

1. ??? ??? CSS ????? ??? ??? ??? ????? ?????. ??? ?? ???? ???? ??? ????? ????? ??? ??? ?????.

const carouselItems = document.querySelectorAll('.carousel__item');
let currentItem = document.querySelector('.carousel__item--main');
const leftBtn = document.querySelector('#leftBtn');
const rightBtn = document.querySelector('#rightBtn');

rightBtn.addEventListener('click', function() {
    currentItem = document.querySelector('.carousel__item--right');
    const leftItem = document.querySelector('.carousel__item--main');
    carouselItems.forEach((item) => {
        item.classList = 'carousel__item';
    });
    currentItem.classList.add('carousel__item--main');
    leftItem.classList.add('carousel__item--left');
    const currentId = Array.from(carouselItems).indexOf(currentItem);
    const rightItem = currentId === carouselItems.length - 1 ? carouselItems[0] : carouselItems[currentId + 1];
    rightItem.classList.add('carousel__item--right');
});

leftBtn.addEventListener('click', function() {
    currentItem = document.querySelector('.carousel__item--left');
    const rightItem = document.querySelector('.carousel__item--main');
    carouselItems.forEach((item) => {
        item.classList = 'carousel__item';
    });
    currentItem.classList.add('carousel__item--main');
    rightItem.classList.add('carousel__item--right');
    const currentId = Array.from(carouselItems).indexOf(currentItem);
    const leftItem = currentId === 0 ? carouselItems[carouselItems.length - 1] : carouselItems[currentId - 1];
    leftItem.classList.add('carousel__item--left');
});

1. ??? ?? ?? ???? ?? ?? ???? ???? ??? ??? ??? ????? ??? ?? ???? ???? ???? ? ??? ???. aria-label? ???? Tab, Enter ? ??? ?? ???? ???? ??? ? ??? ?????.

??

CSS ????? ??? ??? ??? ????? ??? ??? ???? ?? ??????? ????? ????? ?? ? ????. ? ??? ???? ??? ?????? ???? ??? ?? ???? ??? ? ????. ?? ?? ???? ?????, ?? ??? ?? ????? ????? ???? ??????? ?? ?????. ???? ??, ??? ? ?? ??? ?? ???? ????? ???? ?? ??? ? ????.

? ??? CSS ????? ??? ?? ???: ??? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!