severals vertical

19 views
Skip to first unread message

p.co...@gmail.com

unread,
Feb 10, 2014, 8:25:39 AM2/10/14
to slid...@googlegroups.com
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?
Reply all
Reply to author
Forward
0 new messages