carousel 슬라이드배너/탭메뉴 질문

carousel 슬라이드배너/탭메뉴 질문

QA

carousel 슬라이드배너/탭메뉴 질문

본문


<div class="l_tabContainer"> //왼쪽메뉴
                                    <ul class="tabHead ">
                                        <li id="g1" class="cur active hte-font-on" onclick="img_change('1');" data-target="#carousel-slide-banner" data-slide-to="0">
                                            <a href="#"><span>A</span></a>
                                        </li>
                                        <li id="g2" class="cur hte-font-on"  onclick="img_change('2');" data-target="#carousel-slide-banner" data-slide-to="1">
                                            <a href="#"><span>B</span></a>
                                        </li>
                                        <li id="g3" class="cur hte-font-on" onclick="img_change('3');" data-target="#carousel-slide-banner" data-slide-to="2">
                                            <a href="#"><span>C</span></a>
                                        </li>
                                        <li id="g4" class="cur hte-font-on" onclick="img_change('4');" data-target="#carousel-slide-banner" data-slide-to="3">
                                            <a href="#"><span>D</span></a>
                                        </li>
                                    </ul>
                                </div>
 
<div class="r_tabContainer"> //오른쪽메뉴
                                    <ul class="tabHead">
                                        <li id="g5" class="cur" onclick="img_change('5');" data-target="#carousel-slide-banner" data-slide-to="4"><a href="#"><span>E</span></a></li>
                                        <li id="g6" class="cur" onclick="img_change('6');" data-target="#carousel-slide-banner" data-slide-to="5"><a href="#"><span>F</span></a></li>
                                        <li id="g7" class="cur" onclick="img_change('7');" data-target="#carousel-slide-banner" data-slide-to="6"><a href="#"><span>G</span></a></li>
                                        <li id="g8" class="cur" onclick="img_change('8');" data-target="#carousel-slide-banner" data-slide-to="7"><a href="#"><span>H<br>H</span></a></li>
                                    </ul>
                                </div>

 


<div class="item active">        //슬라이드 또는 클릭될때 보여질 메뉴
                                <a href="1" target="_blank"><img class="target_img2" src="1.jpg" ></a>
                            </div>
                            <div class="item">
                                <a href="2" target="_blank"><img class="target_img2" src="2.jpg"></a>
                            </div>
                            <div class="item">
                                <a href="3" target="_blank"><img class="target_img2" src="3.jpg"></a>
                            </div>
                            <div class="item">
                                <a href="4" target="_blank"><img class="target_img2" src="4.jpg" ></a>
                            </div>
                            <div class="item">
                                <a href="5" target=""><img class="target_img2" src="5.jpg"></a>
                            </div>
                            <div class="item">
                                <a href="6" target="_blank"><img class="target_img2" src="6.jpg"></a>
                            </div>
                            <div class="item">
                                <a href="7"><img class="target_img2" src="7.jpg" ></a>
                            </div>
                            <div class="item">
                                <a href="8"><img class="target_img2" src="8.jpg" ></a>
 </div>

 


        <script>
            $(function () {
                $('.slide-banner').carousel({ interval:3000 });  //슬라이드함수
            });
</script>

 

...

 

안녕하세요...

 

배너가 자동으로 돌아가기도 하고 누르면 이미지도 변경되도록 작업했는습니다

 

클릭할때 해당되는 메뉴에 active라는 클라스(색지정)를 줘서 자신이 어떤 메뉴를 선택했는지 보여주는건데요

 

이게 이미지가 자동 롤링할때는 메뉴에 active 지정되지 않아서  누르거나 누르기전 메뉴가 active로 고정됩니다. 이미지가 자동롤링때 왼쪽,오른쪽메뉴에도 클라스(active)주도록 하고싶은데 어떻게 해야할까요?

 

 

이 질문에 댓글 쓰기 :

답변 1

저도 carousel 슬라이드배너인데, 탭메뉴를 사용하진 않지만

 

.cur active hte-font-on

이 부분이 저는

.carousel-indicators .active

 

이걸로 작동이 잘 되고있거든요.

자동롤링시에 remove class가 작동이 잘 안되는 것 같은데

클래스명 바꾸시고 아래 스크립트로 적용 가능할지 모르겠네요

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

 

확실한 답변은 아니라서 혹시 참고라도 되실까 제가 사용하고 있는 슬라이더로 올려드립니다.

인디케이터부분이 active시 li background를 변경해주는건데 혹시나 도움이 될까 싶어서요.

 

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            아이템1
        </div>
        <div class="item">
            아이템2
        </div>
        <div class="item">
            아이템3
        </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev" style="background:none;"><span class="glyphicon glyphicon-chevron-left"><img src="이전이미지"></span></a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next" style="background:none;"><span class="glyphicon glyphicon-chevron-right"><img src="다음이미지"></span></a>
</div>
 

 

css

 

#myCarousel { float:left; position:relative; margin:0 auto; width:100%; height:100px; }
#myCarousel:after { display:block; content:""; clear:both; }
.carousel-indicators { position: absolute; bottom: 15px; left: 50%; z-index: 15; width: 60%; margin-left: -30%; padding-left: 0; list-style: none; text-align: center; cursor:default; font-size:0; }
.carousel-indicators li { display: inline-block; width: 20px; height: 20px; text-indent: -999px; border-radius: 10px;  background: #aaa; }
.carousel-indicators .active { background: #000; }
.carousel-inner { position: relative; overflow: hidden; width: 100%; margin:0 auto;  }
.carousel-inner>.item { display:none; position:relative; width:100%; height:100px; margin:0 auto; -webkit-transition: .5s ease-in-out left; transition: .5s ease-in-out left; }
.carousel-inner>.active, .carousel-inner>.next, .carousel-inner>.prev { display: block }
.carousel-inner>.active { left: 0; }
.carousel-inner>.next, .carousel-inner>.prev { position: absolute; top: 0; width: 100% }
.carousel-inner>.next { left: 100%; } .carousel-inner>.prev { left: -100%; }
.carousel-inner>.next.left, .carousel-inner>.prev.right { left: 0; }
.carousel-inner>.active.left { left: -100%; }
.carousel-inner>.active.right { left: 100%; }
.carousel-control { position: absolute; top: 0; left: 0; bottom: 0; width: 15%; opacity: .5; filter: alpha(opacity=70); }
.carousel-control.right { left: auto; right: 0; }
.carousel-control:hover { outline: 0; color: #fff; text-decoration: none; opacity: 1; filter: alpha(opacity=100) }
.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { position: absolute; top: 50%; z-index: 5; display: inline-block }
.carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left { left: 50%; top:43%; }
.carousel-control .icon-next, .carousel-control .glyphicon-chevron-right { right: 50%; top:43%; }

 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 59,285
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT