게시판
# 갤러리 스킨을 기본으로 한 학원 선생님 소개 게시판입니다. * skin/gallery 스킨을 기본으로 해서 변형한것입니다. 따라서 이미지폭, 높이, 한페이지에 나오는 이미...
어디에나 쉽게 넣을 수 있는 슬라이더(bxslider)
슬라이더로 많이 이용하고, 쉽게 적용할 수 있는 bxslider를 이용해서 슬라이더를 넣는 방법입니다.
index.php / head.php / theme/basic/index.php / 게시판(list.skin.php/view.skin.php/write.skin.php)등 어디에도 쉽게 넣을 수 있습니다.
이전에 비슷한 내용을 올렸었는데 theme에서는 제대로 작동하지 않아서 테스트해보고 다시 올린것 입니다.
압축을 풀면 나오는 jquery_bxslider폴더를 root에 올립니다.(adm과 같은 레벨)
아래 코드를 슬라이더를 넣고자 하는 위치에 붙여넣기 합니다. 경로는 root/jquery_bxslider폴더 에서 가져오는 것으로 정하시면 됩니다.(예: theme/private_school/index.php 의 경로)
<!--bxslider start -->
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="../../jquery_bxslider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="../../jquery_bxslider/jquery.bxslider.css" rel="stylesheet" />
<ul class="bxslider">
<li><img src="../../jquery_bxslider/images/hakmundang/1.png"></li>
<li><img src="../../jquery_bxslider/images/hakmundang/2.png" /></li>
<li><img src="../../jquery_bxslider/images/hakmundang/3.png" /></li>
<li><img src="../../jquery_bxslider/images/hakmundang/4.png" /></li>
</ul>
<script> $(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'vertical',
slideMargin: 5
});
});
</script>
<!--bxslider end -->
* 테마를 사용하시는 경우에도 root에 올리고 링크해야합니다. jquery_bxslider폴더를 테마폴더안에 넣고 적용해보니 그림이 주루룩나오고 적용이 안되는 것을 확인했습니다.
* 한 화면에 두개이상의 슬라이드를 사용하는경우에 움직임을 다르게 (하나는 수동, 하나는 자동) 할 경우에는 <ul class="bxslider">의 .bxslider이름을 서로 다르게 하면됩니다.
* image대신에 동영상을 넣는 경우는 <il>안에 <video>를 사용하여 넣으면 됩니다.
<li>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</li>
- 동영상확장자(mp4를 많이사용해서 .ogg를 생략해도 재생이 됩니다)
.ogg: Developed by the Xiph.Org Foundation. Supported by HTML5.
.mp4: Developed by the Moving Pictures Expert Group. Based on QuickTime. Commonly used in newer video cameras and TV hardware. Supported by all HTML5 browsers. Recommended by YouTube.
* image대신에 youtube영상을 넣는 경우: <li>안에 <iframe>을 사용하여 넣으면 됩니다. 유튜브화면에서 마우스우클릭- 소스코드복사하면 유튜브소스가 <iframe>으로 복사됩니다. 이것을 <li>안에 붙여넣기 하면됩니다. 크기나 배치등은 <style>로 조정하면 됩니다.
<li>
<li><iframe style="width: 500px; height: 300px; ; margin-left:100px;" src="https://www.youtube.com/embed/ve0EKXjlIO0" frameborder="0" gesture="media" allowfullscreen></iframe>
</li>
* theme/private_school/index.php에 넣는 경우
* 게시판에 슬라이드 넣는 경우(
* 자세한 사용법은 첨부한 메모장을 참고하시기 바랍니다.
감사합니다.
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
그누보드5 스킨
좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.
갤러리
목록에서 이미지&제목&내용이 보이는 롤링 갤러리입니다. 사용자는 볼수만 있게 목록권한 1만 주시고 나머지는 관리자 권한 주시면 됩니다. 관리자는 아래에 목록이 따로 보이므로 글...
갤러리
안녕하세요 오늘 2년전에 만든 갤러리 스킨을 올려봅니다. 본 스킨은 모차마님의 베이직 갤러리를 바탕하여 만든 스킨이므로 먼저 모차마님 한테 감사의 인사를 드립니다. K ...
게시판
그림자 밟기 님의 주간 일정 게시판 (비동기) 스킨을 이용하여 식단표를 만들어 보았습니다. https://sir.kr/g5_skin/16464?sfl=wr_subject%7C%7C...
전체검색
슬라이더로 많이 이용하고, 쉽게 적용할 수 있는 bxslider를 이용해서 슬라이더를 넣는 방법입니다. index.php / head.php / theme/basic/index.p...
게시판
https://sir.kr/qa/210890 글을 등록할 게시판을 선택하여 글을 올릴 수는 없나요?
갤러리
https://sir.kr/g5_skin/12821?sca=%EA%B0%A4%EB%9F%AC%EB%A6%AC&page=2 위토즈 님 스킨 변형해서 올려봅니다 ~ 썸네일 하...
레이아웃
기존에 올린 스킨에 팝업창이동하기 추가에 마우스오버시 화살표로 이동가능 표시 추가 팝업창 하단에 보면 " 00시간 동안 다시 열지 않습니다 " 와 " 닫기 " 버튼이 있는데 팝업창...
게시판
* 유튜브동영상을 볼수 있는 차량매매게시판입니다. * 유튜브동영상 url을 글쓰기에서 입력하면 list.skin.php,에서는 썸네일로 나타나며, view.skin.php에서는 큰...
게시판
수정요청이 많아 부득이하게 자료를 내리게 되었습니다. 사용해주셔서 감사합니다.
댓글 61개
혹시 반응형일때 브라우져창크기를 줄이면 이미지 화살표버튼 위치가 아래로 내려가고 메인슬라이드이미지는 안보였다가 새로고침 또는 이미지 오토로딩으로 될때 다시 사이즈가 정상적으로 보이는데 저만 그런건가요?
감사합니다.
이미지를 어떻게 넣나요 ?
그리고 <li><img src="jquery_bxslider/images/suzy.png"></li> 식으로 불러옵니다
아주 멋집니다 수고 하세요~~
공유 감사드려요 ^^
감사합네당^&^
해결 했네요ㅎㅎ
감사합니다.
<script> $(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 15000,
});
});
</script>