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 | ||
| 384 | 10년 전 | 11421 | ||
| 383 | 10년 전 | 5929 | ||
| 382 | 10년 전 | 8694 | ||
| 381 |
사노라가노라
|
10년 전 | 6950 | |
| 380 | 10년 전 | 68690 | ||
| 379 | 10년 전 | 8254 | ||
| 378 | 10년 전 | 6279 | ||
| 377 | 10년 전 | 10958 | ||
| 376 | 10년 전 | 6491 | ||
| 375 |
untitled
|
10년 전 | 10218 | |
| 374 |
untitled
|
10년 전 | 22776 | |
| 373 |
untitled
|
10년 전 | 10805 | |
| 372 |
untitled
|
10년 전 | 15873 | |
| 371 |
untitled
|
10년 전 | 15257 | |
| 370 | 10년 전 | 7176 | ||
| 369 | 10년 전 | 9027 | ||
| 368 |
|
10년 전 | 5755 | |
| 367 | 10년 전 | 8511 | ||
| 366 | 10년 전 | 7811 | ||
| 365 | 10년 전 | 12141 | ||
| 364 | 10년 전 | 13156 | ||
| 363 | 10년 전 | 10239 | ||
| 362 | 10년 전 | 11442 | ||
| 361 | 10년 전 | 10712 | ||
| 360 | 10년 전 | 7462 | ||
| 359 |
|
10년 전 | 14474 | |
| 358 | 10년 전 | 11347 | ||
| 357 | 10년 전 | 32895 | ||
| 356 | 10년 전 | 14237 | ||
| 355 | 10년 전 | 12332 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기