SLIDER

document.addEventListener('DOMContentLoaded', function() {
    /**
     *  Làm sự kiện nút cách 1
     *  var nut = document.querySelectorAll('.chuyensilde ul li');
     *  for (let index = 0; index < nut.length; index++) {
     *  nut[index].onclick = function () {
     *  if (this.classList[0] == 'kichhoat') {
     *  this.classList.remove('kichhoat');
     *  } else {
     *  for (let i = 0; i < nut.length; i++) {
     *  nut[i].classList.remove('kichhoat');
     *  }
     *  this.classList.add('kichhoat');
     *  }
     *  }
     *  }
     * */
    // Làm sự kiện nút cách 2
    var nut = document.querySelectorAll('.chuyensilde ul li');
    var slides = document.querySelectorAll('.cacslide ul li');
    var tg = setInterval(function() {
        autosilde();
    }, 4000);
    for (let index = 0; index < nut.length; index++) {
        nut[index].addEventListener('click', function() {
            for (let index = 0; index < nut.length; index++) {
                nut[index].classList.remove('kichhoat');
            }
            this.classList.add('kichhoat');
            //Hết phần xử lý nút
            // previousElementSibling: trả về phần tử trước nó mà được chỉ định
            //nextElementSibling: trả về phần tử sau nó mà được chỉ định
            var nutkichhoat = nut[index];
            var vtrinut = 0;
            for (vtrinut = 0; nutkichhoat = nutkichhoat.previousElementSibling; vtrinut++) {
                /**
                 * Để nutkichhoat là nut đang được kích. khởi tạo i=0 cho nutkichhoat=nutkichhoat.previousElementSibling
                 * (tức bằng nút trước nó) rồi i++. Khi ta nhấn nút số 3 nó sẽ trả về nút 2. Nhấn nút 2 trả về nút 1.
                 * Nhấn nút 1 trả về 0 nhưng vì k có nút 0 nên nó trả về null, đó là điều kiện dừng
                 */
            }
            for (let i = 0; i < slides.length; i++) {
                slides[i].classList.remove('active');
                /*Cách 2 nếu k dùng từ dòng 30 đến 38 thì ta viết luôn dòng dưới đây
                là slides[index].classList.add('active'); tức cái nút đang được click ở trên trong vòng for index
                sẽ được thêm class active ở dưới đây luôn. Nhưng kb tại sao thầy lại k dùng
                */
                slides[vtrinut].classList.add('active');
            }
        })
    }
    //setInterval(function(),milisecond): hàm dùng để tự gọi hàm function sau 1 khoảng tg
    /***********************VIẾT HÀM TỰ CHUYỂN SLIDE****************************/
    function autosilde() {
        //B1: Tính xem đang ở slide nào
        var vtrislide = 0;
        var slidehientai = document.querySelector('.cacslide ul li.active');
        var other_textND=document.querySelectorAll('.textnoidung');
        [].forEach.call(other_textND, function(el) {
            el.className = el.className.replace(/\bbiemattext\b/, "");
        });
        var textND=document.querySelector('.cacslide ul li.active .motslide .textnoidung');
        textND.classList.add('biemattext');
        setTimeout(function(){
            for (vtrislide = 0; slidehientai = slidehientai.previousElementSibling; vtrislide++) {}
            //Nếu vị trí slide < độ dài của slide thì hoạt động bth
            if (vtrislide < slides.length - 1) {
                //B2: Cho các slide còn lại ẩn hết đi
                for (let i = 0; i < slides.length; i++) {
                     slides[i].classList.remove('active');
                    nut[i].classList.remove('kichhoat');
                }
                //B3: Cho phần tử tiếp theo của slide hiển thị ra
                slides[vtrislide].nextElementSibling.classList.add('active');
                nut[vtrislide].nextElementSibling.classList.add('kichhoat');
            } else {
                //Nếu lớn hơn thì gán lại cho vtrislide là 0
                vtrislide = 0
                //Xóa tất cả các slide
                for (let i = 0; i < slides.length; i++) {
                    slides[i].classList.remove('active');
                    nut[i].classList.remove('kichhoat');
                }
                //Chỉ để lại cho slide có vtrislide=0 active
                slides[vtrislide].classList.add('active');
                nut[vtrislide].classList.add('kichhoat');
            }
        }, 1000);
    }
}, false)