<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));
})this.groups[this.matrix[y][x]].push(x, y); вынес в цикл, который в calc.Я не могу понять. Почему если я в my_data закину объект, то все работает как надо.
Меня устроит любой даже блокирующий вариант.
this.ctx.fillStyle = this.memory[y][x] === 0 ? '#0d2a37': '#CCC';
memory[y][x] === 0 ? бла-бла-бла (и почему memory, а не matrix? - отрисовывать надо новое состояние, а не прошлое)? Неужели количество доступных состояний у вас ограничено всего лишь двумя? А как же картинка из вопроса, где есть клетки в шести различных состояниях? Лучше сделайте объект, где ключ - состояние, а значение - цвет:var colors = {
0: какой-то цвет,
1: ещё какой-то цвет,
2: и ещё,
3: да сколько угодно,
...
};this.ctx.fillStyle = colors[this.matrix[y][x]];var groups = [...Array(numCellStates)].map(() => []);groups[this.matrix[y][x]].push(x, y);for (var state = 0; state < groups.length; state++) {
this.ctx.fillStyle = colors[state];
var cells = groups[state];
for (var i = 0; i < cells.length; i += 2) {
this.ctx.fillRect(cells[i] * this.coefX, cells[i + 1] * this.coefY, this.coefX, this.coefY);
}
}Рисовать только "живые" клетки на "мертвом" фоне.
Рисовать только изменившиеся клетки.
Есть еще идеи?