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 | ||
| 2424 | 1년 전 | 1143 | ||
| 2423 | 1년 전 | 1163 | ||
| 2422 |
|
1년 전 | 1839 | |
| 2421 | 1년 전 | 1065 | ||
| 2420 |
|
1년 전 | 1845 | |
| 2419 | 1년 전 | 1155 | ||
| 2418 | 1년 전 | 1143 | ||
| 2417 | 1년 전 | 931 | ||
| 2416 | 1년 전 | 1226 | ||
| 2415 | 1년 전 | 1110 | ||
| 2414 | 1년 전 | 997 | ||
| 2413 | 1년 전 | 1400 | ||
| 2412 |
|
1년 전 | 2004 | |
| 2411 | 1년 전 | 995 | ||
| 2410 | 1년 전 | 1862 | ||
| 2409 | 1년 전 | 1695 | ||
| 2408 | 1년 전 | 1192 | ||
| 2407 | 1년 전 | 1161 | ||
| 2406 | 1년 전 | 835 | ||
| 2405 | 1년 전 | 2045 | ||
| 2404 |
와칸다포에버
|
1년 전 | 1049 | |
| 2403 | 1년 전 | 1126 | ||
| 2402 |
뽕엄능브라
|
1년 전 | 2057 | |
| 2401 | 1년 전 | 1162 | ||
| 2400 | 1년 전 | 1263 | ||
| 2399 | 1년 전 | 1849 | ||
| 2398 | 1년 전 | 1581 | ||
| 2397 | 1년 전 | 1895 | ||
| 2396 | 1년 전 | 1261 | ||
| 2395 | 1년 전 | 1081 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기