https://cosibella.cz/blog/wp-content/themes/blog-wordpress/js/libs/slick-slider.js

1const slickSlider = () => {
2    $('.post__slider--wrapper').slick({
3        slidesToShow: 4,
4        slidesToScroll: 1,
5        responsive: [
6            {
7                breakpoint: 768,
8                settings: 'unslick',
9            },
10        ],
11    })
12    $('#main__banner').slick({
13        dots: true,
14        infinite: true,
15        slidesToShow: 1,
16        slidesToScroll: 1,
17        adaptiveHeight: true,
18    })
19}
20
21export default slickSlider
22
23$(document).ready(function () {
24   // initSliders()
25})
26
27const switchPhoto = (index, btnSwitch, textLeft, textRight, imgAfter, imgBefore) => {
28    btnSwitch[index].classList.toggle('btn-active')
29    textLeft[index].classList.toggle('txt-active')
30    textRight[index].classList.toggle('txt-active')
31    imgAfter[index].classList.toggle('active')
32    imgBefore[index].classList.toggle('active')
33}
34
35const serveMetamorphosisSlider = () => {
36    const btnSwitch = document.querySelectorAll('.slider-blog__btn-switch')
37    const textLeft = document.querySelectorAll('.slider-blog__btn-switch span:nth-of-type(1)')
38    const textRight = document.querySelectorAll('.slider-blog__btn-switch span:nth-of-type(2)')
39    const imgAfter = document.querySelectorAll('.left')
40    const imgBefore = document.querySelectorAll('.right')
41
42    for (let i = 0; i < btnSwitch.length; i++) {
43        btnSwitch[i].addEventListener('click', () => {
44            switchPhoto(i, btnSwitch, textLeft, textRight, imgAfter, imgBefore)
45        })
46        imgAfter[i].addEventListener('click', () => {
47            switchPhoto(i, btnSwitch, textLeft, textRight, imgAfter, imgBefore)
48        })
49        imgBefore[i].addEventListener('click', () => {
50            switchPhoto(i, btnSwitch, textLeft, textRight, imgAfter, imgBefore)
51        })
52    }
53}
54serveMetamorphosisSlider()