슬라이드 기능 안쓰고 배너 노출
본문
안녕하세요.
제가 그누보드5 설치 후 테마를 다운받아 홈페이지를 작업하고 있는데
다운받은 테마 (Cherry Theme) 을 다운 받아 적용 시키니 메인 배너가 보이지 않아 이미지를 넣고
적용하니 자동으로 슬라이드가 되더라고요?? 그래서 mainbanner.10.skin.php 에 들어가
해당 bxslider 부분을 지우니 메인 배너가 아예 보이지 않아서 speed를 0으로 설정하니 이젠 클릭하고 옆으로
넘어가지더군요.... 제가 원하는 기능은 배너 하나만 띄우고 싶은데 어떻게 하면 하나만 띄울 수 있을까요?
아래는 해당 스크립트 입니다!!
<script>
jQuery(function($){
var slider = $('.slide-wrap').show().bxSlider({
speed:00,
pagerCustom: '#bx_pager',
auto: false,
useCSS : false,
onSlideAfter : function(){
slider.startAuto();
}
});
});
</script>
답변 1
다음과 같이 적용해 보시면 어떨까 합니다.
<script>
jQuery(function($){
var slider = $('.slide-wrap').show().bxSlider({
speed: 1000, // 슬라이딩 속도 (원하는 값으로 설정)
pagerCustom: '#bx_pager',
auto: false, // 자동 슬라이딩 비활성화
useCSS: false,
infiniteLoop: false, // 무한 루프 비활성화
});
});
</script>
감사합니다 이제 자동으로 움직이지는 않네요!! 혹시 클릭하고 움직이면 메인배너가 움직이던데 이걸 고정 시키려면 bxslider 를 안써야 하는건가요??
네 맛습니다. bxslider를 사용하지 않으셔야 합니다.
참고하셔서 적용해 보세요
html
<div class="banner-wrap">
<div class="banner" style="background-image: url('이미지_경로');"></div>
<div class="banner" style="background-image: url('이미지_경로');"></div>
<div class="banner" style="background-image: url('이미지_경로');"></div>
<!-- 추가 배너를 필요한 만큼 추가합니다 -->
</div>
css
.banner-wrap {
display: flex;
overflow: hidden;
}
.banner {
flex: 0 0 100%;
height: 300px; /* 배너의 높이를 조절하세요 */
background-size: cover;
background-position: center;
}
JavaScript
<script>
document.addEventListener("DOMContentLoaded", function() {
const banners = document.querySelectorAll(".banner");
let currentBanner = 0;
function showBanner(index) {
for (let i = 0; i < banners.length; i++) {
banners[i].style.display = "none";
}
banners[index].style.display = "block";
}
// 처음에 첫 번째 배너를 표시
showBanner(currentBanner);
// 배너를 클릭할 때 다음 배너로 이동
for (let i = 0; i < banners.length; i++) {
banners[i].addEventListener("click", function() {
currentBanner = (currentBanner + 1) % banners.length;
showBanner(currentBanner);
});
}
});
</script>
정말 감사드립니다!! 혹시 html 적어주신거 적용하기 위해 경로를 찾고 있는데 제가 사용하고 있는 테마에서 index 파일에서 찾아봤는데 banner 관련 코드가 없네요... 혹시 어떤 경로로 탐색해야 할까요??
index.php 파일에 배너 관련 부분에 최근게시물 형식이나 플러그인 형식으로 되어 있을 겁니다.
예를 들어 최근게시물 형식이면 해당 최근게시물 스킨 에서 수정 또는 플러그인일 경우 해당 플러그인 스킨에서 수정 하시면 될 듯 합니다.