spolischook/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test events</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div data-slider class="slider">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div data-picker class="picker">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
    <a data-prevSlide href="#">Prev slide</a>
    <a data-nextSlide href="#">Next slide</a>
    <script src="script.js"></script>
</body>
</html>

## script.js
document.addEventListener('DOMContentLoaded', () => {
    let activeNumber = 3,
        slides = document.querySelector("[data-slider]").children,
        length = slides.length,
        pickers = document.querySelector("[data-picker]").children,
        nextButton = document.querySelector("[data-nextSlide]"),
        prevButton = document.querySelector("[data-prevSlide]");

    addItemNumbers(slides);
    addItemNumbers(pickers);
    activate(slides, activeNumber);
    activate(pickers, activeNumber);

    document.addEventListener('slide', function (e) {
        activeNumber = e.detail.item;
        console.log(`Activate ${activeNumber} slide`);
        activate(slides, activeNumber);
        activate(pickers, activeNumber);
    }, false);

    function addItemNumbers(items) {
        for (let i = 0; i < items.length; i++) {
            items[i].dataset.itemNumber = i;
        }
    }

    function activate(items, k) {
        for (let i = 0; i < items.length; i++) {
            item = items[i];
            if (i === k) {
                item.classList.add('item-active');
            } else {
                item.classList.remove('item-active');
            }
        }
    }

    nextButton.addEventListener('click', function (e) {
        e.preventDefault();
        let i = (activeNumber + 1) % length,
            event = new CustomEvent('slide', { detail: {item: i} });
        document.dispatchEvent(event);
    });

    prevButton.addEventListener('click', function (e) {
        e.preventDefault();
        let i = activeNumber === 0 ? length - 1 : activeNumber - 1,
            event = new CustomEvent('slide', { detail: {item: i} });
        document.dispatchEvent(event);
    });

    for (let item of pickers) {
        item.addEventListener('click', function (e) {
            let event = new CustomEvent('slide', { detail: {item: +this.dataset.itemNumber} });
            document.dispatchEvent(event);
        });
    }
});

## style.css
.item {
    height: 30px;
    width: 30px;
    margin: 5px;
    text-align:center;
    line-height:30px;
    background-color: aqua;
}

.slider, .picker {
    display: flex;
}

.item-active {
    background-color: forestgreen;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Test events</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div data-slider class="slider">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	</div>
	<div data-picker class="picker">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	</div>
	<a data-prevSlide href="#">Prev slide</a>
	<a data-nextSlide href="#">Next slide</a>
	<script src="script.js"></script>
	</body>
	</html>
	document.addEventListener('DOMContentLoaded', () => {
	let activeNumber = 3,
	slides = document.querySelector("[data-slider]").children,
	length = slides.length,
	pickers = document.querySelector("[data-picker]").children,
	nextButton = document.querySelector("[data-nextSlide]"),
	prevButton = document.querySelector("[data-prevSlide]");

	addItemNumbers(slides);
	addItemNumbers(pickers);
	activate(slides, activeNumber);
	activate(pickers, activeNumber);

	document.addEventListener('slide', function (e) {
	activeNumber = e.detail.item;
	console.log(`Activate ${activeNumber} slide`);
	activate(slides, activeNumber);
	activate(pickers, activeNumber);
	}, false);

	function addItemNumbers(items) {
	for (let i = 0; i < items.length; i++) {
	items[i].dataset.itemNumber = i;
	}
	}

	function activate(items, k) {
	for (let i = 0; i < items.length; i++) {
	item = items[i];
	if (i === k) {
	item.classList.add('item-active');
	} else {
	item.classList.remove('item-active');
	}
	}
	}

	nextButton.addEventListener('click', function (e) {
	e.preventDefault();
	let i = (activeNumber + 1) % length,
	event = new CustomEvent('slide', { detail: {item: i} });
	document.dispatchEvent(event);
	});

	prevButton.addEventListener('click', function (e) {
	e.preventDefault();
	let i = activeNumber === 0 ? length - 1 : activeNumber - 1,
	event = new CustomEvent('slide', { detail: {item: i} });
	document.dispatchEvent(event);
	});

	for (let item of pickers) {
	item.addEventListener('click', function (e) {
	let event = new CustomEvent('slide', { detail: {item: +this.dataset.itemNumber} });
	document.dispatchEvent(event);
	});
	}
	});
	.item {
	height: 30px;
	width: 30px;
	margin: 5px;
	text-align:center;
	line-height:30px;
	background-color: aqua;
	}

	.slider, .picker {
	display: flex;
	}

	.item-active {
	background-color: forestgreen;
	}