f

Company 테마 Mobile 메인 슬라이딩 이미지 수정 예

2015.11.11_01.PNG
{이미지: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

첨부파일

2015.11.11_01.PNG (301.9 KB)
19회 2015-11-11 19:56
|

댓글 7개

좋은방법이네요 ^^
감사합니다 많은 도움이 되었습니다.!
감사합니다 덕분해 해결 했어요..
모바일 이미지는 네가지 변경이 되었는데 돌아가지 않고 스톱되어 있고요, 터치로 드래그하면 넘어가네요. 자동으로 돌아가게 하려면 어느부분 추가.수정을 해야하는지 부탁드립니다..
내용 추가했습니다.
멋집니다. 감사합니다.
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

+
제목 글쓴이 날짜 조회
10년 전 조회 9,115
10년 전 조회 7,091
10년 전 조회 9,594
10년 전 조회 9,063
10년 전 조회 1만
10년 전 조회 8,941
10년 전 조회 1만
10년 전 조회 9,711
10년 전 조회 1만
10년 전 조회 6,375
10년 전 조회 1.4만
10년 전 조회 8,337
10년 전 조회 7,028
10년 전 조회 2.1만
10년 전 조회 1.1만
10년 전 조회 4,591
10년 전 조회 1.1만
10년 전 조회 9,759
10년 전 조회 1만
10년 전 조회 2만
10년 전 조회 1.1만
10년 전 조회 6,637
10년 전 조회 1.2만
10년 전 조회 2.3만
10년 전 조회 1.6만
10년 전 조회 1.5만
10년 전 조회 1.1만
10년 전 조회 1.1만
10년 전 조회 1.3만
10년 전 조회 8,864