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 | ||
| 444 | 10년 전 | 9065 | ||
| 443 | 10년 전 | 7053 | ||
| 442 |
|
10년 전 | 9544 | |
| 441 | 10년 전 | 9006 | ||
| 440 |
블랙앤화이트
|
10년 전 | 10104 | |
| 439 | 10년 전 | 8892 | ||
| 438 | 10년 전 | 10200 | ||
| 437 | 10년 전 | 9624 | ||
| 436 | 10년 전 | 10008 | ||
| 435 | 10년 전 | 6342 | ||
| 434 | 10년 전 | 13709 | ||
| 433 | 10년 전 | 8291 | ||
| 432 | 10년 전 | 7005 | ||
| 431 | 10년 전 | 20662 | ||
| 430 | 10년 전 | 11393 | ||
| 429 | 10년 전 | 4581 | ||
| 428 | 10년 전 | 10831 | ||
| 427 | 10년 전 | 9706 | ||
| 426 | 10년 전 | 10269 | ||
| 425 | 10년 전 | 19820 | ||
| 424 | 10년 전 | 10972 | ||
| 423 | 10년 전 | 6593 | ||
| 422 |
untitled
|
10년 전 | 11673 | |
| 421 | 10년 전 | 23217 | ||
| 420 | 10년 전 | 15548 | ||
| 419 |
wkpark
|
10년 전 | 15115 | |
| 418 | 10년 전 | 11393 | ||
| 417 | 10년 전 | 10697 | ||
| 416 |
|
10년 전 | 13349 | |
| 415 | 10년 전 | 8829 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기