스크립트 여러개 적용하려고 하면 잘 안됩니다.
| CMS/프레임워크 | Rhymix 2.0 |
|---|---|
| 개발 언어 | PHP 7.3 |
| 문제 페이지 주소 | 비공개 (작성 후 5일 경과) |
홈페이지 상단에 이미지 슬라이더를 넣고 싶어서 아래의 예제를 그대로 따라해봤습니다.
https://splidejs.com/v3/tutorials/image-slider/
테스트 페이지:
https://scorefactory.io/slidertest
그런데 기본적인 로딩과 작동은 잘되는데, 위 예제에 나온 PC에서는 슬라이드 2개, 모바일에서는 1개를 적용하기 위해서 스크립트를 추가 했더니 이 부분이 작동하지 않습니다.
<script>
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '#image-slider' ).mount();
} );
</script>
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '#image-slider' ).mount();
} );
</script>
이 부분이 슬라이더를 로딩하는 부분이고,
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '#card-slider', {
perPage : 2,
breakpoints: {
640: {
perPage: 1,
},
},
} ).mount();
} );
new Splide( '#card-slider', {
perPage : 2,
breakpoints: {
640: {
perPage: 1,
},
},
} ).mount();
} );
이 부분이 PC에서는 2장 보여주는 부분이라
이 두 가지를 어떻게 한번에 입력해야 할지 알수 없어서,
현재는
<script>
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '#image-slider' ).mount();
} );
new Splide( '#card-slider', {
perPage : 2,
breakpoints: {
640: {
perPage: 1,
},
},
} ).mount();
</script>
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '#image-slider' ).mount();
} );
new Splide( '#card-slider', {
perPage : 2,
breakpoints: {
640: {
perPage: 1,
},
},
} ).mount();
</script>
이렇게 입력되어 있고,
그냥 따로따로
<script>
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '#image-slider' ).mount();
} );
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '#card-slider', {
perPage : 2,
breakpoints: {
640: {
perPage: 1,
},
},
} ).mount();
} );
</script>
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '#image-slider' ).mount();
} );
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '#card-slider', {
perPage : 2,
breakpoints: {
640: {
perPage: 1,
},
},
} ).mount();
} );
</script>
이렇게도 입력해보았는데 그래도 pc에서도 모바일에서 1장씩만 보여줍니다.
무엇을 잘못했을까요?
스코스코
Lv. 5
댓글 2
이 구문의 의미를 설명을 드리면 #image-slider라는 id를 가진 태그를 기준으로 해서 슬라이더를 만들고 동작을 시작하라는 뜻이겠지요.
new Splide( '#card-slider', {
perPage : 2,
breakpoints: {
640: {
perPage: 1,
},
},
} ).mount();
이건 card-slider라는 id를 가진 태그를 기준으로 슬리이더를 만들겠다는 뜻이고 그외에 추가적으로 상세한 설정들을 덧붙인거구요...
지금 페이지를 살펴보니까 card-slider라는 id를 가진 태그는 없습니다. image-slider라는 id를 가진 태그만 있네요. 그럼 new Splide('#card-slider', .....).mount() 이 코드는 실질적으로 아무 일도 하고 있지 않다고 봐도 될겁니다. 그리고 상세한 설정은 image-slider쪽을 활성화시키는 코드쪽에 덧붙여야겠지요.
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '#image-slider', {
perPage : 2,
breakpoints: {
640: {
perPage: 1,
},
},
} ).mount();
} );
</script>
이런 식으로 코드를 주시면 될겁니다.