Есть картинка макбука, которая располагается на границе синего и белого блоков. Внутри картинки макбука располагается слайдер. При ресайзе слайдер выскакивает из макбука. Как сделать, чтоб при любой ширине окна браузера слайдер всегда находился внутри экрана макбука? Посмотреть код можно тут.
[1]: https://codepen.io/carboncheg/pen/PowMZKL
Полную реализацию в сети можно глянуть тут.
Вот так делается это но всё же скажу что выкладывать надо сюда а не в codepen и выкладывать только то что относится к вопросу ...
function slider() {
let slideIndex = 1,
slides = document.querySelectorAll('.slider_item'),
prev = document.querySelector('.prev'),
next = document.querySelector('.next'),
dotsWrapper = document.querySelector('.dots_wrapper'),
dots = document.querySelectorAll('.dot'),
slider = document.querySelector('.slider');
showSlides(slideIndex);
function showSlides(n) {
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
slides.forEach((item) => item.style.display = 'none');
dots.forEach((item) => item.classList.remove('dot_active'));
slides[slideIndex - 1].style.display = 'block';
dots[slideIndex - 1].classList.add('dot_active');
}
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
next.addEventListener('click', () => {
plusSlides(1);
});
prev.addEventListener('click', () => {
plusSlides(-1);
});
dotsWrapper.addEventListener('click', (event) => {
for (let i = 1; i <= dots.length; i++) {
if (event.target.classList.contains('dot') &&
event.target == dots[i - 1]) {
currentSlide(i);
clearInterval(timerId);
autoshow();
}
}
});
let timerId;
function autoshow() {
timerId = setInterval(() => plusSlides(1), 2000);
}
autoshow();
slider.addEventListener('mouseover', (event) => {
clearInterval(timerId);
});
slider.addEventListener('mouseout', (event) => {
autoshow();
});
}
slider();
.slider-section {}
.slider-wrapper {
width: 645px;
height: 292px;
margin: auto;
background: url(https://business-landing.website.yandexcloud.net/img/macbook.png);
background-size: 100% 100%;
position: relative;
}
.slider {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.slider img {
width: 445px;
height: 248px;
}
.dots_wrapper {
display: flex;
justify-content: center;
margin: 10px 0;
}
.dot {
margin: 0 10px;
width: 12px;
height: 12px;
border-radius: 50%;
cursor: pointer;
border: 2px solid #dedfe0;
}
.dot_active {
border: 2px solid #1ca8dd;
}
<div class="slider-section">
<div class="slider-wrapper">
<div class="slider">
<div class="slider_item">
<img src="https://i.ibb.co/6HVCyCq/meetup-0.jpg">
</div>
<div class="slider_item">
<img src="https://i.ibb.co/1K6DBkq/meetup-1.jpg">
</div>
<div class="slider_item">
<img src="https://i.ibb.co/z8WK0sk/meetup-2.jpg">
</div>
</div>
<div class="prev">
<div class="arrow_left"></div>
</div>
<div class="next">
<div class="arrow_right"></div>
</div>
</div>
<!--wrapper-->
<div class="dots_wrapper">
<div class="dot dot_active"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
Далее медиа запросы ...
Я сделал обёртку и ей дал как фон ваш mackbook и внутри находятся картинки то есть slider и всё
Нажмите Показать код -> Выполнить
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Появилась потребность растянуть блок на всю ширину экранаСтруктура блока:
Решился сделать анимацию с плавной сменой фона у блокаПробовал сначала в CSS через keyframe но не получил нужный результат а именно после каждых...
K примеру у меня есть байтовый массив готовых опкодовКак мне сгенерировать ELF файл вместе с этими опкодами? Есть ли какая-то готовая библиотека...