JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

<script src="http://proloser.github.com/AnythingSlider/js/jquery.anythingslider.js"></script>
<link rel="stylesheet" href="http://proloser.github.com/AnythingSlider/css/anythingslider.css">
<button align="center">Toggle Link #3</button>
<br><br>

<ul id="slider1">
    
    <li><img src="http://proloser.github.com/AnythingSlider/images/slide-civil-1.jpg" alt="" /></li>
    
    <li><img src="http://proloser.github.com/AnythingSlider/images/slide-env-1.jpg" alt="" /></li>
    
    <li><img src="http://proloser.github.com/AnythingSlider/images/slide-civil-2.jpg" alt="" /></li>
    
    <li><img src="http://proloser.github.com/AnythingSlider/images/slide-env-2.jpg" alt="" /></li>
    
</ul>

CSS

div.anythingSlider.activeSlider .thumbNav a.false,
div.anythingSlider.activeSlider .thumbNav a.false:hover { background: #555; }

JavaScript

$('#slider1').anythingSlider({
    startStopped: true,
    width: 300,
    height: 200
});

function settab(num, enable){
 var panel = $('.thumbNav a.panel' + num);
 if (enable){
  panel
   .removeClass('false')
   .unbind('click')
   .bind('click', function(){
    panel.closest('.anythingSlider').find('.anythingBase').data('AnythingSlider').gotoPage(num);
    return false;
   })
 } else {
  panel
   .addClass('false')
   .unbind('click focusin')
   .bind('click', function(){
    return false;
   })
 }
}

var link = true;
$('button').click(function(){
    link = !link;
    settab(3,link);
})