Cacher le bouton prev dans le premier enfant

Question

J'ai plusieurs slider texte/tab jquery et 2 boutons ( next ) , ( prev ) - J'ai besoin de modifier le code javascrpit pour le bouton hide J'ai besoin d'un bouton hide ( next ) dans le dernier enfant/onglet et d'un bouton hide ( prev ) dans le premier enfant/onglet J'utilise blogger

$(function () {

    $("ul.large-tabs")
        .tabs("div.large-panes > div.large-pane")
        .slideshow({
            next: '.next',
            prev: '.prev'
        });

});

ul.table-tabs, ul.large-tabs {
    padding: 0;
    margin: 0;
}
ul.large-tabs {
    overflow: hidden;
    margin-top: 22px;
}
.large-tabs li {
    width: 230px;
    float: left;
    display: block;
    height:47px;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    text-decoration: none;
}
.large-tabs li h2 a {
    text-decoration:none;
    margin-left: 19px;
    font-family:"CoHeadlineRegular", Arial, Helvetica, Tahoma;
    font-size: 24px;
    color:white;
    margin-top:12px;
    text-shadow:#000000 0px 2px;
}
.large-tabs {
    text-align: center;
display:none;

}
.large-tabs h2 {
    font-size: 15px;
    text-shadow:#000000
}
.large-tabs li:nth-child(2) {
    margin: 0 3px;
}

.large-pane {
    display:none;
    overflow: hidden;
    position:absolute;
    top:0;
    left:0;
    padding:30px;   
}
.large-pane p {
    color:white;
    margin:0 0 21px;
}

.large-panes {
    background: #3e408a;
    clear: both;
    padding: 1px 13px 16px;
    width: 670px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-right-radius: 5px;
    position:relative;
    overflow:hidden;
    min-height:100px;
}

a.arrow {
    cursor:pointer;
    color:#fff;
    font-size:16px;
    position:absolute;
    bottom:8px;
    z-index:10;
}
a.rightarrow1 {   
    right:12px;    
}
a.leftarrow1 {
    left:12px;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

<!-- the tabs -->
<ul class="large-tabs">
    <li><h2><a href="#tab1">Tab 1</a></h2></li>
    <li><h2><a href="#tab2">Tab 2</a></h2></li>
    <li><h2><a href="#tab3">Tab 3</a></h2></li>
</ul>

<!-- tab "panes" -->
<div class="large-panes">   

    <!-- previous pane -->    
    <a class="prev arrow leftarrow1">&laquo; Prev</a>

    <!-- tab 1 -->
    <div id="div1" class="large-pane">
        <p>Tab 1 Text</p>        
    </div>

    <!-- tab 2 -->
    <div id="div2" class="large-pane">
        <p>Tab 2 Text</p>
    </div>

    <!-- tab 3 -->
    <div id="div3" class="large-pane">
        <p>Tab 3 Text</p>
    </div>

    <!-- next pane -->
    <a class="next arrow rightarrow1">Next &raquo;</a>

</div>

Answer 1

J'ai remarqué que votre JS ajoute déjà une classe "disabled" à vos boutons.

Ajout .disabled{display:none;} sur votre CSS fera sûrement l'affaire.

$(function () {

    $("ul.large-tabs")
        .tabs("div.large-panes > div.large-pane")
        .slideshow({
            next: '.next',
            prev: '.prev'
        });

});

ul.table-tabs, ul.large-tabs {
    padding: 0;
    margin: 0;
}
ul.large-tabs {
    overflow: hidden;
    margin-top: 22px;
}
.large-tabs li {
    width: 230px;
    float: left;
    display: block;
    height:47px;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    text-decoration: none;
}
.large-tabs li h2 a {
    text-decoration:none;
    margin-left: 19px;
    font-family:"CoHeadlineRegular", Arial, Helvetica, Tahoma;
    font-size: 24px;
    color:white;
    margin-top:12px;
    text-shadow:#000000 0px 2px;
}
.large-tabs {
    text-align: center;
display:none;

}
.large-tabs h2 {
    font-size: 15px;
    text-shadow:#000000
}
.large-tabs li:nth-child(2) {
    margin: 0 3px;
}

.large-pane {
    display:none;
    overflow: hidden;
    position:absolute;
    top:0;
    left:0;
    padding:30px;   
}
.large-pane p {
    color:white;
    margin:0 0 21px;
}

.large-panes {
    background: #3e408a;
    clear: both;
    padding: 1px 13px 16px;
    width: 670px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-right-radius: 5px;
    position:relative;
    overflow:hidden;
    min-height:100px;
}

a.arrow {
    cursor:pointer;
    color:#fff;
    font-size:16px;
    position:absolute;
    bottom:8px;
    z-index:10;
}
a.rightarrow1 {   
    right:12px;    
}
a.leftarrow1 {
    left:12px;
}
.disabled{display:none;}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

<!-- the tabs -->
<ul class="large-tabs">
    <li><h2><a href="#tab1">Tab 1</a></h2></li>
    <li><h2><a href="#tab2">Tab 2</a></h2></li>
    <li><h2><a href="#tab3">Tab 3</a></h2></li>
</ul>

<!-- tab "panes" -->
<div class="large-panes">   

    <!-- previous pane -->    
    <a class="prev arrow leftarrow1">&laquo; Prev</a>

    <!-- tab 1 -->
    <div id="div1" class="large-pane">
        <p>Tab 1 Text</p>        
    </div>

    <!-- tab 2 -->
    <div id="div2" class="large-pane">
        <p>Tab 2 Text</p>
    </div>

    <!-- tab 3 -->
    <div id="div3" class="large-pane">
        <p>Tab 3 Text</p>
    </div>

    <!-- next pane -->
    <a class="next arrow rightarrow1">Next &raquo;</a>

</div>