테스트 사이트 - 개발 중인 베타 버전입니다

부투스트랩의 슬라이더에 표시항목을 하나 더 만들수는 없을까요? 채택완료

지우파파 7년 전 조회 1,690

클릭해주셔서 감사합니다!

 

오늘은 안개가 무지 심하군요.

 

다름이 아니오라 부트스트랩 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을 했더니 하나만 작동하고 하나는 안되더라구요.

 

방법이 있을까요???

 

그누보드 회원님들 덕분에 많은걸 알고 갑니다.

 

항상 감사합니다!!!

 

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
j
7년 전

data-target에 슬라이더를 감싸는 div의 id가 호출되고 있어요 

id 가 중복되니 안되는 것같습니다. 새로운 ol 은 새로운 id로 감싸시고  data-target에도 호출해주세요. 

그래도 안된다면 jquery 함수도 복사해서 새로 지정하셔야 할 것같아요 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

지우파파
7년 전
답변 감사합니다!!! 새해 복 많이 받으셔요~!!

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인