swiper-slide 관련한 질문 부탁드리겠습니다.

Question

반갑습니다 선배님들일본 취업을 위한 포트폴리오 웹사이트를 만드는 중 처음 접하는 부분때문에 질문드립니다. Swiper-Slide를 하나만 만들때는 정상적으로 작동이 됐는데 여러개를 만드려고 하니 아래 사진처럼 Self-Promotion 섹션부분과 Work Experience 섹션부분의 각각 슬라이드에서 버그가 발생했습니다. 슬라이드의 페이지를 넘기면 아래에 있는 슬라이드의 페이지도 함께 넘어가는 문제, 각 슬라이드의 페이지가 합쳐서 계산되는 버그가 생겼는데 해결을 못하고 있습니다.

Self-Promotion

高校時代に習ったこと

Sub-title #01

メカトロニクス銀メダル
Sub-title #02

自動化システムの教育
Sub-title #03

自動化システムの教育

WORK EXPERIENCE

明進自動化を主とした業務

Sub-title #01

主な出張地
Sub-title #02

電気パネル配線業務
Sub-title #03

自動化装備配線業務
Sub-title #03

PLCで装置制御業務

제가 웹 페이지를 만들때 사용한 일부 html코드 입니다. //current position var pos = 0; //number of slides var totalSlides = $('#slider-wrap ul li').length; //get the slide width var sliderWidth = $('#slider-wrap').width(); $(document).ready(function(){ /***************** BUILD THE SLIDER *****************/ //set width to be 'x' times the number of slides $('#slider-wrap ul#slider').width(sliderWidth*totalSlides); //next slide $('#next').click(function(){ slideRight(); }); //previous slide $('#previous').click(function(){ slideLeft(); }); /************************* //*> OPTIONAL SETTINGS ************************/ //automatic slider var autoSlider = setInterval(slideRight, 3000); //for each slide $.each($('#slider-wrap ul li'), function() { //create a pagination var li = document.createElement('li'); $('#pagination-wrap ul').append(li); }); //counter countSlides(); //pagination pagination(); //hide/show controls/btns when hover //pause automatic slide when hover $('#slider-wrap').hover( function(){ $(this).addClass('active'); clearInterval(autoSlider); }, function(){ $(this).removeClass('active'); autoSlider = setInterval(slideRight, 3000); } ); });//DOCUMENT READY /*********** SLIDE LEFT ************/ function slideLeft(){ pos--; if(pos==-1){ pos = totalSlides-1; } $('#slider-wrap ul#slider').css('left', -(sliderWidth*pos)); //*> optional countSlides(); pagination(); } /************ SLIDE RIGHT *************/ function slideRight(){ pos++; if(pos==totalSlides){ pos = 0; } $('#slider-wrap ul#slider').css('left', -(sliderWidth*pos)); //*> optional countSlides(); pagination(); } /************************ //*> OPTIONAL SETTINGS ************************/ function countSlides(){ $('#counter').html(pos+1 + ' / ' + totalSlides); } function pagination(){ $('#pagination-wrap ul li').removeClass('active'); $('#pagination-wrap ul li:eq('+pos+')').addClass('active'); } 제가 웹 페이지를 만들때 사용한 일부 JS코드입니다. 해당 기능은슬라이드쇼 구현 (css/javascript/jquery) (tistory.com)이 사이트의 6번 템플릿을 참고했습니다. 슬라이드의 페이지가 각각의 영역에서 따로 움직이도록, 슬라이드들의 페이지가 연동이 안되도록 고치고싶은데 어느부분을 어떻게 고치면 해결가능한지 따끔한 채찍 부탁드리겠습니다.

twinings · Accepted Answer

셀렉터를 아이디가 아닌 클래스로 잡으셔야 각각 적용이 가능합니다.현재는 아이디로 잡아서 가장 최상위에 있는 엘리먼트만 적용이된 모습인것 같습니다. 그리고 각각 분리하고 싶으시다면 인스턴스 생성시 각각 생성해주시는게 옳바르지 않을까 싶습니다.한페이지에 여러 swiper 적용하는 방법 - stackoverflow

아루루 · Answer

twinings 친절한 답변 감사합니다 ㅠㅠ 그리고 답글이 늦어진점 죄송해요..저녁 늦어지기전에 한번 시도해보겠습니다!

아루루 · Answer

twinings 덕분에 포폴사이트 기능구현이 끝났습니다!api 올바르게 사용하는방법도 익힐 수 있었어요! 감사합니다

swiper-slide 관련한 질문 부탁드리겠습니다.

3개의 답변

Q&A 목록