My default setting for the first tab is .ui-tabs-hide, causing it to be hidden along with all other tabs.
Here's my code snippet:
<script>
$(document).ready(function(){
$("#slide-container").tabs({ fx: { opacity: 'toggle' } });
});
</script>
<article id="slide-container">
<ul id="thumbnails">
<li id="move-previous"><a href="#"><img src="images/previous.png" width="32" height="64" alt="" /></a></li>
<li><a href="#impact-homepage"><img src="temp/temp.png" width="100" height="64" alt="" /></a></li>
<li><a href="#impact-inspiration"><img src="temp/temp.png" width="100" height="64" alt="" /></a></li>
<li id="move-next"><a href="#"><img src="images/next.png" width="32" height="64" alt="" /></a></li>
</ul>
<div class="slide homepage" id="impact-homepage">
<img src="images/website-screenshots/impact-homepage.jpg" width="485" height="296" alt="" />
</div>
<div class="slide" id="impact-inspiration">
<img src="images/website-screenshots/impact-inspiration.jpg" width="960" height="511" alt="" />
</div>
<ul id="bottom-information">
<li class="classification">Website <a href="#">Visit Website</a></li>
<li class="slide-number"><a href="#"><</a> 1/4 <a href="#">></a></li>
</ul>
</article>
Do you have any thoughts or suggestions?