<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>
Вроде как весь нужный код
