Как я могу подключить "smoothly" к данным "кнопкам" ?

[shchdmitrii]

Как я могу подключить https://code.s3.yandex.net/web-code/smoothly/index.html
к данным "кнопкам" ?
и (или) сделать аналогичное smoothly переключение ?

также код кнопок и т.д на codepen https://codepen.io/shchdmitrii/pen/WNyEoVM
код

    <div class="tab tabs">
        
      <div class="tab-nav tabs__tab-wrapper">
          
           <div class="nav tabs__tab" data-tab=0 id="nav-0">
            <label class="ctrl-label " for="tab-0-ctrl">0</label>
          </div>
                  <div class="nav tabs__tab" data-tab=1 id="nav-1">
            <label class="ctrl-label" for="tab-1-ctrl">1</label>
          </div>
          
          <div class="nav tabs__tab" data-tab=2 id="nav-2">
            <label class="ctrl-label" for="tab-2-ctrl">2</label>
          </div>
          
                  <div class="nav tabs__tab" data-tab=3 id="nav-3">
            <label class="ctrl-label" for="tab-3-ctrl">3</label>
          </div>
          

              </div>

      <div class="tab-container tabs__containers-wrapper">
          
          
         
          
          <div class="tab-container-block tabs__container" data-container=0 id="tab-0" >
              <h2>0</h2>
              <div class="head">
                  0
              </div>
          </div>


        <div class="tab-container-block tabs__container" data-container=1 id="tab-1" >
        <h2>1</h2>
                      <ul class="grid-view" data-grid="vertical">
                              
                              
                              <li class="cell">
                                <a>
                                  <div class="frame_block">
                                    <div class="label label-information">1</div>
                                     <div class="close-at">1</div>
                                                          <p>1</p>
                                    
                                  </div>
                                </a>
                              </li>
                              
                              
                          </ul>
                  </div>

     <div class="tab-container-block tabs__container" data-container=2 id="tab-2" >
        <h2>2</h2>
                      <ul class="grid-view" data-grid="vertical">
                              
                              
                              <li class="cell">
                                <a>
                                  <div class="frame_block">
                                    <div class="label label-campaign">2</div>
                                     <div class="close-at">2</div>
                                                          <p>2</p>
                                    <span class="arrow arrow-right"></span>
                                  </div>
                                </a>
                              </li>
                              
                              
                          </ul>
                  </div>

        <div class="tab-container-block tabs__container" data-container=3 id="tab-3">
                      <h2>3</h2>
                      <ul class="grid-view" data-grid="vertical">
                              
                              <li class="cell">
                  <a>
                    <div class="frame_block">
                      <div class="label label-information">3</div>
                      <div class="close-at"></div>
                      <p>3</p>
                      <span class="arrow arrow-right"></span>
                    </div>
                  </a>
                </li>
               
                          </ul>
                  </div>
             

      </div>
      
      
    </div>

 .tabs__container {
        display: none;
      }
      
      .tabs__container_active {
        display: block;
      }
      
      .tabs__tab_active {
   
      }
      
      .tabs__tab-wrapper {
        display: flex;
      }

//Tabs Logic

    function initTabs(tabsContainer) {
          const activeTabClass = 'tabs__tab_active'
          const activeContainerClass = 'tabs__container_active'
          const tabs = tabsContainer.querySelectorAll('.tabs__tab')
          const containers = tabsContainer.querySelectorAll('.tabs__container')
     
  
          function activateTab(identifier) {
              let tabToActivate
              let containerToActivate
              
              tabs.forEach(tab => {
                  tab.classList.remove(activeTabClass)
                  tab.style.cssText -= 'border-image-source: url(placeholder_active.png)'; //button image changer
                  if (tab.dataset.tab == identifier) {
                      tabToActivate = tab
                  }
              })
              containers.forEach(container => {
                  container.classList.remove(activeContainerClass)
                  if (container.dataset.container == identifier) {
                      containerToActivate = container
                  }
              })
              tabToActivate.classList.add(activeTabClass)
              tabToActivate.style.cssText += 'border-image-source: url(placeholder_active.png)' //button image changer
              containerToActivate.classList.add(activeContainerClass)
           
            
          }
  
          activateTab(tabs[0].dataset.tab)
  
          tabs.forEach(tab => {
              tab.addEventListener('click', () => {
                  activateTab(tab.dataset.tab)
              })
          })
      }
  
      initTabs(document.querySelectorAll('.tabs')[0])
      initTabs(document.querySelectorAll('.tabs')[1])

  //Tabs Logic

[Вадим Фролов]

Сообщение от shchdmitrii

Как я могу подключить https://code.s3.yandex.net/web-code/smoothly/index.html
к данным "кнопкам" ?
и (или) сделать аналогичное smoothly переключение ?

также код кнопок и т.д на codepen https://codepen.io/shchdmitrii/pen/WNyEoVM
код

    <div class="tab tabs">
        
      <div class="tab-nav tabs__tab-wrapper">
          
           <div class="nav tabs__tab" data-tab=0 id="nav-0">
            <label class="ctrl-label " for="tab-0-ctrl">0</label>
          </div>
                  <div class="nav tabs__tab" data-tab=1 id="nav-1">
            <label class="ctrl-label" for="tab-1-ctrl">1</label>
          </div>
          
          <div class="nav tabs__tab" data-tab=2 id="nav-2">
            <label class="ctrl-label" for="tab-2-ctrl">2</label>
          </div>
          
                  <div class="nav tabs__tab" data-tab=3 id="nav-3">
            <label class="ctrl-label" for="tab-3-ctrl">3</label>
          </div>
          

              </div>

      <div class="tab-container tabs__containers-wrapper">
          
          
         
          
          <div class="tab-container-block tabs__container" data-container=0 id="tab-0" >
              <h2>0</h2>
              <div class="head">
                  0
              </div>
          </div>


        <div class="tab-container-block tabs__container" data-container=1 id="tab-1" >
        <h2>1</h2>
                      <ul class="grid-view" data-grid="vertical">
                              
                              
                              <li class="cell">
                                <a>
                                  <div class="frame_block">
                                    <div class="label label-information">1</div>
                                     <div class="close-at">1</div>
                                                          <p>1</p>
                                    
                                  </div>
                                </a>
                              </li>
                              
                              
                          </ul>
                  </div>

     <div class="tab-container-block tabs__container" data-container=2 id="tab-2" >
        <h2>2</h2>
                      <ul class="grid-view" data-grid="vertical">
                              
                              
                              <li class="cell">
                                <a>
                                  <div class="frame_block">
                                    <div class="label label-campaign">2</div>
                                     <div class="close-at">2</div>
                                                          <p>2</p>
                                    <span class="arrow arrow-right"></span>
                                  </div>
                                </a>
                              </li>
                              
                              
                          </ul>
                  </div>

        <div class="tab-container-block tabs__container" data-container=3 id="tab-3">
                      <h2>3</h2>
                      <ul class="grid-view" data-grid="vertical">
                              
                              <li class="cell">
                  <a>
                    <div class="frame_block">
                      <div class="label label-information">3</div>
                      <div class="close-at"></div>
                      <p>3</p>
                      <span class="arrow arrow-right"></span>
                    </div>
                  </a>
                </li>
               
                          </ul>
                  </div>
             

      </div>
      
      
    </div>

 .tabs__container {
        display: none;
      }
      
      .tabs__container_active {
        display: block;
      }
      
      .tabs__tab_active {
   
      }
      
      .tabs__tab-wrapper {
        display: flex;
      }

//Tabs Logic

    function initTabs(tabsContainer) {
          const activeTabClass = 'tabs__tab_active'
          const activeContainerClass = 'tabs__container_active'
          const tabs = tabsContainer.querySelectorAll('.tabs__tab')
          const containers = tabsContainer.querySelectorAll('.tabs__container')
     
  
          function activateTab(identifier) {
              let tabToActivate
              let containerToActivate
              
              tabs.forEach(tab => {
                  tab.classList.remove(activeTabClass)
                  tab.style.cssText -= 'border-image-source: url(placeholder_active.png)'; //button image changer
                  if (tab.dataset.tab == identifier) {
                      tabToActivate = tab
                  }
              })
              containers.forEach(container => {
                  container.classList.remove(activeContainerClass)
                  if (container.dataset.container == identifier) {
                      containerToActivate = container
                  }
              })
              tabToActivate.classList.add(activeTabClass)
              tabToActivate.style.cssText += 'border-image-source: url(placeholder_active.png)' //button image changer
              containerToActivate.classList.add(activeContainerClass)
           
            
          }
  
          activateTab(tabs[0].dataset.tab)
  
          tabs.forEach(tab => {
              tab.addEventListener('click', () => {
                  activateTab(tab.dataset.tab)
              })
          })
      }
  
      initTabs(document.querySelectorAll('.tabs')[0])
      initTabs(document.querySelectorAll('.tabs')[1])

  //Tabs Logic

Нужно в конце перед закрывающим боди подключить скрипт джс и все работает по клику на цыфорки. Так подключаем скрипт в html <script src="script.js"></script>
</body>
</html> Все работает я проверил.

[shchdmitrii]

Вадим Фролов,
К сожалению просто так подключить не получится... уже пробовал до написания вопроса...
и по инструкции https://code.s3.yandex.net/web-code/...sic-usage.html и
https://code.s3.yandex.net/web-code/smoothly/index.html

Нужно чтобы кнопки и т.д "smoothly" работали
пример эффекта https://code.s3.yandex.net/web-code/...sic-usage.html