Установка бесконечного таймера для переключения активного элемента

114
22 января 2021, 19:20

Есть блок, в котором находится список. Есть функция: при клике на элемент списка li меняется фон блока на соответствующий.

Так вот, чтобы автоматизировать его, то есть, чтобы он автоматически сам выбирал и работал переход с одного элемента li на другой (соответственно и фон тоже менялся) нужно установить таймер. То есть бесконечный таймер с разницей в 3 сек.

Ниже приведен код работы этого блока.

$(function() { 
  $('.js-list-item > li').on('click', function() { 
    $('.how_works').css('background-image', 'url(' + $(this).data('img') + ')'); 
    $('.how_work_txt').text($(this).data('content')); 
  }); 
});
<section class="pt-8 how_works" style="background-image: url('{{ asset('build/img/our_system.jpg') }}'); position:relative;"> 
  <div class="container mx-auto"> 
    <h2>Как работает наша система</h2> 
    <div class="how_work_txt">Заполните онлайн-заявку в пару кликов на сайте прямо сейчас. А мы подберем для Вас оптимальное решение для защиты, учитывая особенности Вашего объекта и установим охранную систему в удобное для Вас время.</div> 
    <ul class="tabs list-reset flex text-center -mx-4 js-list-item"> 
      <li data-img="{{ asset('build/img/our_system.jpg') }}" class="advantages-col p-4 mx-4 w-1/6 active" data-content="Заполните онлайн-заявку в пару кликов на сайте прямо сейчас. А мы подберем для Вас оптимальное решение для защиты, учитывая особенности Вашего объекта и установим охранную систему в удобное для Вас время."> 
        <a> 
          <div> 
            <div> 
              <svg class="svg-class" xmlns="http://www.w3.org/2000/svg" width="40" height="40"> 
                                <g> 
                                    <path fill="#fff" stroke="none" transform="translate(21.2373 20.6184)" d="M16.1022 0.623036L18.138 2.65875C18.9701 3.49018 18.9701 4.84304 18.1387 5.67446L7.14581 16.668L1.59009 18.183L1.21867 18.5545C1.07938 18.6938 0.896522 18.7638 0.713665 18.7638C0.532951 18.7638 0.352951 18.6938 0.214379 18.558L0.200808 18.5616L0.204379 18.5473C-0.0691922 18.268 -0.0684779 17.8209 0.208665 17.5437L0.579379 17.173L2.09438 11.6166L13.0872 0.623036C13.9187 -0.206964 15.2708 -0.208393 16.1022 0.623036ZM15.1001 6.69232L17.128 4.66446C17.403 4.39018 17.403 3.94304 17.1287 3.66946L15.0929 1.63375C14.8187 1.36018 14.3722 1.35946 14.0972 1.63446L12.0694 3.66232L15.1001 6.69232ZM11.0601 4.67232L3.74366 11.988L6.77438 15.0188L14.0908 7.70232L11.0601 4.67232ZM3.09866 13.363L5.39866 15.663L2.23581 16.5259L3.09866 13.363Z" fill-rule="evenodd" class="fill" /> 
                                </g> 
                                <g> 
                                    <path fill="#fff" stroke="none" transform="translate(18.5713 9.18933)" d="M0.714286 0C0.32 0 0 0.319286 0 0.714286C0 1.10929 0.32 1.42857 0.714286 1.42857L13.5714 1.42857C13.9657 1.42857 14.2857 1.10929 14.2857 0.714286C14.2857 0.319286 13.9657 0 13.5714 0L0.714286 0Z" class="fill" /> 
                                </g> 
                                <g> 
                                    <path fill="#fff" stroke="none" transform="translate(18.5713 19.1893)" d="M14.2857 0.714286C14.2857 0.319286 13.9657 0 13.5714 0L0.714286 0C0.32 0 0 0.319286 0 0.714286C0 1.10929 0.32 1.42857 0.714286 1.42857L13.5714 1.42857C13.9657 1.42857 14.2857 1.10857 14.2857 0.714286Z" class="fill" /> 
                                </g> 
                                <g> 
                                    <path fill="#fff" stroke="none" transform="translate(5.35645 5.61731)" d="M9.34313 0.172682C9.04456 -0.0844608 8.59313 -0.0508894 8.33599 0.249825L3.87313 5.45554L1.14313 3.4084C0.827414 3.17268 0.380271 3.23554 0.143128 3.55125C-0.0940145 3.86625 -0.0297288 4.31411 0.285985 4.55054L3.55099 6.99982C3.67956 7.09625 3.82956 7.14268 3.97956 7.14268C4.1817 7.14268 4.3817 7.05768 4.52241 6.89268L9.42027 1.1784C9.6767 0.879825 9.64241 0.429111 9.34313 0.172682Z" class="fill" /> 
                                </g> 
                                <g> 
                                    <path fill="#fff" stroke="none" transform="translate(5.35645 15.6173)" d="M9.34313 0.172682C9.04456 -0.0844608 8.59313 -0.0508894 8.33599 0.249825L3.87313 5.45554L1.14313 3.4084C0.827414 3.17197 0.380271 3.23625 0.143128 3.55125C-0.0940145 3.86625 -0.0297288 4.31411 0.285985 4.55054L3.55099 6.99982C3.67956 7.09625 3.82956 7.14268 3.97956 7.14268C4.1817 7.14268 4.3817 7.05768 4.52241 6.89268L9.42027 1.1784C9.6767 0.879825 9.64241 0.429111 9.34313 0.172682Z" class="fill" /> 
                                </g> 
                                <g> 
                                    <path fill="#fff" stroke="none" transform="translate(5.35645 26.3317)" d="M8.33527 0.249705L3.87241 5.4547L1.14313 3.40756C0.827414 3.17113 0.380271 3.23542 0.143128 3.55042C-0.0940145 3.86542 -0.0297288 4.31328 0.285985 4.54971L3.55099 6.99899C3.67956 7.09542 3.82956 7.14185 3.97956 7.14185C4.1817 7.14185 4.3817 7.05685 4.52241 6.89185L9.42027 1.17828C9.6767 0.878991 9.64241 0.428276 9.34313 0.171848C9.04384 -0.0845807 8.59241 -0.050295 8.33527 0.249705Z" class="fill" /> 
                                </g> 
                                <g> 
                                    <path fill="#fff" stroke="none" transform="translate(0 0.617188)" d="M17.8571 37.1436L8.69714 37.1436C4.68929 37.1436 1.42857 33.8829 1.42857 29.875L1.42857 8.69714C1.42857 4.68929 4.68929 1.42929 8.69714 1.42929L29.8743 1.42929C33.8821 1.42929 37.1429 4.68929 37.1429 8.69714L37.1429 17.1429C37.1429 17.5379 37.4629 17.8571 37.8571 17.8571C38.2514 17.8571 38.5714 17.5379 38.5714 17.1429L38.5714 8.69714C38.5714 3.90143 34.67 0 29.8743 0L8.69714 0C3.90143 0.000714286 0 3.90143 0 8.69714L0 29.8743C0 34.67 3.90143 38.5714 8.69714 38.5714L17.8571 38.5714C18.2514 38.5714 18.5714 38.2521 18.5714 37.8571C18.5714 37.4621 18.2514 37.1436 17.8571 37.1436Z" class="fill" /> 
                                </g> 
                            </svg> 
            </div> 
            <div>Заявка</div> 
          </div> 
        </a> 
      </li> 
      <li data-img="{{ asset('build/img/2s.jpg') }}" class="advantages-col p-4 mx-4 w-1/6" data-content="Весь процесс установки займёт в среднем не более 3-х часов. Беспроводное оборудование не требует штробление стен и не нанесет вреда ремонту. Опытный инженер научит пользоваться системой и мобильным приложением."> 
        <a> 
          <div> 
            <div> 
              <svg class="svg-class" xmlns="http://www.w3.org/2000/svg" width="40" height="40"> 
                                <g> 
                                    <path fill="#fff" stroke="none" d="M36.4546 16.2818L38.1605 16.2818C39.1748 16.2818 40 17.107 40 18.1214L40 21.8787C40 22.8931 39.1748 23.7183 38.1605 23.7183L36.4547 23.7183C36.0318 25.602 35.2969 27.3771 34.2652 29.0069L35.4706 30.2123C35.818 30.5597 36.0094 31.0217 36.0094 31.513C36.0094 32.0044 35.818 32.4664 35.4706 32.8138L32.8138 35.4706C32.4664 35.818 32.0044 36.0094 31.513 36.0094C31.0217 36.0094 30.5597 35.818 30.2123 35.4706L29.0069 34.2651C27.3771 35.2968 25.602 36.0318 23.7183 36.4546L23.7183 38.1605C23.7183 39.1748 22.8931 40 21.8787 40L18.1214 40C17.1071 40 16.2819 39.1748 16.2819 38.1605L16.2819 36.4546C14.3981 36.0316 12.623 35.2968 10.9933 34.265L9.78779 35.4705C9.44039 35.8179 8.9784 36.0093 8.48705 36.0093C7.9957 36.0093 7.5337 35.8179 7.1863 35.4705L4.52947 32.8137C4.18207 32.4662 3.99068 32.0043 3.99068 31.513C3.99068 31.0216 4.18207 30.5596 4.52947 30.2122L5.73495 29.0067C4.70325 27.377 3.9683 25.6019 3.54544 23.7182L1.83953 23.7182C0.825205 23.7182 0 22.893 0 21.8787L0 18.1213C0 17.107 0.825205 16.2818 1.83953 16.2818L3.54544 16.2818C3.9683 14.3982 4.70325 12.623 5.73495 10.9933L4.52947 9.78779C3.81221 9.07053 3.81221 7.90356 4.52947 7.1863L7.1863 4.52939C7.5337 4.182 7.9957 3.99061 8.48705 3.99061C8.9784 3.99061 9.44039 4.182 9.78779 4.52947L10.9932 5.73487C12.6229 4.70317 14.3981 3.96822 16.2818 3.54536L16.2818 1.83953C16.2818 0.825205 17.107 0 18.1213 0L21.8787 0C22.893 0 23.7182 0.825205 23.7182 1.83953L23.7182 3.54528C25.6019 3.96814 27.3771 4.70309 29.0068 5.73479L30.2122 4.52939C30.5596 4.182 31.0216 3.99061 31.513 3.99061C32.0043 3.99061 32.4663 4.18192 32.8137 4.52939L35.4705 7.18622C36.1878 7.90348 36.1878 9.07045 35.4705 9.78771L34.2651 10.9932C35.2968 12.6229 36.0318 14.3981 36.4546 16.2818ZM38.1605 22.544C38.5274 22.544 38.8258 22.2456 38.8258 21.8787L38.8258 18.1213C38.8258 17.7544 38.5274 17.456 38.1605 17.456L35.9779 17.456C35.697 17.456 35.4554 17.257 35.4017 16.9812C34.9994 14.9165 34.2002 12.9859 33.0261 11.2431C32.8692 11.0102 32.8993 10.6986 33.0979 10.5L34.6404 8.95757C34.8998 8.69816 34.8998 8.27601 34.6404 8.01659L31.9836 5.35977C31.8578 5.23405 31.6908 5.16485 31.513 5.16485C31.3353 5.16485 31.1682 5.23413 31.0426 5.35977L29.5 6.90223C29.3014 7.1009 28.9899 7.13096 28.7569 6.97401C27.0141 5.8 25.0835 5.00078 23.0188 4.59843C22.7431 4.54466 22.544 4.30309 22.544 4.02215L22.544 1.83953C22.544 1.47264 22.2456 1.17417 21.8787 1.17417L18.1213 1.17417C17.7544 1.17417 17.456 1.47264 17.456 1.83953L17.456 4.02207C17.456 4.30309 17.2569 4.54458 16.9812 4.59836C14.9164 5.0007 12.9858 5.8 11.2431 6.97393C11.01 7.13088 10.6986 7.10074 10.5 6.90215L8.9575 5.35969C8.83186 5.23397 8.66481 5.16477 8.48705 5.16477C8.30928 5.16477 8.14215 5.23405 8.01652 5.35969L5.35969 8.01652C5.10027 8.27593 5.10027 8.69808 5.35969 8.9575L6.90215 10.5002C7.10082 10.6988 7.13088 11.0103 6.97393 11.2433C5.8 12.986 5.0007 14.9166 4.59836 16.9813C4.54466 17.257 4.30309 17.456 4.02215 17.456L1.83953 17.456C1.47264 17.456 1.17417 17.7545 1.17417 18.1214L1.17417 21.8787C1.17417 22.2456 1.47264 22.5441 1.83953 22.5441L4.02223 22.5441C4.30317 22.5441 4.54466 22.7431 4.59843 23.0189C5.00078 25.0836 5.8 27.0142 6.97401 28.7569C7.13096 28.9898 7.1009 29.3013 6.90223 29.5L5.35969 31.0425C5.23397 31.1682 5.16477 31.3353 5.16477 31.513C5.16477 31.6907 5.23405 31.8578 5.35969 31.9835L8.01652 34.6404C8.14223 34.7661 8.30928 34.8353 8.48705 34.8353C8.66481 34.8353 8.83186 34.766 8.9575 34.6404L10.5 33.0979C10.6135 32.9843 10.7639 32.9259 10.9154 32.9259C11.029 32.9259 11.1433 32.9588 11.2432 33.0261C12.9858 34.2 14.9165 34.9993 16.9812 35.4016C17.257 35.4553 17.456 35.6969 17.456 35.9778L17.456 38.1605C17.456 38.5274 17.7544 38.8258 18.1213 38.8258L21.8787 38.8258C22.2456 38.8258 22.544 38.5274 22.544 38.1605L22.544 35.9776C22.544 35.6967 22.743 35.4551 23.0188 35.4014C25.0835 34.9991 27.0141 34.1998 28.7569 33.0258C28.9897 32.8688 29.3014 32.8989 29.5 33.0976L31.0425 34.6402C31.1681 34.7659 31.3352 34.8351 31.513 34.8351C31.6907 34.8351 31.8578 34.7658 31.9835 34.6402L34.6403 31.9833C34.766 31.8577 34.8352 31.6906 34.8352 31.5129C34.8352 31.3351 34.7659 31.1681 34.6403 31.0423L33.0979 29.4999C32.8992 29.3013 32.8691 28.9897 33.0261 28.7568C34.2 27.0142 34.9993 25.0836 35.4016 23.0188C35.4553 22.7431 35.6969 22.544 35.9778 22.544L38.1605 22.544Z" fill-rule="evenodd" class="fill" /> 
                                </g> 
                                <g> 
                                    <path fill="#fff" stroke="none" transform="translate(8.14063 8.14087)" d="M1.17417 11.8591C1.17417 5.96744 5.96744 1.17417 11.8591 1.17417C13.3012 1.17417 14.7 1.45636 16.0163 2.01292C16.3149 2.13918 16.6594 1.99945 16.7857 1.70082C16.9119 1.40219 16.7722 1.05769 16.4735 0.931428C15.0117 0.313425 13.4592 0 11.8591 0C5.31992 0 0 5.32 0 11.8591C0 14.5675 0.936908 17.2161 2.63812 19.317C2.75413 19.4604 2.92368 19.5347 3.09472 19.5347C3.2245 19.5347 3.35515 19.4919 3.4638 19.4038C3.71577 19.1998 3.75468 18.8301 3.55061 18.5782C2.01816 16.6856 1.17417 14.2994 1.17417 11.8591L1.17417 11.8591Z" class="fill" /> 
                                </g> 
                                <g> 
                                    <path fill="#fff" stroke="none" transform="translate(12.3271 15.031)" d="M17.8336 0.046381C17.5349 0.172487 17.395 0.516909 17.5211 0.815618C18.0765 2.131 18.3582 3.52842 18.3582 4.96896C18.3582 10.8606 13.565 15.6539 7.67326 15.6539C5.23397 15.6539 2.84853 14.8105 0.956393 13.2792C0.704416 13.0752 0.334788 13.1141 0.130718 13.3662C-0.0731963 13.6183 -0.0342922 13.9879 0.217763 14.1919C2.31819 15.8919 4.96594 16.8281 7.67326 16.8281C14.2124 16.8281 19.5324 11.5081 19.5324 4.96896C19.5324 3.37061 19.2196 1.81953 18.6028 0.358866C18.4766 0.0601579 18.1321 -0.0797247 17.8336 0.046381L17.8336 0.046381Z" class="fill" /> 
                                </g> 
                                <g> 
                                    <path fill="#fff" stroke="none" transform="translate(26.498 10.6453)" d="M0.217857 1.04348C0.803297 1.51722 1.34044 2.05437 1.81426 2.64004C1.93026 2.78345 2.09989 2.85789 2.27101 2.85789C2.40071 2.85789 2.5312 2.81515 2.63985 2.72724C2.89199 2.52333 2.93097 2.15362 2.72705 1.90157C2.20158 1.25194 1.6058 0.656166 0.956331 0.130686C0.704354 -0.0732274 0.334648 -0.034245 0.130655 0.21781C-0.0732585 0.469865 -0.0341978 0.839571 0.217857 1.04348L0.217857 1.04348Z" class="fill" /> 
                                </g> 
                                <g> 
                                    <path fill="#fff" stroke="none" transform="translate(10.6455 10.6458)" d="M0 9.35421C0 4.19632 4.19624 0 9.35421 0C14.5122 0 18.7084 4.19624 18.7084 9.35421C18.7084 14.5122 14.5122 18.7084 9.35421 18.7084C4.19624 18.7084 0 14.5121 0 9.35421ZM1.17417 9.35421C1.17417 13.8647 4.84368 17.5342 9.35421 17.5342C13.8647 17.5342 17.5342 13.8647 17.5342 9.35421C17.5342 4.84376 13.8647 1.17417 9.35421 1.17417C4.84368 1.17417 1.17417 4.84368 1.17417 9.35421Z" fill-rule="evenodd" class="fill" /> 
                                </g> 
                            </svg> 
            </div> 
            <div>Монтаж</div> 
          </div> 
        </a> 
      </li> 
      <li data-img="{{ asset('build/img/3s.jpg') }}" class="advantages-col p-4 mx-4 w-1/6" data-content="Операторы станции мониторинга круглосуточно следят за объектом. При поступлении сигнала сотрудник направит ближайшую группу быстрого реагирования для устранения опасности."> 
        <a> 
          <div> 
            <div> 
              <svg class="svg-class" xmlns="http://www.w3.org/2000/svg" width="40" height="40"> 
                                <g> 
                                    <path fill="#fff" stroke="none" transform="translate(2.59277 2.57544)" d="M0 0L1.28773 0L1.28773 1.28773L0 1.28773L0 0Z" class="fill" /> 
                                </g> 
                                <g> 
                                    <path fill="#fff" stroke="none" transform="translate(5.16797 2.57544)" d="M0 0L1.28773 0L1.28773 1.28773L0 1.28773L0 0Z" class="fill" /> 
                                </g> 
                                <g> 
                                    <path fill="#fff" stroke="none" transform="translate(7.74316 2.57544)" d="M0 0L1.28773 0L1.28773 1.28773L0 1.28773L0 0Z" class="fill" /> 
                                </g> 
                                <g> 
                                    <path fill="#fff" stroke="none" transform="translate(10.3193 14.5925)" d="M9.65795 0L9.99811 0.211896C12.6346 1.85174 15.6608 2.91468 18.7487 3.28565L19.3159 3.35324L19.3159 8.60318C19.3159 14.7733 15.619 20.243 9.89814 22.539L9.65795 22.6349L9.41776 22.539C3.69718 20.2437 0 14.774 0 8.60381L0 3.35387L0.567467 3.28565C3.656 2.91468 6.68134 1.85174 9.3181 0.211896L9.65795 0ZM9.65795 21.2443C14.7516 19.0911 18.0282 14.1571 18.0282 8.60318L18.0282 4.48818C15.0833 4.05747 12.2082 3.03571 9.65795 1.51251C7.10765 3.03571 4.2329 4.05747 1.28773 4.48818L1.28773 8.60318C1.28773 14.1571 4.56457 19.0905 9.65795 21.2443Z" fill-rule="evenodd" class="fill" /> 
                                </g> 
                                <g> 
                                    <path fill="#fff" stroke="none" transform="translate(0.0175781 0)" d="M0 0L39.9195 0L39.9195 36.0563L26.5936 36.0563C24.7868 37.7408 22.617 39.0691 20.1632 39.8868L19.9598 39.9544L19.7564 39.8868C17.3026 39.0685 15.1327 37.7408 13.3262 36.0563L0 36.0563L0 0ZM38.6318 5.15091L38.6318 1.28773L1.28773 1.28773L1.28773 5.15091L38.6318 5.15091ZM32.1932 23.1957C32.1932 27.5651 30.5822 31.6376 27.8465 34.7686L38.6318 34.7686L38.6318 6.43863L1.28773 6.43863L1.28773 34.7686L12.0731 34.7686C9.33727 31.6376 7.72636 27.5651 7.72636 23.1957L7.72636 15.4527L8.37022 15.4527C12.3834 15.4527 16.3625 14.1263 19.5734 11.7184L19.9598 11.4286L20.3461 11.7184C23.557 14.1263 27.5362 15.4527 31.5493 15.4527L32.1932 15.4527L32.1932 23.1957ZM19.9598 38.5956C13.4035 36.3151 9.01408 30.154 9.01408 23.1964L9.01408 16.7294C12.9251 16.6009 16.7722 15.3015 19.9598 13.0304C23.1476 15.3015 26.9948 16.6002 30.9054 16.7294L30.9054 23.1957C30.9054 30.154 26.5163 36.3151 19.9598 38.5956Z" fill-rule="evenodd" class="fill" /> 
                                </g> 
                                <g> 
                                    <path fill="#fff" stroke="none" transform="translate(15.4697 18.672)" d="M1.28773 3.21932L1.28773 5.26943C0.54043 5.53603 0 6.24434 0 7.08249L0 12.2334C0 13.2982 0.866763 14.165 1.93159 14.165L7.0825 14.165C8.14764 14.165 9.01408 13.2982 9.01408 12.2334L9.01408 7.08249C9.01408 6.24434 8.47397 5.53603 7.72636 5.26943L7.72636 3.21932C7.72636 1.44429 6.28238 0 4.50704 0C2.73202 0 1.28773 1.44429 1.28773 3.21932ZM6.43863 5.15091L6.43863 3.21932C6.43863 2.15449 5.57218 1.28773 4.50704 1.28773C3.44222 1.28773 2.57545 2.15449 2.57545 3.21932L2.57545 5.15091L6.43863 5.15091ZM7.72636 12.2334C7.72636 12.588 7.43744 12.8773 7.0825 12.8773L1.93159 12.8773C1.57696 12.8773 1.28773 12.588 1.28773 12.2334L1.28773 7.0825C1.28773 6.72787 1.57696 6.43863 1.93159 6.43863L7.0825 6.43863C7.43744 6.43863 7.72636 6.72787 7.72636 7.0825L7.72636 12.2334Z" fill-rule="evenodd" class="fill" /> 
                                </g> 
                                <g> 
                                    <path fill="#fff" stroke="none" transform="translate(18.0459 25.7545)" d="M0 1.93159C0 0.866763 0.866763 0 1.93159 0C2.99673 0 3.86318 0.866763 3.86318 1.93159C3.86318 2.76974 3.32306 3.47806 2.57545 3.74466L2.57545 5.15091L1.28773 5.15091L1.28773 3.74466C0.54043 3.47806 0 2.76974 0 1.93159ZM1.28773 1.93159C1.28773 2.28622 1.57696 2.57545 1.93159 2.57545C2.28653 2.57545 2.57545 2.28622 2.57545 1.93159C2.57545 1.57696 2.28653 1.28773 1.93159 1.28773C1.57696 1.28773 1.28773 1.57696 1.28773 1.93159Z" fill-rule="evenodd" class="fill" /> 
                                </g> 
                                <g> 
                                    <path fill="#fff" stroke="none" transform="translate(2.59277 7.72632)" d="M2.28746e-15 0L18.0282 0L18.0282 1.28773L0 1.28773L2.28746e-15 0Z" class="fill" /> 
                                </g> 
                                <g> 
                                    <path fill="#fff" stroke="none" transform="translate(2.59277 10.3018)" d="M0 0L12.8773 0L12.8773 1.28773L0 1.28773L0 0Z" class="fill" /> 
                                </g> 
                                <g> 
                                    <path fill="#fff" stroke="none" transform="translate(2.59277 12.8773)" d="M0 0L7.72636 0L7.72636 1.28773L0 1.28773L0 0Z" class="fill" /> 
                                </g> 
                            </svg> 
            </div> 
            <div>Мониторинг</div> 
          </div> 
        </a> 
      </li> 
    </ul> 
  </div> 
</section>

Как это реализовать именно в моем случае?

Answer 1

$(function() { 
  // Все вкладки с родителем `.js-list-item`. 
  var $tabs = $('.js-list-item > li'); 
 
  // Вешаем функцию обработчик на событие `click`. 
  $tabs.on('click', function(event) { 
    changeTab($(this).index()); 
  }); 
 
  // Индекс вкладки на которую будем переключаться. 
  // Отсчет индексов в `javascript` ведется от нуля. 
  // Если индекс равен 0, значит это первая вкладка. 
  // Если индекс равен 1, значит это вторая вкладка. 
  // Переключим вкладку на вторую ч/з три секунды. 
  var timerId = setTimeout(changeTab, 3000, 1); 
 
  // Функция смены текущей вкладки. 
  function changeTab(index) { 
    // $tabs.length - количество вкладок. 
    // a % b – это остаток от деления a на b. 
    index = index % $tabs.length; 
     
    // Меняем класс у текущей вкладки. 
    $tabs.removeClass('active').eq(index).addClass('active'); 
 
    // Меняем фоновое изображение контейнера. 
    $('.how_works').css( 
      'background-image', 
      'url("' + $tabs.eq(index).attr('data-img') + '")' 
    ); 
 
    // Меняем содержимое контейнера. 
    $('.how_work_txt').text($tabs.eq(index).data('content')); 
 
    // Очищаем предыдущий таймер, чтобы 
    // не было зацикливаний при постоянных кликах. 
    clearTimeout(timerId); 
 
    // Переключим вкладку на следующую ч/з три секунды. 
    // ++ - увеличиваем активную вкладку на единицу. 
    timerId = setTimeout(changeTab, 3000, ++index); 
  } 
});
body { 
  background: #08c; 
  color: #fff; 
  opacity: .8; 
} 
 
.how_works {} 
 
.tabs { 
  display: flex; 
  justify-content: space-around; 
  list-style: none; 
} 
 
.svg-class { 
  cursor: pointer; 
}
<section class="pt-8 how_works" style="background-image: url('{{ asset('build/img/our_system.jpg') }}'); position:relative;"> 
  <div class="container mx-auto"> 
    <h2>Как работает наша система</h2> 
    <div class="how_work_txt">Заполните онлайн-заявку в пару кликов на сайте прямо сейчас. А мы подберем для Вас оптимальное решение для защиты, учитывая особенности Вашего объекта и установим охранную систему в удобное для Вас время.</div> 
    <ul class="tabs list-reset flex text-center -mx-4 js-list-item"> 
      <li data-img="{{ asset('build/img/our_system.jpg') }}" class="advantages-col p-4 mx-4 w-1/6 active" data-content="Заполните онлайн-заявку в пару кликов на сайте прямо сейчас. А мы подберем для Вас оптимальное решение для защиты, учитывая особенности Вашего объекта и установим охранную систему в удобное для Вас время."> 
        <a> 
          <div> 
            <div> 
              <svg class="svg-class" xmlns="http://www.w3.org/2000/svg" width="40" height="40"> 
                <g> 
                  <path fill="#fff" stroke="none" transform="translate(21.2373 20.6184)" d="M16.1022 0.623036L18.138 2.65875C18.9701 3.49018 18.9701 4.84304 18.1387 5.67446L7.14581 16.668L1.59009 18.183L1.21867 18.5545C1.07938 18.6938 0.896522 18.7638 0.713665 18.7638C0.532951 18.7638 0.352951 18.6938 0.214379 18.558L0.200808 18.5616L0.204379 18.5473C-0.0691922 18.268 -0.0684779 17.8209 0.208665 17.5437L0.579379 17.173L2.09438 11.6166L13.0872 0.623036C13.9187 -0.206964 15.2708 -0.208393 16.1022 0.623036ZM15.1001 6.69232L17.128 4.66446C17.403 4.39018 17.403 3.94304 17.1287 3.66946L15.0929 1.63375C14.8187 1.36018 14.3722 1.35946 14.0972 1.63446L12.0694 3.66232L15.1001 6.69232ZM11.0601 4.67232L3.74366 11.988L6.77438 15.0188L14.0908 7.70232L11.0601 4.67232ZM3.09866 13.363L5.39866 15.663L2.23581 16.5259L3.09866 13.363Z" fill-rule="evenodd" class="fill" /> 
              </g> 
              <g> 
                  <path fill="#fff" stroke="none" transform="translate(18.5713 9.18933)" d="M0.714286 0C0.32 0 0 0.319286 0 0.714286C0 1.10929 0.32 1.42857 0.714286 1.42857L13.5714 1.42857C13.9657 1.42857 14.2857 1.10929 14.2857 0.714286C14.2857 0.319286 13.9657 0 13.5714 0L0.714286 0Z" class="fill" /> 
              </g> 
              <g> 
                  <path fill="#fff" stroke="none" transform="translate(18.5713 19.1893)" d="M14.2857 0.714286C14.2857 0.319286 13.9657 0 13.5714 0L0.714286 0C0.32 0 0 0.319286 0 0.714286C0 1.10929 0.32 1.42857 0.714286 1.42857L13.5714 1.42857C13.9657 1.42857 14.2857 1.10857 14.2857 0.714286Z" class="fill" /> 
              </g> 
              <g> 
                  <path fill="#fff" stroke="none" transform="translate(5.35645 5.61731)" d="M9.34313 0.172682C9.04456 -0.0844608 8.59313 -0.0508894 8.33599 0.249825L3.87313 5.45554L1.14313 3.4084C0.827414 3.17268 0.380271 3.23554 0.143128 3.55125C-0.0940145 3.86625 -0.0297288 4.31411 0.285985 4.55054L3.55099 6.99982C3.67956 7.09625 3.82956 7.14268 3.97956 7.14268C4.1817 7.14268 4.3817 7.05768 4.52241 6.89268L9.42027 1.1784C9.6767 0.879825 9.64241 0.429111 9.34313 0.172682Z" class="fill" /> 
              </g> 
              <g> 
                  <path fill="#fff" stroke="none" transform="translate(5.35645 15.6173)" d="M9.34313 0.172682C9.04456 -0.0844608 8.59313 -0.0508894 8.33599 0.249825L3.87313 5.45554L1.14313 3.4084C0.827414 3.17197 0.380271 3.23625 0.143128 3.55125C-0.0940145 3.86625 -0.0297288 4.31411 0.285985 4.55054L3.55099 6.99982C3.67956 7.09625 3.82956 7.14268 3.97956 7.14268C4.1817 7.14268 4.3817 7.05768 4.52241 6.89268L9.42027 1.1784C9.6767 0.879825 9.64241 0.429111 9.34313 0.172682Z" class="fill" /> 
              </g> 
              <g> 
                  <path fill="#fff" stroke="none" transform="translate(5.35645 26.3317)" d="M8.33527 0.249705L3.87241 5.4547L1.14313 3.40756C0.827414 3.17113 0.380271 3.23542 0.143128 3.55042C-0.0940145 3.86542 -0.0297288 4.31328 0.285985 4.54971L3.55099 6.99899C3.67956 7.09542 3.82956 7.14185 3.97956 7.14185C4.1817 7.14185 4.3817 7.05685 4.52241 6.89185L9.42027 1.17828C9.6767 0.878991 9.64241 0.428276 9.34313 0.171848C9.04384 -0.0845807 8.59241 -0.050295 8.33527 0.249705Z" class="fill" /> 
              </g> 
              <g> 
                  <path fill="#fff" stroke="none" transform="translate(0 0.617188)" d="M17.8571 37.1436L8.69714 37.1436C4.68929 37.1436 1.42857 33.8829 1.42857 29.875L1.42857 8.69714C1.42857 4.68929 4.68929 1.42929 8.69714 1.42929L29.8743 1.42929C33.8821 1.42929 37.1429 4.68929 37.1429 8.69714L37.1429 17.1429C37.1429 17.5379 37.4629 17.8571 37.8571 17.8571C38.2514 17.8571 38.5714 17.5379 38.5714 17.1429L38.5714 8.69714C38.5714 3.90143 34.67 0 29.8743 0L8.69714 0C3.90143 0.000714286 0 3.90143 0 8.69714L0 29.8743C0 34.67 3.90143 38.5714 8.69714 38.5714L17.8571 38.5714C18.2514 38.5714 18.5714 38.2521 18.5714 37.8571C18.5714 37.4621 18.2514 37.1436 17.8571 37.1436Z" class="fill" /> 
              </g> 
              </svg> 
            </div> 
            <div>Заявка</div> 
          </div> 
        </a> 
      </li> 
      <li data-img="{{ asset('build/img/2s.jpg') }}" class="advantages-col p-4 mx-4 w-1/6" data-content="Весь процесс установки займёт в среднем не более 3-х часов. Беспроводное оборудование не требует штробление стен и не нанесет вреда ремонту. Опытный инженер научит пользоваться системой и мобильным приложением."> 
        <a> 
          <div> 
            <div> 
              <svg class="svg-class" xmlns="http://www.w3.org/2000/svg" width="40" height="40"> 
              <g> 
                  <path fill="#fff" stroke="none" d="M36.4546 16.2818L38.1605 16.2818C39.1748 16.2818 40 17.107 40 18.1214L40 21.8787C40 22.8931 39.1748 23.7183 38.1605 23.7183L36.4547 23.7183C36.0318 25.602 35.2969 27.3771 34.2652 29.0069L35.4706 30.2123C35.818 30.5597 36.0094 31.0217 36.0094 31.513C36.0094 32.0044 35.818 32.4664 35.4706 32.8138L32.8138 35.4706C32.4664 35.818 32.0044 36.0094 31.513 36.0094C31.0217 36.0094 30.5597 35.818 30.2123 35.4706L29.0069 34.2651C27.3771 35.2968 25.602 36.0318 23.7183 36.4546L23.7183 38.1605C23.7183 39.1748 22.8931 40 21.8787 40L18.1214 40C17.1071 40 16.2819 39.1748 16.2819 38.1605L16.2819 36.4546C14.3981 36.0316 12.623 35.2968 10.9933 34.265L9.78779 35.4705C9.44039 35.8179 8.9784 36.0093 8.48705 36.0093C7.9957 36.0093 7.5337 35.8179 7.1863 35.4705L4.52947 32.8137C4.18207 32.4662 3.99068 32.0043 3.99068 31.513C3.99068 31.0216 4.18207 30.5596 4.52947 30.2122L5.73495 29.0067C4.70325 27.377 3.9683 25.6019 3.54544 23.7182L1.83953 23.7182C0.825205 23.7182 0 22.893 0 21.8787L0 18.1213C0 17.107 0.825205 16.2818 1.83953 16.2818L3.54544 16.2818C3.9683 14.3982 4.70325 12.623 5.73495 10.9933L4.52947 9.78779C3.81221 9.07053 3.81221 7.90356 4.52947 7.1863L7.1863 4.52939C7.5337 4.182 7.9957 3.99061 8.48705 3.99061C8.9784 3.99061 9.44039 4.182 9.78779 4.52947L10.9932 5.73487C12.6229 4.70317 14.3981 3.96822 16.2818 3.54536L16.2818 1.83953C16.2818 0.825205 17.107 0 18.1213 0L21.8787 0C22.893 0 23.7182 0.825205 23.7182 1.83953L23.7182 3.54528C25.6019 3.96814 27.3771 4.70309 29.0068 5.73479L30.2122 4.52939C30.5596 4.182 31.0216 3.99061 31.513 3.99061C32.0043 3.99061 32.4663 4.18192 32.8137 4.52939L35.4705 7.18622C36.1878 7.90348 36.1878 9.07045 35.4705 9.78771L34.2651 10.9932C35.2968 12.6229 36.0318 14.3981 36.4546 16.2818ZM38.1605 22.544C38.5274 22.544 38.8258 22.2456 38.8258 21.8787L38.8258 18.1213C38.8258 17.7544 38.5274 17.456 38.1605 17.456L35.9779 17.456C35.697 17.456 35.4554 17.257 35.4017 16.9812C34.9994 14.9165 34.2002 12.9859 33.0261 11.2431C32.8692 11.0102 32.8993 10.6986 33.0979 10.5L34.6404 8.95757C34.8998 8.69816 34.8998 8.27601 34.6404 8.01659L31.9836 5.35977C31.8578 5.23405 31.6908 5.16485 31.513 5.16485C31.3353 5.16485 31.1682 5.23413 31.0426 5.35977L29.5 6.90223C29.3014 7.1009 28.9899 7.13096 28.7569 6.97401C27.0141 5.8 25.0835 5.00078 23.0188 4.59843C22.7431 4.54466 22.544 4.30309 22.544 4.02215L22.544 1.83953C22.544 1.47264 22.2456 1.17417 21.8787 1.17417L18.1213 1.17417C17.7544 1.17417 17.456 1.47264 17.456 1.83953L17.456 4.02207C17.456 4.30309 17.2569 4.54458 16.9812 4.59836C14.9164 5.0007 12.9858 5.8 11.2431 6.97393C11.01 7.13088 10.6986 7.10074 10.5 6.90215L8.9575 5.35969C8.83186 5.23397 8.66481 5.16477 8.48705 5.16477C8.30928 5.16477 8.14215 5.23405 8.01652 5.35969L5.35969 8.01652C5.10027 8.27593 5.10027 8.69808 5.35969 8.9575L6.90215 10.5002C7.10082 10.6988 7.13088 11.0103 6.97393 11.2433C5.8 12.986 5.0007 14.9166 4.59836 16.9813C4.54466 17.257 4.30309 17.456 4.02215 17.456L1.83953 17.456C1.47264 17.456 1.17417 17.7545 1.17417 18.1214L1.17417 21.8787C1.17417 22.2456 1.47264 22.5441 1.83953 22.5441L4.02223 22.5441C4.30317 22.5441 4.54466 22.7431 4.59843 23.0189C5.00078 25.0836 5.8 27.0142 6.97401 28.7569C7.13096 28.9898 7.1009 29.3013 6.90223 29.5L5.35969 31.0425C5.23397 31.1682 5.16477 31.3353 5.16477 31.513C5.16477 31.6907 5.23405 31.8578 5.35969 31.9835L8.01652 34.6404C8.14223 34.7661 8.30928 34.8353 8.48705 34.8353C8.66481 34.8353 8.83186 34.766 8.9575 34.6404L10.5 33.0979C10.6135 32.9843 10.7639 32.9259 10.9154 32.9259C11.029 32.9259 11.1433 32.9588 11.2432 33.0261C12.9858 34.2 14.9165 34.9993 16.9812 35.4016C17.257 35.4553 17.456 35.6969 17.456 35.9778L17.456 38.1605C17.456 38.5274 17.7544 38.8258 18.1213 38.8258L21.8787 38.8258C22.2456 38.8258 22.544 38.5274 22.544 38.1605L22.544 35.9776C22.544 35.6967 22.743 35.4551 23.0188 35.4014C25.0835 34.9991 27.0141 34.1998 28.7569 33.0258C28.9897 32.8688 29.3014 32.8989 29.5 33.0976L31.0425 34.6402C31.1681 34.7659 31.3352 34.8351 31.513 34.8351C31.6907 34.8351 31.8578 34.7658 31.9835 34.6402L34.6403 31.9833C34.766 31.8577 34.8352 31.6906 34.8352 31.5129C34.8352 31.3351 34.7659 31.1681 34.6403 31.0423L33.0979 29.4999C32.8992 29.3013 32.8691 28.9897 33.0261 28.7568C34.2 27.0142 34.9993 25.0836 35.4016 23.0188C35.4553 22.7431 35.6969 22.544 35.9778 22.544L38.1605 22.544Z" fill-rule="evenodd" class="fill" /> 
                                </g> 
                                <g> 
                                    <path fill="#fff" stroke="none" transform="translate(8.14063 8.14087)" d="M1.17417 11.8591C1.17417 5.96744 5.96744 1.17417 11.8591 1.17417C13.3012 1.17417 14.7 1.45636 16.0163 2.01292C16.3149 2.13918 16.6594 1.99945 16.7857 1.70082C16.9119 1.40219 16.7722 1.05769 16.4735 0.931428C15.0117 0.313425 13.4592 0 11.8591 0C5.31992 0 0 5.32 0 11.8591C0 14.5675 0.936908 17.2161 2.63812 19.317C2.75413 19.4604 2.92368 19.5347 3.09472 19.5347C3.2245 19.5347 3.35515 19.4919 3.4638 19.4038C3.71577 19.1998 3.75468 18.8301 3.55061 18.5782C2.01816 16.6856 1.17417 14.2994 1.17417 11.8591L1.17417 11.8591Z" class="fill" /> 
                                </g> 
                                <g> 
                                    <path fill="#fff" stroke="none" transform="translate(12.3271 15.031)" d="M17.8336 0.046381C17.5349 0.172487 17.395 0.516909 17.5211 0.815618C18.0765 2.131 18.3582 3.52842 18.3582 4.96896C18.3582 10.8606 13.565 15.6539 7.67326 15.6539C5.23397 15.6539 2.84853 14.8105 0.956393 13.2792C0.704416 13.0752 0.334788 13.1141 0.130718 13.3662C-0.0731963 13.6183 -0.0342922 13.9879 0.217763 14.1919C2.31819 15.8919 4.96594 16.8281 7.67326 16.8281C14.2124 16.8281 19.5324 11.5081 19.5324 4.96896C19.5324 3.37061 19.2196 1.81953 18.6028 0.358866C18.4766 0.0601579 18.1321 -0.0797247 17.8336 0.046381L17.8336 0.046381Z" class="fill" /> 
                                </g> 
                                <g> 
                                    <path fill="#fff" stroke="none" transform="translate(26.498 10.6453)" d="M0.217857 1.04348C0.803297 1.51722 1.34044 2.05437 1.81426 2.64004C1.93026 2.78345 2.09989 2.85789 2.27101 2.85789C2.40071 2.85789 2.5312 2.81515 2.63985 2.72724C2.89199 2.52333 2.93097 2.15362 2.72705 1.90157C2.20158 1.25194 1.6058 0.656166 0.956331 0.130686C0.704354 -0.0732274 0.334648 -0.034245 0.130655 0.21781C-0.0732585 0.469865 -0.0341978 0.839571 0.217857 1.04348L0.217857 1.04348Z" class="fill" /> 
              </g> 
              <g> 
                  <path fill="#fff" stroke="none" transform="translate(10.6455 10.6458)" d="M0 9.35421C0 4.19632 4.19624 0 9.35421 0C14.5122 0 18.7084 4.19624 18.7084 9.35421C18.7084 14.5122 14.5122 18.7084 9.35421 18.7084C4.19624 18.7084 0 14.5121 0 9.35421ZM1.17417 9.35421C1.17417 13.8647 4.84368 17.5342 9.35421 17.5342C13.8647 17.5342 17.5342 13.8647 17.5342 9.35421C17.5342 4.84376 13.8647 1.17417 9.35421 1.17417C4.84368 1.17417 1.17417 4.84368 1.17417 9.35421Z" fill-rule="evenodd" class="fill" /> 
              </g> 
              </svg> 
            </div> 
            <div>Монтаж</div> 
          </div> 
        </a> 
      </li> 
      <li data-img="{{ asset('build/img/3s.jpg') }}" class="advantages-col p-4 mx-4 w-1/6" data-content="Операторы станции мониторинга круглосуточно следят за объектом. При поступлении сигнала сотрудник направит ближайшую группу быстрого реагирования для устранения опасности."> 
        <a> 
          <div> 
            <div> 
              <svg class="svg-class" xmlns="http://www.w3.org/2000/svg" width="40" height="40"> 
              <g> 
                  <path fill="#fff" stroke="none" transform="translate(2.59277 2.57544)" d="M0 0L1.28773 0L1.28773 1.28773L0 1.28773L0 0Z" class="fill" /> 
              </g> 
              <g> 
                  <path fill="#fff" stroke="none" transform="translate(5.16797 2.57544)" d="M0 0L1.28773 0L1.28773 1.28773L0 1.28773L0 0Z" class="fill" /> 
              </g> 
              <g> 
                  <path fill="#fff" stroke="none" transform="translate(7.74316 2.57544)" d="M0 0L1.28773 0L1.28773 1.28773L0 1.28773L0 0Z" class="fill" /> 
              </g> 
              <g> 
                  <path fill="#fff" stroke="none" transform="translate(10.3193 14.5925)" d="M9.65795 0L9.99811 0.211896C12.6346 1.85174 15.6608 2.91468 18.7487 3.28565L19.3159 3.35324L19.3159 8.60318C19.3159 14.7733 15.619 20.243 9.89814 22.539L9.65795 22.6349L9.41776 22.539C3.69718 20.2437 0 14.774 0 8.60381L0 3.35387L0.567467 3.28565C3.656 2.91468 6.68134 1.85174 9.3181 0.211896L9.65795 0ZM9.65795 21.2443C14.7516 19.0911 18.0282 14.1571 18.0282 8.60318L18.0282 4.48818C15.0833 4.05747 12.2082 3.03571 9.65795 1.51251C7.10765 3.03571 4.2329 4.05747 1.28773 4.48818L1.28773 8.60318C1.28773 14.1571 4.56457 19.0905 9.65795 21.2443Z" fill-rule="evenodd" class="fill" /> 
              </g> 
              <g> 
                  <path fill="#fff" stroke="none" transform="translate(0.0175781 0)" d="M0 0L39.9195 0L39.9195 36.0563L26.5936 36.0563C24.7868 37.7408 22.617 39.0691 20.1632 39.8868L19.9598 39.9544L19.7564 39.8868C17.3026 39.0685 15.1327 37.7408 13.3262 36.0563L0 36.0563L0 0ZM38.6318 5.15091L38.6318 1.28773L1.28773 1.28773L1.28773 5.15091L38.6318 5.15091ZM32.1932 23.1957C32.1932 27.5651 30.5822 31.6376 27.8465 34.7686L38.6318 34.7686L38.6318 6.43863L1.28773 6.43863L1.28773 34.7686L12.0731 34.7686C9.33727 31.6376 7.72636 27.5651 7.72636 23.1957L7.72636 15.4527L8.37022 15.4527C12.3834 15.4527 16.3625 14.1263 19.5734 11.7184L19.9598 11.4286L20.3461 11.7184C23.557 14.1263 27.5362 15.4527 31.5493 15.4527L32.1932 15.4527L32.1932 23.1957ZM19.9598 38.5956C13.4035 36.3151 9.01408 30.154 9.01408 23.1964L9.01408 16.7294C12.9251 16.6009 16.7722 15.3015 19.9598 13.0304C23.1476 15.3015 26.9948 16.6002 30.9054 16.7294L30.9054 23.1957C30.9054 30.154 26.5163 36.3151 19.9598 38.5956Z" fill-rule="evenodd" class="fill" /> 
              </g> 
              <g> 
                  <path fill="#fff" stroke="none" transform="translate(15.4697 18.672)" d="M1.28773 3.21932L1.28773 5.26943C0.54043 5.53603 0 6.24434 0 7.08249L0 12.2334C0 13.2982 0.866763 14.165 1.93159 14.165L7.0825 14.165C8.14764 14.165 9.01408 13.2982 9.01408 12.2334L9.01408 7.08249C9.01408 6.24434 8.47397 5.53603 7.72636 5.26943L7.72636 3.21932C7.72636 1.44429 6.28238 0 4.50704 0C2.73202 0 1.28773 1.44429 1.28773 3.21932ZM6.43863 5.15091L6.43863 3.21932C6.43863 2.15449 5.57218 1.28773 4.50704 1.28773C3.44222 1.28773 2.57545 2.15449 2.57545 3.21932L2.57545 5.15091L6.43863 5.15091ZM7.72636 12.2334C7.72636 12.588 7.43744 12.8773 7.0825 12.8773L1.93159 12.8773C1.57696 12.8773 1.28773 12.588 1.28773 12.2334L1.28773 7.0825C1.28773 6.72787 1.57696 6.43863 1.93159 6.43863L7.0825 6.43863C7.43744 6.43863 7.72636 6.72787 7.72636 7.0825L7.72636 12.2334Z" fill-rule="evenodd" class="fill" /> 
              </g> 
              <g> 
                  <path fill="#fff" stroke="none" transform="translate(18.0459 25.7545)" d="M0 1.93159C0 0.866763 0.866763 0 1.93159 0C2.99673 0 3.86318 0.866763 3.86318 1.93159C3.86318 2.76974 3.32306 3.47806 2.57545 3.74466L2.57545 5.15091L1.28773 5.15091L1.28773 3.74466C0.54043 3.47806 0 2.76974 0 1.93159ZM1.28773 1.93159C1.28773 2.28622 1.57696 2.57545 1.93159 2.57545C2.28653 2.57545 2.57545 2.28622 2.57545 1.93159C2.57545 1.57696 2.28653 1.28773 1.93159 1.28773C1.57696 1.28773 1.28773 1.57696 1.28773 1.93159Z" fill-rule="evenodd" class="fill" /> 
              </g> 
              <g> 
                  <path fill="#fff" stroke="none" transform="translate(2.59277 7.72632)" d="M2.28746e-15 0L18.0282 0L18.0282 1.28773L0 1.28773L2.28746e-15 0Z" class="fill" /> 
              </g> 
              <g> 
                  <path fill="#fff" stroke="none" transform="translate(2.59277 10.3018)" d="M0 0L12.8773 0L12.8773 1.28773L0 1.28773L0 0Z" class="fill" /> 
              </g> 
              <g> 
                  <path fill="#fff" stroke="none" transform="translate(2.59277 12.8773)" d="M0 0L7.72636 0L7.72636 1.28773L0 1.28773L0 0Z" class="fill" /> 
              </g> 
              </svg> 
            </div> 
            <div>Мониторинг</div> 
          </div> 
        </a> 
      </li> 
    </ul> 
  </div> 
</section> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

READ ALSO
Как скрыть элемент на время скролла страницы?

Как скрыть элемент на время скролла страницы?

Хочу скрывать блок пока пользователь находится в процессе пролистывания страницы и показывать его через пару секунд после остановки

92
Cannot read property &#39;classList&#39; of undefined

Cannot read property 'classList' of undefined

Использую код для слайдера! Слайдер работает, но на других страница в консоле ошибка (Cannot read property 'classList' of undefined), помогите пожалуйста исправить

97