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
$(document).ready(function(){
var slider = $('.bxslider').bxSlider();
// 변경된 슬라이더 채크
slider.on('slide', function(event, slideIndex, slideElement) {
console.log('현재 활성화된 슬라이드 번호: ' + slideIndex);
});
});
이렇게 현재 몇번째 슬라이드인지 알수 있습니다.
따라서 index 에 따른 별도의 클래스를 부여하여 css 조정이 가능합니다.
bxSlider의 onSlideAfter 콜백을 사용하여 현재 활성화된 슬라이드 정보를 가져오고,
이를 기반으로 이전/다음 버튼의 텍스트를 업데이트하면서,
슬라이드에 active 클래스를 동적으로 추가하여 스타일을 조정하는 방안입니다.
$(document).ready(function () {
var slider = $('.bxslider').bxSlider({
onSlideAfter: function ($slideElement, oldIndex, newIndex) {
// 활성 슬라이드 텍스트 가져오기
const activeText = $slideElement.text().trim();
// 버튼 텍스트 업데이트
$('.bx-prev').text(`${activeText} 게시판 이전`);
$('.bx-next').text(`${activeText} 게시판 다음`);
// 모든 슬라이드에서 'active' 클래스 제거
$('.bxslider > li').removeClass('active');
// 현재 활성 슬라이드에 'active' 클래스 추가
$($slideElement).addClass('active');
}
});
// 초기 실행: 첫 번째 슬라이드 기준으로 버튼 텍스트 설정
const initialText = $('.bxslider > li:first-child').text().trim();
$('.bx-prev').text(`${initialText} 게시판 이전`);
$('.bx-next').text(`${initialText} 게시판 다음`);
$('.bxslider > li:first-child').addClass('active');
});
＊CSS 적용 예시
.bxslider > li.active {
border: 2px solid blue; /* 활성 슬라이드에 파란 테두리 */
font-weight: bold; /* 강조 표시 */
}