Created
June 10, 2025 10:57
-
-
Save stanruss/35ac46d0adcfb9fca85030a05056e529 to your computer and use it in GitHub Desktop.
Плавное переключение картинок при клике на другую картинку
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const initOptions = () => { | |
| const optionsContainer = document.querySelector('.options') | |
| const options = document.querySelectorAll('.option') | |
| optionsContainer.style.setProperty('--total-options', options.length) | |
| optionsContainer.addEventListener('click', (event) => { | |
| const clickedOption = event.target.closest('.option') | |
| if (!clickedOption || clickedOption.classList.contains('active')) return | |
| options.forEach((option) => { | |
| option.classList.remove('active') | |
| }) | |
| clickedOption.classList.add('active') | |
| }) | |
| } | |
| document.addEventListener('DOMContentLoaded', initOptions) | |
| @import "mixin" | |
| * | |
| margin: 0 | |
| padding: 0 | |
| box-sizing: border-box | |
| \:root | |
| --option-height:400px | |
| --option-width:60px | |
| --radius:1.875rem | |
| --gutter:10px | |
| --bg:#f5f5f5 | |
| @media (prefers-color-scheme: dark) | |
| \:root | |
| --bg:#1f2020 | |
| body | |
| background-color: var(--bg) | |
| min-width: 320px | |
| .wrapper | |
| display: flex | |
| height: 100vh | |
| justify-content: center | |
| align-items: center | |
| .options | |
| display: flex | |
| flex-direction: row | |
| min-width: 480px | |
| max-width: calc(var(--total-options) * 130px) | |
| height: var(--option-height) | |
| width: 100% | |
| .option | |
| background-color: color-mix(in srgb, var(--bg), CanvasText 10%) | |
| margin: var(--gutter) | |
| flex-grow: 1 | |
| border-radius: var(--radius) | |
| flex: 0 0 var(--option-width) | |
| transition: flex-grow 1.25s cubic-bezier(0.17, 0.84, 0.44, 1) | |
| background-position: center | |
| background-size: cover | |
| &:not(.active) | |
| cursor: pointer | |
| &.active | |
| flex-grow: var(--total-options) | |
| /* Уточнение: данный брейкпоинт для max-width является sm. | |
| max-width брейкпоинты имеют отступ (-0.02px), чтобы избежать перекрытия с min-width.*/ | |
| @media (max-width: 767.98px) | |
| .options | |
| flex-direction: column | |
| min-height: 100vh | |
| min-width: auto | |
| <div class="wrapper"> | |
| <div class="options"> | |
| <div class="option active" style="background-image: url(public/images/1.jpg);"></div> | |
| <div class="option" style="background-image: url(public/images/2.jpg);"></div> | |
| <div class="option" style="background-image: url(public/images/3.jpg);"></div> | |
| <div class="option" style="background-image: url(public/images/4.jpg);"></div> | |
| <div class="option" style="background-image: url(public/images/5.jpg);"></div> | |
| <div class="option" style="background-image: url(public/images/6.jpg);"></div> | |
| </div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment