묻고답하기
swiper.js 관련 질문드립니다
2015.05.01 17:42
swiper.js 를 활용해서 아래처럼 슬라이드 메뉴를 만들었는데요
<div class="swiper-container" style='background:{$layout_info->nav_background};'>
<div class="swiper-wrapper">
<div loop="$val1['list']=>$key2,$val2" class="swiper-slide active"|cond="$val2['selected']" class="swiper-slide"|cond="!$val2['selected']">
<a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a>
</div>
</div>
</div>
문제는 링크가 활성화되면 그 링크가 있는 슬라이드가 화면에 고정되었으면 하는데 그냥 처음에 보는 화면으로만 나옵니다
말로 설명하려니 힘드네요 ㅠㅠ
대략 레이이아웃 이렇게 생겨먹었는데요
처음 화면에서 menu1~4까지 보이고 있는데 사실 옆으로 이동하면 menu5,6 이 더 있습니다
예를 들어 menu6이 열리면 그 화면에서 menu6이 보이게끔 하고 싶은데
menu1~4까지 보이는 화면으로 돌아옵니다
활성화된 메뉴가 있는 슬라이드로 고정이되게끔 설정할 수 있을까요??
제가 메뉴를 구상하는데 참고한 playfam.com 의 모바일 화면에서는 그게 되더라구요.. 같은 js 를 쓴 것 같은데
방법을 모르겠습니다 ㅠㅠ 제작자 포럼에 질문을 남기기에는 영어실력이 너무 약하고..
xe의 고수님들께 지도를 부탁드립니다 (__)
댓글 10
-
Fair
2015.05.05 16:59
-
시니시즘
2015.05.05 20:06
무슨 말인지 모르겠습니다.
-
Fair
2015.05.05 22:50
음.. ㅠㅠ 그러니까 menu6을 액티브 되었을때 화면에 menu6 이 안보이고 menu1~4 화면이 보이는거 때문에 질문드렸습니다
설명이 어렵네용 ㅠ
-
prologos
2015.05.05 21:00
http://www.idangero.us/swiper/api/
사용하신게 위의 swiper라면 .slideTo() 메쏘드를 이용하시면 될꺼 같은데요?
-
Fair
2015.05.05 22:49
네 제가 사용한 소스가 맞습니다. 저도 api 부분에 답이 있을까해서 쭉봤었는데 어떻게 활용하는지 감을 못잡겠네요 ㅠㅠ
말씀하신 .slideto() 메쏘드는 어떻게 이용해야할까요?
-
시니시즘
2015.05.06 02:46
이거 제가 완전 꿰뚫고 있는 라이브러리인데. 아래는 하나의 예제입니다.
var navSwiper = new Swiper('.nav_mvs > .swiper-container',{ grabCursor: true, preventLinksPropagation: true, slidesPerView: 4, slidesPerGroup: 4, speed: 500, onFirstInit: function(swiper) { var index = "0"; swiper.swipeTo(index, 0); } }) jQuery('.nav_mvs > .nav-left').on('click', function(e){ e.preventDefault(); navSwiper.swipePrev(); }) jQuery('.nav_mvs > .nav-right').on('click', function(e){ e.preventDefault(); navSwiper.swipeNext(); }) -
Fair
2015.05.06 13:35
var mySwiper = new Swiper('.swiper-container', { slidesPerView: {$layout_info->slide_max}, spaceBetween: 0, nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', freeMode: true });제 스크립트는 이거인데 어떻게 수정해야할까요? 아니면 예제에 대해서 가볍게라도 설명 부탁드릴 수 있을까요 ㅠ_ㅠ
-
html도 있는 풀코드를 보여주시면 이해가 더 빠를것같아요 ㅠㅠ
알듯말듯 잘모르겠네요
-
저도 이 문제로 골치아픈데 혹시 해결하셨낭요 질문자님?? ㅠㅠ
-
JN87
2019.06.06 21:24
n번째 슬라이드부터 시작하도록 하는 매서드로 initialSlide가 있긴한데..
이 경우에는 페이지 이동이 일어난 뒤, 해당 슬라이드 인덱스를 적용해야하기 때문에...
저라면 그냥 해당 페이지에 코드 한줄 넣어서 active 클래스를 추가하고
active 클래스를 가지고 있는 슬라이드의 인덱스를 initialSlide로 지정해서 해결할 것 같습니다.
끌어올립니다 ㅠ