2
여러 개의 텍스트/탭 슬라이더 jquery 및 2 개의 버튼이 있습니다 (다음) - 숨기기 버튼 코드 javascrpit에서 편집해야합니다. 마지막 자식/탭 첫 아이/탭 숨기기 버튼 (이전)는 내가 당신의 JS 이미 버튼에 "장애인"클래스를 추가하는 것으로 나타났습니다 블로거첫 번째 자식의 버튼 prev 숨기기
$(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">« 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 »</a>
</div>