javascript - before - jquery next

.next() y.prev() en ul li responsive view

Question

Tengo un panel de pestañas y quiero poner el siguiente y el anterior en la vista receptiva. Me gusta esto http://www.jqueryscript.net/demo/Mobile-friendly-Responsive-Navigation-Plugin-Swipe-Navigation/ (cambie el tamaño de su navegador)

Intenté hacer esto pero no tuve suerte. No pude trabajar mi script correctamente. También probé el script desde el enlace de arriba, pero aún no funcionaba.

¿Como hacer esto? o ¿Cómo arreglar mi código actual? ¿O hay una manera fácil de hacer esto? Por favor, ayúdame.

Mi código

<ul class="tabs swipenavigation js-swipenavigation''">
   <li class="active"><span class="icons-tabbed icon-icon-tab-locator">Tab 1</span></li>
   <li><span  id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 2</span></li>
   <li><span  id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 3</span></li>
  <li><span  id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 4</span></li>
  <li><span  id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 5</span></li>
  <li><span  id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 6</span></li>
  <li><span  id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 7</span></li>
  <a class=''next'' href=''#''>
    <i class=''fa fa-caret-right''></i>
  </a>
  <a class=''back'' href=''#''>
    <i class=''fa fa-caret-left''></i>
  </a>
</ul>