мне нужно что б при нажатии на выбраный язык отоборажалось его название
locales[locale]
на locale
. <div class="slider-container">
<div class="slider-item">
<div class="slider-number">1/3</div>
<img src="https://сезоны-года.рф/sites/default/files/images/shkolnikam/gora_2.jpg">
<div class="slider-text">Горы</div>
</div>
<div class="slider-item">
<div class="slider-number">2/3</div>
<img src="https://lovingnewyork.com.br/wp-content/uploads/2015/10/brooklyn-bridge-park.jpg">
<div class="slider-text">Мост</div>
</div>
<div class="slider-item">
<div class="slider-number">3/3</div>
<img src="http://fotorelax.ru/wp-content/uploads/2017/11/Sunset-in-Greenland-01.jpg">
<div class="slider-text">Закат</div>
</div>
<a class="prev" data-change="-1">❮</a>
<a class="next" data-change="+1">❯</a>
<div class="dots">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
body {
background-color: #232323;
color: #fff;
margin-top: 50px;
}
.slider-container {
max-width: 1200px;
margin: auto;
position: relative;
}
.slider-item {
display: none;
}
.slider-item.slider-active {
display: block;
}
.slider-item img {
width: 100%;
}
.prev,
.next {
position: absolute;
cursor: pointer;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: #fff;
font-weight: bold;
font-size: 18px;
transition: .6s;
border-radius: 0 3px 3px 0;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0,0,0,0.8);
}
.slider-text {
position: absolute;
padding: 8px 12px;
font-size: 16px;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
}
.slider-number {
position: absolute;
top: 30px;
left: 30px;
}
.dots {
text-align: center;
}
.dot {
cursor: pointer;
width: 13px;
height: 13px;
margin: 15px 2px;
border-radius: 50%;
display: inline-block;
background-color: rgba(0, 0, 0, 0.8);
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
const slider = document.querySelector('.slider-container');
const sliderItems = document.querySelectorAll('.slider-item');
const dots = [...document.querySelectorAll('.dot')];
let slideIndex = null;
slider.addEventListener('click', function({ target: t }) {
if (t.matches('[data-change]')) {
setActiveSlide(slideIndex + +t.dataset.change);
} else if (t.matches('.dot')) {
setActiveSlide(dots.indexOf(t));
}
});
setActiveSlide(0);
function setActiveSlide(index) {
slider.querySelectorAll('.slider-active').forEach(n => n.classList.remove('slider-active'));
slider.querySelectorAll('.active').forEach(n => n.classList.remove('active'));
slideIndex = (index >= 0 ? 0 : sliderItems.length) + (index % sliderItems.length);
sliderItems[slideIndex].classList.add('slider-active');
dots[slideIndex].classList.add('active');
}
Вот как у меня все устроено https://codepen.io/Cheizer/pen/wxMqLz
i.addListener("click", function() {
p.open(map, i)
i.setIcon(i !== this ? iconDefault : iconActive);
})
o.marker = i;
i.addListener("click", function() {
p.open(map, i)
locations.forEach(l => l.marker.setIcon(l.marker === this ? iconActive : iconDefault));
})