탈

Company 테마 Mobile 메인 슬라이딩 이미지 수정 예

· 2015-08-18 (화) 00:54:30 · 14121 · 7
2015.11.11_01.PNG
{이미지:0}


theme/company/css/mobile.css

[code].swiper-slide {background:url(../img/main_bn.jpg) no-repeat 50% 50%;background-size: cover;height:330px;[/code]
를...

[code].swiper-slide {background-position: center;background-size: cover;height: 330px;[/code]
로 수정합니다.
수정하지 않고 그냥 둬도 슬라이드에 영향을 끼치지는 않네요. 뭐지~~ ( ")


theme/company/mobile/index.php

[code]<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(http://liberta1980.co-story.net/theme/company/img/Hashima_Island_01.jpg)">
<div class="bn_txt">
<h2>Hashima Island <br></h2>
<p>Native name: 端島<br>Nickname: Battleship Island</p>
</div>
</div>
<div class="swiper-slide" style="background-image:url(http://liberta1980.co-story.net/theme/company/img/Hashima_Island_02.jpg)">
<div class="bn_txt">
<h2>Hashima Island <br></h2>
<p>Native name: 端島<br>Nickname: Battleship Island</p>
</div>
</div>
<div class="swiper-slide" style="background-image:url(http://liberta1980.co-story.net/theme/company/img/Hashima_Island_03.jpg)">
<div class="bn_txt">
<h2>Hashima Island <br></h2>
<p>Native name: 端島<br>Nickname: Battleship Island</p>
</div>
</div>
<div class="swiper-slide" style="background-image:url(http://liberta1980.co-story.net/theme/company/img/Hashima_Island_04.jpg)">
<div class="bn_txt">
<h2>Hashima Island <br></h2>
<p>Native name: 端島<br>Nickname: Battleship Island</p>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>[/code]
이렇게 백그라운드 이미지 경로를 스타일로 입력해줍니다.
PC 메인 수정 때는 class에 연번을 줬습니다만, 여기서는 손대지 않습니다.



이미지를 자동으로 슬라이딩 시키려면...

theme/company/mobile/index.php

[code]<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true
});
</script>[/code]
를

[code]<script>
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true,
speed: 1000,
autoplay: 5000,
loop: true,
autoResize: true
})
$('.arrow-left').on('click', function(e){
e.preventDefault()
mySwiper.swipePrev()
})
$('.arrow-right').on('click', function(e){
e.preventDefault()
mySwiper.swipeNext()
})
</script>[/code]
로 수정합니다.

더 자세한 옵션은 아래 주소를 참고하세요.

http://www.idangero.us/swiper/api/#.VkMTxLfhCUk

첨부파일

2015.11.11_01.PNG (301.9 KB)
19회 2015-11-11 19:56
|

댓글 7개

좋은방법이네요 ^^
감사합니다 많은 도움이 되었습니다.!
2015-09-02 (수) 23:53:55
감사합니다 덕분해 해결 했어요..
모바일 이미지는 네가지 변경이 되었는데 돌아가지 않고 스톱되어 있고요, 터치로 드래그하면 넘어가네요. 자동으로 돌아가게 하려면 어느부분 추가.수정을 해야하는지 부탁드립니다..
2015-11-11 (수) 19:28:54
내용 추가했습니다.
감사합니다.
멋집니다. 감사합니다.
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,789건
+
제목 글쓴이 날짜 조회
15-09-14 조회 1.2만
15-09-09 조회 1만
15-09-08 조회 2.1만
15-09-03 조회 1.2만
15-08-31 조회 9,861
15-08-31 조회 1.2만
15-08-30 조회 1.2만
15-08-30 조회 1.3만
15-08-30 조회 1.2만
15-08-27 조회 1.3만
15-08-26 조회 1.2만
15-08-22 조회 1.3만
15-08-21 조회 9,045
15-08-20 조회 1.7만
15-08-18 조회 1.1만
15-08-18 조회 9,694
15-08-18 조회 2.4만
15-08-18 조회 1.4만
15-08-16 조회 7,250
15-08-13 조회 1.4만
15-08-13 조회 1.3만
15-08-12 조회 1.3만
15-08-10 조회 2.3만
15-08-10 조회 1.4만
15-08-07 조회 9,330
15-08-04 조회 1.4만
15-08-03 조회 2.6만
15-07-27 조회 1.8만
15-07-19 조회 1.8만
15-07-17 조회 1.4만