carousel slider
첨부파일 https://eond.com/jquery/399400

HTML

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us">
<div class="carousel-caption">
<h3>
Headline</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
<!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/e67e22/ffffff&text=Projects">
<div class="carousel-caption">
<h3>
Headline</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
<!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/2980b9/ffffff&text=Portfolio">
<div class="carousel-caption">
<h3>
Headline</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
<!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/8e44ad/ffffff&text=Services">
<div class="carousel-caption">
<h3>
Headline</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
<ul class="nav nav-pills nav-justified">
<li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem
ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum
dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum
dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum
dolor sit</small></a></li>
</ul>
</div>
<!-- End Carousel -->
</div>


CSS

body
{
padding-top: 20px;
}
#myCarousel .nav a small
{
display: block;
}
#myCarousel .nav
{
background: #eee;
}
.nav-justified > li > a
{
border-radius: 0px;
}
.nav-pills>li[data-slide-to="0"].active a { background-color: #16a085; }
.nav-pills>li[data-slide-to="1"].active a { background-color: #e67e22; }
.nav-pills>li[data-slide-to="2"].active a { background-color: #2980b9; }
.nav-pills>li[data-slide-to="3"].active a { background-color: #8e44ad; }


JS

$(document).ready( function() {
$('#myCarousel').carousel({
interval:   4000
});

var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
clickEvent = true;
$('.nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.nav').children().length -1;
var current = $('.nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.nav li').first().addClass('active');
}
}
clickEvent = false;
});
});

코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 142 articles in 2 / 8 pages
번호 제목 제목 날짜날짜
공지 슬라이더 스크립트 4종 2016/07/03 0
공지 jQuery 추천 사이트 2015/06/08 0
121 [슬라이더 플러그인] slick slider 사용방법 2018/08/15 0
120 [기초활용] [jQuery] each, loop, setInterval 활용 파일 2018/05/28 0
119 [팁] 자바스크립트 키코드, 키 이벤트 2018/05/27 0
118 [기초활용] 모달창 만들기 2017/12/21 0
117 [기초활용] Modal (모달창) 2018/05/27 0
116 [팁] [jQuery] 페이징 만들기 2015/08/31 0
115 [슬라이더 플러그인] 병풍 스크립트 2018/04/19 0
현재글 [슬라이더 플러그인] carousel slider 2018/04/17 0
113 [화면전환 스크롤] Delighters : CSS Animations on Page Scroll 2018/04/13 0
112 [기초활용] Add smooth scrolling to page anchors 2018/04/13 0
111 [기타 플러그인] macy.js (masonry 벽돌 레이아웃) 파일 2018/01/15 0
110 [슬라이더 플러그인] Camera Slider jquery 2015/11/15 0
109 [기초활용] jquery popup layer 2017/12/21 0
108 [기초활용] jquery 가나다 정렬 2017/12/20 0
107 [기초활용] [jquery] 폰트 사이즈 조절 버튼 페이지 이동시에 변수 초기화 문제 2017/12/20 0
106 [기초활용] 스크롤 내려오면 멈추는 스크립트 2017/11/16 0
105 $.browser.msie undefined 오류 2017/08/23 0
104 [화면전환 스크롤] 패럴렉스 스크롤링 플러그인 2017/03/31 0
103 [기초활용] 비밀글 jQuery style 찾기 2017/03/31 0

해시태그 디렉터리