부투스트랩의 슬라이더에 표시항목을 하나 더 만들수는 없을까요?
본문
클릭해주셔서 감사합니다!
오늘은 안개가 무지 심하군요.
다름이 아니오라 부트스트랩 3.3.7버전을 쓰고 있는데요.
아래 빨간색 네모 친곳을 하나 더 생성하여 좌측 상단에 넣고 싶은데요(총 2개)
아래 코드에 보시면 저부분이
<div id="carousel-main" class="carousel carousel-main slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-main" data-slide-to="0" class=""></li>
<li data-target="#carousel-main" data-slide-to="1" class="active"></li>
<li data-target="#carousel-main" data-slide-to="2" class=""></li>
<li data-target="#carousel-main" data-slide-to="3" class=""></li>
<li data-target="#carousel-main" data-slide-to="4" class=""></li>
<li data-target="#carousel-main" data-slide-to="5" class=""></li>
<li data-target="#carousel-main" data-slide-to="6" class=""></li>
<li data-target="#carousel-main" data-slide-to="7" class=""></li>
<li data-target="#carousel-main" data-slide-to="8" class=""></li>
<li data-target="#carousel-main" data-slide-to="9" class=""></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active left" style="">
<div class="carousel-caption">
<h3>첫번째 슬라이더</h3>
<p>슬라이더에 대한 설명을 입력해 주세요</p>
</div>
</div>
<div class="item next left" style="">
<div class="carousel-caption">
<h3>두번째 슬라이더</h3>
<p>슬라이더에 대한 설명을 입력해 주세요</p>
</div>
</div>
<div class="item" style="">
<div class="carousel-caption">
<h3></h3>
<p></p>
</div>
</div>
<div class="item" style="">
<div class="carousel-caption">
<h3></h3>
<p></p>
</div>
</div>
<div class="item" style="">
<div class="carousel-caption">
<h3></h3>
<p></p>
</div>
</div>
<div class="item" style="">
<div class="carousel-caption">
<h3></h3>
<p></p>
</div>
</div>
<div class="item" style="">
<div class="carousel-caption">
<h3></h3>
<p></p>
</div>
</div>
<div class="item" style="">
<div class="carousel-caption">
<h3></h3>
<p></p>
</div>
</div>
<div class="item" style="">
<div class="carousel-caption">
<h3></h3>
<p></p>
</div>
</div>
<div class="item" style="">
<div class="carousel-caption">
<h3></h3>
<p></p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-main" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">이전</span>
</a>
<a class="right carousel-control" href="#carousel-main" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">다음</span>
</a>
</div>
이코드중에
<ol class="carousel-indicators">
<li data-target="#carousel-main" data-slide-to="0" class=""></li>
<li data-target="#carousel-main" data-slide-to="1" class="active"></li>
<li data-target="#carousel-main" data-slide-to="2" class=""></li>
<li data-target="#carousel-main" data-slide-to="3" class=""></li>
<li data-target="#carousel-main" data-slide-to="4" class=""></li>
<li data-target="#carousel-main" data-slide-to="5" class=""></li>
<li data-target="#carousel-main" data-slide-to="6" class=""></li>
<li data-target="#carousel-main" data-slide-to="7" class=""></li>
<li data-target="#carousel-main" data-slide-to="8" class=""></li>
<li data-target="#carousel-main" data-slide-to="9" class=""></li>
</ol>
이부분인데요.
두개의 ol을 했더니 하나만 작동하고 하나는 안되더라구요.
방법이 있을까요???
그누보드 회원님들 덕분에 많은걸 알고 갑니다.
항상 감사합니다!!!
답변 1
data-target에 슬라이더를 감싸는 div의 id가 호출되고 있어요
id 가 중복되니 안되는 것같습니다. 새로운 ol 은 새로운 id로 감싸시고 data-target에도 호출해주세요.
그래도 안된다면 jquery 함수도 복사해서 새로 지정하셔야 할 것같아요
답변 감사합니다!!! 새해 복 많이 받으셔요~!!
