메인페이지 이미지 4개추가
본문
답변 4
테마 폴더 /css/default.css 파일에 추가
#main_bn li.bn_bg2{background:url(../img/main_bn-1.jpg) no-repeat 50% 50%; background-size: cover;display: table;-ms-filter: sizingMethod='scale' property}
#main_bn li.bn_bg3{background:url(../img/main_bn-2.jpg) no-repeat 50% 50%; background-size: cover;display: table;-ms-filter: sizingMethod='scale' property}
#main_bn li.bn_bg4{background:url(../img/main_bn-3.jpg) no-repeat 50% 50%; background-size: cover;display: table;-ms-filter: sizingMethod='scale' property}
index_head.php 파일 수정
<li class="bn_bg1">
...
...
</li>
<li class="bn_bg2">
...
...
</li>
<li class="bn_bg3">
...
...
</li>
<li class="bn_bg4">
...
...
</li>
이렇게 질문하시면 막막합니다.
제3자들은 해당 페이지의 구조와 소스자체를 모르는데
어디를 수정하시라고 조언을 해드릴수가 없군요 ...
그 메인페이지 전체 소스를 올려주시던지요..
index_head.php 부분에
<div id="main_bn">
<ul class="bn_ul">
<li class="bn_bg1">
<div class="bn_wr">
<div class="bn_txt">
<h2>신뢰와 나눔속에 <br>사랑받는 기업으로</h2>
<p>우리의 원대한 도전,<br>새로운 100년이 깨어납니다</p>
</div>
</div>
</li>
<li class="bn_bg1">
<div class="bn_wr">
<div class="bn_txt">
<h2>신뢰와 나눔속에 <br>사랑받는 기업으로</h2>
<p>우리의 원대한 도전,<br>새로운 100년이 깨어납니다</p>
</div>
</div>
</li>
<li class="bn_bg1">
<div class="bn_wr">
<div class="bn_txt">
<h2>신뢰와 나눔속에 <br>사랑받는 기업으로</h2>
<p>우리의 원대한 도전,<br>새로운 100년이 깨어납니다</p>
</div>
</div>
</li>
<li class="bn_bg1">
<div class="bn_wr">
<div class="bn_txt">
<h2>신뢰와 나눔속에 <br>사랑받는 기업으로</h2>
<p>우리의 원대한 도전,<br>새로운 100년이 깨어납니다</p>
</div>
</div>
</li>
</ul>
<div class="bn_btn">
<a href="#" class="unslider-arrow prev">Previous slide</a>
<a href="#" class="unslider-arrow next">Next slide</a>
</div>
</div>
<!--메인배너-->
<script>
$(function() {
$("#main_bn").unslider({
speed: 700, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
var unslider = $("#main_bn").unslider();
$('.unslider-arrow').click(function() {
var fn = this.className.split(' ')[1];
// Either do unslider.data('unslider').next() or .prev() depending on the className
unslider.data('unslider')[fn]();
});
});
</script>
과
css/default.css에
#main_bn .dots{position:absolute;bottom:70px;text-align:center;width:100%}
#main_bn .dots li{border:none;text-indent:-9999px;width:48px;height:4px;background:#3e3c52;overflow:hidden;display:inline-block;margin:0 ; zoom:1; *display:inline /*IE7 HACK*/; _display:inline; /*IE6 HACK*/}
#main_bn .dots li.active{background:#3d96d6}
부분이 관련소스입니다.
덕서리님이 말씀하신부분은 저두 알고있는데요...
제가 궁금한 것은 ... 제가 4개을 이미지을 만들어서 서버에 올렸습니다...
main_bn.jpg / main_bn-1.jpg / main_bn-2.jpg / main_bn-3.jpg 이렇게 4개의 이미지을
만들어서 서버에 올렸놨는데.... 소스을 수정을 어디서 어떻게 수정해야하는지
자세히 좀 설명 부탁드립니다.
