Hello,
I'm french, so my English might not be terrible ...
I want to use the vertical sliderkit naviguation. When I 1, no problem, but I want to have several.
I use boostrap for the tabs.
Here is my code:
<div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li class=""><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="home">
<div class="sliderkit-panel">
<div class="sliderkit-news">
<div class="sliderkit vertical-menulist">
<div class="sliderkit-nav">
<div class="sliderkit-nav-clip">
<ul>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> CFA : <?php echo tronqueTexte("1 Lorem ipsum dolor 1 Lorem ipsum dolor 1 Lorem ipsum dolor",38); ?></a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> CFA : Lorem ipsum dolor est</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> CFA : Lorem ipsum</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> CFA : Lorem ipsum dolor</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> CFA : 5 Lorem ipsum dolor est</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> CFA : Lorem ipsum</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> CFA : Lorem ipsum dolor</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> CFA : Lorem ipsum dolor est</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> CFA : Lorem ipsum</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> CFA : 10 Lorem ipsum dolor</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> CFA : Lorem ipsum dolor est</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> CFA : Lorem ipsum</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> CFA : Lorem ipsum dolor</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> CFA : Lorem ipsum dolor est</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> CFA : 15 Lorem ipsum</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> CFA : Lorem ipsum dolor</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> CFA : Lorem ipsum dolor est</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> CFA : Lorem ipsum</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> CFA : Lorem ipsum dolor</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> CFA : 20 Lorem ipsum dolor est</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> CFA : Lorem ipsum</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> CFA : Lorem ipsum dolor</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> CFA : Lorem ipsum dolor est</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> CFA : Lorem ipsum</a></li>
</ul>
</div>
<div class="sliderkit-controls">
<span class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a href="#" title="Previous"><span><img src="img/nav-fleche-gauche.png"></span></a></span>
|
<span class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a href="#" title="Next"><span><img src="img/nav-fleche-droite.png"></span></a></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade active in" id="profile">
<div class="sliderkit-panel">
<div class="sliderkit-news">
<div class="sliderkit vertical-menulist">
<div class="sliderkit-nav">
<div class="sliderkit-nav-clip">
<ul>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> DH : <?php echo tronqueTexte("1 Lorem ipsum dolor 1 Lorem ipsum dolor 1 Lorem ipsum dolor",38); ?></a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> DH : Lorem ipsum dolor est</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> DH : Lorem ipsum</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> DH : Lorem ipsum dolor</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> DH : 5 Lorem ipsum dolor est</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> DH : Lorem ipsum</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> DH : Lorem ipsum dolor</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> DH : Lorem ipsum dolor est</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> DH : Lorem ipsum</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> DH : 10 Lorem ipsum dolor</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> DH : Lorem ipsum dolor est</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> DH : Lorem ipsum</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> DH : Lorem ipsum dolor</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> DH : Lorem ipsum dolor est</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> DH : 15 Lorem ipsum</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> DH : Lorem ipsum dolor</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> DH : Lorem ipsum dolor est</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> DH : Lorem ipsum</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> DH : Lorem ipsum dolor</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> DH : 20 Lorem ipsum dolor est</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> DH : Lorem ipsum</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> DH : Lorem ipsum dolor</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> DH : Lorem ipsum dolor est</a></li>
<li><a style="color:#ffffff;" href="#" title="[link title]"><span style="color:#26bbe9;">15/01</span> DH : Lorem ipsum</a></li>
</ul>
</div>
<div class="sliderkit-controls">
<span class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a href="#" title="Previous"><span><img src="img/nav-fleche-gauche.png"></span></a></span>
|
<span class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a href="#" title="Next"><span><img src="img/nav-fleche-droite.png"></span></a></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- /example -->
<script type="text/javascript">
$(window).load(function(){ //$(window).load() must be used instead of $(document).ready() because of Webkit compatibility
// Slideshow > Standard
$(".vertical-menulist").sliderkit({
auto:false,
verticalnav:true,
shownavitems:10,
mousewheel:true,
scrolleasing:"easeOutExpo"
});
});
</script>
<script type="text/javascript">
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
</script>
The first works but the next no, nothing is displayed.
Can you help me?