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 | ||
| 2454 |
|
1년 전 | 1124 | |
| 2453 | 1년 전 | 1057 | ||
| 2452 | 1년 전 | 1623 | ||
| 2451 | 1년 전 | 1155 | ||
| 2450 | 1년 전 | 958 | ||
| 2449 | 1년 전 | 1338 | ||
| 2448 | 1년 전 | 884 | ||
| 2447 | 1년 전 | 1339 | ||
| 2446 | 1년 전 | 1416 | ||
| 2445 | 1년 전 | 1129 | ||
| 2444 | 1년 전 | 1284 | ||
| 2443 | 1년 전 | 1678 | ||
| 2442 | 1년 전 | 1488 | ||
| 2441 | 1년 전 | 1071 | ||
| 2440 | 1년 전 | 1179 | ||
| 2439 | 1년 전 | 4621 | ||
| 2438 | 1년 전 | 1078 | ||
| 2437 | 1년 전 | 1119 | ||
| 2436 | 1년 전 | 928 | ||
| 2435 | 1년 전 | 1562 | ||
| 2434 | 1년 전 | 1456 | ||
| 2433 | 1년 전 | 1019 | ||
| 2432 |
|
1년 전 | 613267 | |
| 2431 |
|
1년 전 | 1097 | |
| 2430 |
|
1년 전 | 1708 | |
| 2429 | 1년 전 | 1313 | ||
| 2428 | 1년 전 | 1273 | ||
| 2427 | 1년 전 | 1150 | ||
| 2426 | 1년 전 | 1112 | ||
| 2425 |
뽕엄능브라
|
1년 전 | 1235 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기