요기에 파일을 올려 놓았습니다.
제가 궁금한 것이...
공식페이지를 참고하여 한 페이지에 여러개의 슬라이더가 들어갈 수 있도록 했습니다.
그런데, 토글 메뉴를 이용해서 일부분을 숨겼다가 버튼을 클릭하면 나타나도록 하느라고
상위 div에 display:none을 설정해 놓았습니다.
그랬더니 숨겨져있던 하위 슬라이더에도 영향을 미치는건지...
이미지가 나타나질 않네요...
첫번째 처음부터 열려있는(display:block) 슬라이더는 잘 나오는데 말예요...
완전 똑같이 쓰고 클래스명만 1,2,3 이런식으로 추가로 붙여줬는데,
잘 안되는 이유를 못 찾겠습니다 ㅠ
혹시 아시는 분 계시면 알려주세요~~ 부탁드려요
감사합니다... ㅠㅠ
답변 3개 / 댓글 3개
먼가 더 좋은 방법이 분명히 있을거 같은데 제 실력으로는 지금은 이 방법 밖에 생각이 나는게 없네요
<script>//slideBoxvar slidechk1 = true;var slidechk2 = true;$(document).ready(function(){ $(".btn_worksToggle").click(function(){ var index = $(".btn_worksToggle").index($(this)); $('.worksToggle').eq(index).slideToggle('slow'); $('.btn_worksToggle i').eq(index).toggleClass('fa-chevron-circle-down fa-minus-circle'); if(index == 1 && slidechk1){ mySlider1.reloadSlider(); slidechk1 = false; } if(index == 2 && slidechk2){ mySlider2.reloadSlider(); slidechk2 = false; } }); $('.bxslider1').bxSlider({ pagerCustom: '#bx-pager1', controls:false, auto:true, captions: true, pause: 6000, speed: 1000, mode: 'fade' }); mySlider1 = $('.bxslider2').bxSlider({ pagerCustom: '#bx-pager2', controls:false, auto:true, captions: true, pause: 6000, speed: 1000, mode: 'fade' }); mySlider2 = $('.bxslider3').bxSlider({ pagerCustom: '#bx-pager3', controls:false, auto:true, captions: true, pause: 6000, speed: 1000, mode: 'fade' });});</script>답변에 대한 댓글 1개
// script.js
$('.btn_worksToggle i').eq(index).toggleClass('fa-chevron-circle-down fa-minus-circle defaultOpen');
답변에 대한 댓글 1개
잘 안되네요 ㅠ ㅠ ... 더 열심히 공부할게요!
자바스크립트로 코딩하실때, 스크립트의 대상이 되는 요소가 display:none 으로 가려진 상태이면 목표 대상을 찾지못해서 제대로 표현되지 않을 경우가 있던걸로 기억합니다.
display:none 이 아닌 visible:hidden 등으로 바꿔서 테스트해보셔요.
또한, 해당 버튼을 클릭했을때 스크립트를 초기화하도록 해보는 것도 방법일껍니다.
가령 bxslider 의 초기화 코드를 버튼을 클릭했을때 작동하도록요.
답변에 대한 댓글 1개
좀 더 공부해보도록 하겠습니다 감사해요!! (__)
답변을 작성하려면 로그인이 필요합니다.
알려주신대로 해보니 작동 되어서,
알려주신 코드를 이용하려고 합니다. 감사해요!!
한 페이지에 슬라이드가 적게는 서너개, 많게는 10개도 들어가는 상황이라.
코드가 좀 길어지는 게 걱정이긴 한데... ㅠ
혹시 더 좋은 방법이 생각나시면 알려주세요 ^^
감사합니다 정말 감사합니다~~