슬라이드 기능 안쓰고 배너 노출 채택완료
진용진
2년 전
조회 2,615
안녕하세요.
제가 그누보드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개
채택된 답변
+20 포인트
2년 전
다음과 같이 적용해 보시면 어떨까 합니다.
</p>
<p><script>
jQuery(function($){
var slider = $('.slide-wrap').show().bxSlider({
speed: 1000, // 슬라이딩 속도 (원하는 값으로 설정)
pagerCustom: '#bx_pager',
auto: false, // 자동 슬라이딩 비활성화
useCSS: false,
infiniteLoop: false, // 무한 루프 비활성화
});
});
</script>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 4개
�
진용진
2년 전
감사합니다 이제 자동으로 움직이지는 않네요!! 혹시 클릭하고 움직이면 메인배너가 움직이던데 이걸 고정 시키려면 bxslider 를 안써야 하는건가요??
�
웹메이킹
2년 전
네 맛습니다. bxslider를 사용하지 않으셔야 합니다.
참고하셔서 적용해 보세요
html
[code]
<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>
[/code]
css
[code]
.banner-wrap {
display: flex;
overflow: hidden;
}
.banner {
flex: 0 0 100%;
height: 300px; /* 배너의 높이를 조절하세요 */
background-size: cover;
background-position: center;
}
[/code]
JavaScript
[code]
<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>
[/code]
참고하셔서 적용해 보세요
html
[code]
<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>
[/code]
css
[code]
.banner-wrap {
display: flex;
overflow: hidden;
}
.banner {
flex: 0 0 100%;
height: 300px; /* 배너의 높이를 조절하세요 */
background-size: cover;
background-position: center;
}
[/code]
JavaScript
[code]
<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>
[/code]
�
진용진
2년 전
정말 감사드립니다!! 혹시 html 적어주신거 적용하기 위해 경로를 찾고 있는데 제가 사용하고 있는 테마에서 index 파일에서 찾아봤는데 banner 관련 코드가 없네요... 혹시 어떤 경로로 탐색해야 할까요??
�
웹메이킹
2년 전
index.php 파일에 배너 관련 부분에 최근게시물 형식이나 플러그인 형식으로 되어 있을 겁니다.
예를 들어 최근게시물 형식이면 해당 최근게시물 스킨 에서 수정 또는 플러그인일 경우 해당 플러그인 스킨에서 수정 하시면 될 듯 합니다.
예를 들어 최근게시물 형식이면 해당 최근게시물 스킨 에서 수정 또는 플러그인일 경우 해당 플러그인 스킨에서 수정 하시면 될 듯 합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인