Company 테마 Mobile 메인 슬라이딩 이미지 수정 예
{이미지: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
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
댓글 7개
10년 전
좋은방법이네요 ^^
kanggoo
10년 전
감사합니다 많은 도움이 되었습니다.!
10년 전
감사합니다 덕분해 해결 했어요..
10년 전
모바일 이미지는 네가지 변경이 되었는데 돌아가지 않고 스톱되어 있고요, 터치로 드래그하면 넘어가네요. 자동으로 돌아가게 하려면 어느부분 추가.수정을 해야하는지 부탁드립니다..
10년 전
내용 추가했습니다.
8년 전
감사합니다.
ascii
8년 전
멋집니다. 감사합니다.
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4402 | ||
| 624 | 9년 전 | 8360 | ||
| 623 | 9년 전 | 7028 | ||
| 622 |
|
9년 전 | 10746 | |
| 621 | 9년 전 | 6206 | ||
| 620 | 9년 전 | 6297 | ||
| 619 | 9년 전 | 8202 | ||
| 618 | 9년 전 | 38495 | ||
| 617 | 9년 전 | 8373 | ||
| 616 | 9년 전 | 10643 | ||
| 615 | 9년 전 | 16873 | ||
| 614 | 9년 전 | 5820 | ||
| 613 |
|
9년 전 | 7945 | |
| 612 | 9년 전 | 4983 | ||
| 611 | 9년 전 | 5302 | ||
| 610 |
|
9년 전 | 7618 | |
| 609 | 9년 전 | 9293 | ||
| 608 |
KeepItSimpleStyle
|
9년 전 | 6235 | |
| 607 |
|
9년 전 | 10714 | |
| 606 |
|
9년 전 | 12586 | |
| 605 |
|
9년 전 | 5485 | |
| 604 |
|
9년 전 | 10162 | |
| 603 |
KeepItSimpleStyle
|
9년 전 | 6361 | |
| 602 |
|
9년 전 | 5777 | |
| 601 | 9년 전 | 18298 | ||
| 600 | 9년 전 | 7356 | ||
| 599 | 9년 전 | 4420 | ||
| 598 | 9년 전 | 5361 | ||
| 597 |
|
9년 전 | 6642 | |
| 596 |
|
9년 전 | 6110 | |
| 595 | 9년 전 | 12210 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기