[sergey24]

<li><a onclick="_click(1); return false;" href="#" id="offic">Официанты</a></li>
<li><a onclick="_click(2); return false;" href="#" id="barm">Бармены</a></li>
<li><a onclick="_click(3); return false;" href="#" id="povara">Повара</a></li>

<div id="item1" style="display:none;">Тут слайдер 1</div>
<div id="item2" style="display:none;">Тут слайдер 2</div>
<div id="item3" style="display:none;">Тут слайдер 3</div>

<script type="text/javascript">
    $(document).ready(function(){
       	$('.slider-for').slick({
  		slidesToShow: 1,
  		slidesToScroll: 1,
  		arrows: false,
  		fade: true,
  		asNavFor: '.slider-nav'
		});
		$('.slider-nav').slick({
  		slidesToShow: 3,
  		slidesToScroll: 1,
  		asNavFor: '.slider-for',
  		focusOnSelect: true
		});
    });
  	</script>

    <script>$("#barm").click( function(){ $('#item2').resize(); } );</script>
    <script>$("#povara").click( function(){ $('#item3').resize(); } );</script>

	<script type="text/javascript">
		var _click = function () {
        var b = 1;
        return function (c) {
            var a = document.getElementById("item" + b);
            c == b && (a.style.display = "none" == a.style.display ? "" : "none");
            c != b && (a.style.display = "none", a = document.getElementById("item" + c), a.style.display = "", b = c)
        }
    	}();
    	window.onload = function() {
    	_click(1)
 		}

	</script>

Вроде как весь нужный код