Swiper 슬라이더 관련 문의
본문
안녕하세요~ 작업중에 잘 안되는 부분이 있어 이렇게 문의드립니다.
1번 슬라이드에서 btnPlay1 클릭시 음악이 재생이되면서 4번 슬라이드까지 계속재생이되고 5번~6번 슬라이드에서는 음악이 자동으로 멈추게 작성했습니다.
문제는 6번 슬라이드에서 1번 슬라이드로 이동후에 btnPlay1 클릭하면 음악이 처음부터 재생이 되어야 하는데 음악이 나오지 않습니다.
6번 슬라이드 다음슬라이드가 1번 슬라이드입니다.
즉 1번 -> 2번 -> 3번 -> 4번 -> 5번 -> 6번 -> 1번
어떻게 해야 되는지 고수님들의 조언 부탁드리겠습니다.
작성된 코드는 다음과 같습니다.
<div class="main_page">
<div class="main_banner default_banner">
<div class="swiper-container mb_container">
<div class="swiper-wrapper mb_wrapper">
<div class="swiper-slide mb_slide mb_slide1" id="btnPlay1">
<div class="banner_tit inner">
<h2> </h2>
<p class="desc"> </p>
</div>
</div>
<div class="swiper-slide mb_slide20" id="btnPlay2">
<div class="video-container">
<video controls id="video1" class="video" width="320" height="700">
<source src="/video1.mp4" type="video/mp4">
<source src="/video1.webm" type="video/webm">
<source src="/video1.ogg" type="video/ogg">
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
</div>
<div class="swiper-slide mb_slide mb_slide2" id="btnPlay3">
<div class="banner_tit inner">
<h2> </h2>
<p class="desc"> </p>
</div>
</div>
<div class="swiper-slide mb_slide mb_slide3" id="btnPlay4">
<div class="banner_tit inner">
<h2> </h2>
<p class="desc"> </p>
</div>
</div>
<div class="swiper-slide mb_slide20" id="btnPlay5">
<div class="video-container">
<video controls id="video2" class="video" width="320" height="700">
<source src="/video2.mp4" type="video/mp4">
<source src="/video2.webm" type="video/webm">
<source src="/video2.ogg" type="video/ogg">
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
</div>
<div class="swiper-slide mb_slide mb_slide4" id="btnPlay6">
<div class="banner_tit inner">
<h2> </h2>
<p class="desc"> </p>
</div>
</div>
</div>
<div class="swiper-button-next main-slide-next"></div>
<div class="swiper-button-prev main-slide-prev"></div>
<div class="swiper-pagination main-slide-pagination"></div>
</div>
</div>
</div>
<script>
// Audio 객체 설정 (동일한 오디오 파일을 사용)
const audio1 = new Audio("/song1.mp3");
// 버튼 취득
const btnPlay1 = document.getElementById("btnPlay1");
const btnPlay2 = document.getElementById("btnPlay2");
const btnPlay3 = document.getElementById("btnPlay3");
const btnPlay4 = document.getElementById("btnPlay4");
const btnPlay5 = document.getElementById("btnPlay5");
const btnPlay6 = document.getElementById("btnPlay6");
let isPlaying = false;
// 슬라이드 1p에서 음악 재생
btnPlay1.onclick = function () {
if (!isPlaying) {
playAudio(audio1);
isPlaying = true;
}
}
// 슬라이드 2p에서 음악 일시 정지
btnPlay2.onclick = function () {
if (isPlaying) {
pauseAudio(audio1);
isPlaying = false;
}
}
// 슬라이드 3p에서 음악 일시 정지
btnPlay3.onclick = function () {
if (isPlaying) {
pauseAudio(audio1);
isPlaying = false;
}
}
// 슬라이드 4p에서 음악 일시 정지
btnPlay4.onclick = function () {
if (isPlaying) {
pauseAudio(audio1);
isPlaying = false;
}
}
// 슬라이드 5p에서 음악 일시 정지
btnPlay5.onclick = function () {
if (isPlaying) {
pauseAudio(audio1);
isPlaying = false;
}
}
// 슬라이드 6p에서 음악 일시 정지
btnPlay6.onclick = function () {
if (!isPlaying) {
playAudio(audio1);
isPlaying = false;
}
}
// Swiper 슬라이더 초기화
var swiper = new Swiper('.swiper-container', {
// 슬라이드 설정
slidesPerView: 1,
spaceBetween: 0,
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
autoplay: false, // 자동 재생을 비활성화
});
// 슬라이드 변경 이벤트 감지
swiper.on('slideChange', function () {
var activeIndex = swiper.activeIndex;
// 슬라이드가 변경될 때 음악을 관리하도록 추가 코드 작성
if (activeIndex >= 5) {
if (isPlaying) {
pauseAudio(audio1);
isPlaying = false;
}
}
});
// 모든 오디오 일시 정지
function pauseAllAudios() {
audio1.pause();
isPlaying = false;
}
// 특정 음악 재생
function playAudio(audio) {
pauseAllAudios();
audio.currentTime = 0;
audio.play();
isPlaying = true;
}
// 음악 일시 정지
function pauseAudio(audio) {
audio.pause();
isPlaying = false;
}
</script>
답변 2
무엇을 하려는지 정확히 파악하지 못하겠으나...
저 같으면 부여된 코드에서 사운드 부분은 아래처럼 짤 것 같습니다.
<audio id="myPlayer" src="https://blog.kakaocdn.net/dn/PmTxy/btsk27xopkC/smpoMRN8VNc0Fim0V05g91/tfile.mp3" loop></audio>
<button id="btnPlay1" style="cursor:pointer">1</button>
<button id="btnPlay2" style="cursor:pointer">2</button>
<button id="btnPlay3" style="cursor:pointer">3</button>
<button id="btnPlay4" style="cursor:pointer">4</button>
<button id="btnPlay5" style="cursor:pointer">5</button>
<button id="btnPlay6" style="cursor:pointer">6</button>
<br>
<button id="playBtn" style="cursor:pointer">PLAY</button>
<script>
currentSec = 0;
for (i = 1; i <= 6; i++) {
document.getElementById("btnPlay" + i).onclick = function() {
if (this.id == "btnPlay1") {
myPlayer.play();
myPlayer.currentTime = currentSec;
}
else {
myPlayer.pause();
currentSec = this.id == "btnPlay6" ? 0 : myPlayer.currentTime;
}
}
}
playBtn.onclick = function() {
myPlayer.play();
myPlayer.currentTime = currentSec;
}
</script>
https://wittazzurri.com/editor/html_editor.php 에서 확인해 보세요.
참고로 myPlayer 의 음원을 바꿔주는 이벤트는 아래와 같습니다.
myPlayer.src = "음원주소";
----------
지금보니 아래처럼 코드를 줄이는게 더 좋겠네요.
<audio id="myPlayer" src="https://blog.kakaocdn.net/dn/PmTxy/btsk27xopkC/smpoMRN8VNc0Fim0V05g91/tfile.mp3" loop></audio>
<button id="btnPlay1" style="cursor:pointer">1</button>
<button id="btnPlay2" style="cursor:pointer">2</button>
<button id="btnPlay3" style="cursor:pointer">3</button>
<button id="btnPlay4" style="cursor:pointer">4</button>
<button id="btnPlay5" style="cursor:pointer">5</button>
<button id="btnPlay6" style="cursor:pointer">6</button>
<br>
<button id="playBtn" style="cursor:pointer">PLAY</button>
<script>
currentSec = 0;
playBtn.onclick = function() {
myPlayer.play();
myPlayer.currentTime = currentSec;
}
for (i = 1; i <= 6; i++) {
document.getElementById("btnPlay" + i).onclick = function() {
if (this.id == "btnPlay1") playBtn.onclick();
else {
myPlayer.pause();
currentSec = this.id == "btnPlay6" ? 0 : myPlayer.currentTime;
}
}
}
</script>
@비타주리 덕분에 한가지 배워갑니다.
처음부터 다시 재생 하도록
// 슬라이드 변경 이벤트 감지
swiper.on('slideChange', function () {
var activeIndex = swiper.activeIndex;
// 슬라이드가 변경될 때 음악을 관리하도록 추가 코드 작성
if (activeIndex >= 5) {
if (isPlaying) {
pauseAudio(audio1);
isPlaying = false;
}
}
});
이것을 수정을 하시면 됩니다.
// 슬라이드 변경 이벤트 감지
swiper.on('slideChange', function () {
var activeIndex = swiper.activeIndex;
// 슬라이드가 변경될 때 음악을 관리하도록 추가 코드 작성
if (activeIndex === 0) {
if (!isPlaying) {
playAudio(audio1);
isPlaying = true;
}
} else if (isPlaying) {
pauseAudio(audio1);
isPlaying = false;
}
});
답변주셔서 감사합니다.~ 알려주신 방법대로 해도 안되는군요..ㅠㅠ
답변을 작성하시기 전에 로그인 해주세요.