list가 active되었을때 버튼이름 변경
본문
안녕하세요 질문드리고 싶은게 있어서 드립니다.
구조는 다 보여드리기에 너무 길어서 짧게 보여드립니다
이런 구조의 리스트가 있고
<ul>
<li class="active"><a href="javascript:void(0);" title="선택됨">전체</a>
<li class=""><a href="javascript:void(0);" title="">보도자료</a>
<li class=""><a href="javascript:void(0);" title="">행사정보</a>
</ul>
<div class="bx-controls bx-has-controls-direction"><div class="bx-controls-direction"><a class="bx-prev" href="javascript:void(0);">Prev</a><a class="bx-next" href="javascript:void(0);">Next</a></div></div>
이런 bx-slider 버튼이 있는데 a태그 안에 내용을
수정후
<div class="bx-controls bx-has-controls-direction"><div class="bx-controls-direction"><a class="bx-prev" href="javascript:void(0);">전체 게시판 이전</a><a class="bx-next" href="javascript:void(0);">전체 게시판 다음</a></div></div>
active되는 친구 이름으로 acitve게시판이름 + 게시판 이전
이런식으로 수정하고 싶은데 js실력이 모자라서 요청드립니다.
bx슬라이더라 소스를 긁어와도 넣을수가 없더라고요
가능할까요?
답변 2
이렇게 현재 몇번째 슬라이드인지 알수 있습니다.
따라서 index 에 따른 별도의 클래스를 부여하여 css 조정이 가능합니다.
bxSlider의 onSlideAfter 콜백을 사용하여 현재 활성화된 슬라이드 정보를 가져오고,
이를 기반으로 이전/다음 버튼의 텍스트를 업데이트하면서,
슬라이드에 active 클래스를 동적으로 추가하여 스타일을 조정하는 방안입니다.
*CSS 적용 예시