목록으로

Swiper 슬라이더 관련 문의 채택완료

웹메이킹 2년 전 조회 2,818

답변 2

안녕하세요~ 작업중에 잘 안되는 부분이 있어 이렇게 문의드립니다.

1번 슬라이드에서 btnPlay1 클릭시 음악이 재생이되면서 4번 슬라이드까지 계속재생이되고 5번~6번 슬라이드에서는 음악이 자동으로 멈추게 작성했습니다.

문제는 6번 슬라이드에서 1번 슬라이드로 이동후에 btnPlay1 클릭하면 음악이 처음부터 재생이 되어야 하는데 음악이 나오지 않습니다.

6번 슬라이드 다음슬라이드가 1번 슬라이드입니다.

즉 1번 -> 2번 -> 3번 -> 4번 -> 5번 -> 6번 -> 1번

어떻게 해야 되는지 고수님들의 조언 부탁드리겠습니다.

작성된 코드는 다음과 같습니다.

</p>

<p><div class="main_page"></p>

<p>  <div class="main_banner default_banner"></p>

<p>    <div class="swiper-container mb_container"></p>

<p>      <div class="swiper-wrapper mb_wrapper"></p>

<p> </p>

<p>        <div class="swiper-slide mb_slide mb_slide1" id="btnPlay1"></p>

<p>          <div class="banner_tit inner"></p>

<p>            <h2> </h2></p>

<p>            <p class="desc"> </p></p>

<p>          </div></p>

<p>        </div></p>

<p> </p>

<p>        <div class="swiper-slide mb_slide20" id="btnPlay2"></p>

<p>          <div class="video-container"></p>

<p>            <video controls id="video1" class="video" width="320" height="700"></p>

<p>              <source src="/video1.mp4" type="video/mp4"></p>

<p>              <source src="/video1.webm" type="video/webm"></p>

<p>              <source src="/video1.ogg" type="video/ogg"></p>

<p>              이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!</p>

<p>            </video></p>

<p>          </div></p>

<p>        </div></p>

<p> </p>

<p>        <div class="swiper-slide mb_slide mb_slide2" id="btnPlay3"></p>

<p>          <div class="banner_tit inner"></p>

<p>            <h2> </h2></p>

<p>            <p class="desc"> </p></p>

<p>          </div></p>

<p>        </div></p>

<p> </p>

<p>        <div class="swiper-slide mb_slide mb_slide3" id="btnPlay4"></p>

<p>          <div class="banner_tit inner"></p>

<p>            <h2> </h2></p>

<p>            <p class="desc"> </p></p>

<p>          </div></p>

<p>        </div></p>

<p> </p>

<p>        <div class="swiper-slide mb_slide20" id="btnPlay5"></p>

<p>          <div class="video-container"></p>

<p>            <video controls id="video2" class="video" width="320" height="700"></p>

<p>              <source src="/video2.mp4" type="video/mp4"></p>

<p>              <source src="/video2.webm" type="video/webm"></p>

<p>              <source src="/video2.ogg" type="video/ogg"></p>

<p>              이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!</p>

<p>            </video></p>

<p>          </div></p>

<p>        </div></p>

<p> </p>

<p>        <div class="swiper-slide mb_slide mb_slide4" id="btnPlay6"></p>

<p>          <div class="banner_tit inner"></p>

<p>            <h2> </h2></p>

<p>            <p class="desc"> </p></p>

<p>          </div></p>

<p>        </div></p>

<p>      </div></p>

<p> </p>

<p>      <div class="swiper-button-next main-slide-next"></div></p>

<p>      <div class="swiper-button-prev main-slide-prev"></div></p>

<p>      <div class="swiper-pagination main-slide-pagination"></div></p>

<p>    </div></p>

<p>  </div></p>

<p></div></p>

<p> </p>

<p><script></p>

<p>// Audio 객체 설정 (동일한 오디오 파일을 사용)</p>

<p>const audio1 = new Audio("/song1.mp3");</p>

<p> </p>

<p>// 버튼 취득</p>

<p>const btnPlay1 = document.getElementById("btnPlay1");</p>

<p>const btnPlay2 = document.getElementById("btnPlay2");</p>

<p>const btnPlay3 = document.getElementById("btnPlay3");</p>

<p>const btnPlay4 = document.getElementById("btnPlay4");</p>

<p>const btnPlay5 = document.getElementById("btnPlay5");</p>

<p>const btnPlay6 = document.getElementById("btnPlay6");</p>

<p> </p>

<p>let isPlaying = false;</p>

<p> </p>

<p>// 슬라이드 1p에서 음악 재생</p>

<p>btnPlay1.onclick = function () {</p>

<p>    if (!isPlaying) {</p>

<p>        playAudio(audio1);</p>

<p>        isPlaying = true;</p>

<p>    }</p>

<p>}</p>

<p> </p>

<p>// 슬라이드 2p에서 음악 일시 정지</p>

<p>btnPlay2.onclick = function () {</p>

<p>    if (isPlaying) {</p>

<p>        pauseAudio(audio1);</p>

<p>        isPlaying = false;</p>

<p>    }</p>

<p>}</p>

<p> </p>

<p>// 슬라이드 3p에서 음악 일시 정지</p>

<p>btnPlay3.onclick = function () {</p>

<p>    if (isPlaying) {</p>

<p>        pauseAudio(audio1);</p>

<p>        isPlaying = false;</p>

<p>    }</p>

<p>}</p>

<p> </p>

<p>// 슬라이드 4p에서 음악 일시 정지</p>

<p>btnPlay4.onclick = function () {</p>

<p>    if (isPlaying) {</p>

<p>        pauseAudio(audio1);</p>

<p>        isPlaying = false;</p>

<p>    }</p>

<p>}</p>

<p> </p>

<p>// 슬라이드 5p에서 음악 일시 정지</p>

<p>btnPlay5.onclick = function () {</p>

<p>    if (isPlaying) {</p>

<p>        pauseAudio(audio1);</p>

<p>        isPlaying = false;</p>

<p>    }</p>

<p>}</p>

<p> </p>

<p>// 슬라이드 6p에서 음악 일시 정지</p>

<p>btnPlay6.onclick = function () {</p>

<p>    if (!isPlaying) {</p>

<p>        playAudio(audio1);</p>

<p>        isPlaying = false;</p>

<p>    }</p>

<p>}</p>

<p> </p>

<p>// Swiper 슬라이더 초기화</p>

<p>var swiper = new Swiper('.swiper-container', {</p>

<p>    // 슬라이드 설정</p>

<p>    slidesPerView: 1,</p>

<p>    spaceBetween: 0,</p>

<p>    loop: true,</p>

<p>    navigation: {</p>

<p>        nextEl: '.swiper-button-next',</p>

<p>        prevEl: '.swiper-button-prev',</p>

<p>    },</p>

<p>    pagination: {</p>

<p>        el: '.swiper-pagination',</p>

<p>        clickable: true,</p>

<p>    },</p>

<p>    autoplay: false, // 자동 재생을 비활성화</p>

<p>});</p>

<p> </p>

<p>// 슬라이드 변경 이벤트 감지</p>

<p>swiper.on('slideChange', function () {</p>

<p>    var activeIndex = swiper.activeIndex;</p>

<p>    // 슬라이드가 변경될 때 음악을 관리하도록 추가 코드 작성</p>

<p>    if (activeIndex >= 5) {</p>

<p>        if (isPlaying) {</p>

<p>            pauseAudio(audio1);</p>

<p>            isPlaying = false;</p>

<p>        }</p>

<p>    }</p>

<p>});</p>

<p> </p>

<p>// 모든 오디오 일시 정지</p>

<p>function pauseAllAudios() {</p>

<p>    audio1.pause();</p>

<p>    isPlaying = false;</p>

<p>}</p>

<p> </p>

<p>// 특정 음악 재생</p>

<p>function playAudio(audio) {</p>

<p>    pauseAllAudios();</p>

<p>    audio.currentTime = 0;</p>

<p>    audio.play();</p>

<p>    isPlaying = true;</p>

<p>}</p>

<p> </p>

<p>// 음악 일시 정지</p>

<p>function pauseAudio(audio) {</p>

<p>    audio.pause();</p>

<p>    isPlaying = false;</p>

<p>}</p>

<p></script></p>

<p>

#javascript #php #swiper #그누보드5

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

정렬:

채택된 답변

+20 포인트

비타주리

2년 전

무엇을 하려는지 정확히 파악하지 못하겠으나...

저 같으면 부여된 코드에서 사운드 부분은 아래처럼 짤 것 같습니다.

</p>

<p><audio id="myPlayer" src="<a href="https://blog.kakaocdn.net/dn/PmTxy/btsk27xopkC/smpoMRN8VNc0Fim0V05g91/tfile.mp3"" target="_blank" rel="noopener noreferrer">https://blog.kakaocdn.net/dn/PmTxy/btsk27xopkC/smpoMRN8VNc0Fim0V05g91/tfile.mp3"</a> 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>




<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></p>

<p>

https://wittazzurri.com/editor/html_editor.php 에서 확인해 보세요.

참고로 myPlayer 의 음원을 바꿔주는 이벤트는 아래와 같습니다.

myPlayer.src = "음원주소";

----------

지금보니 아래처럼 코드를 줄이는게 더 좋겠네요.

</p>

<p><audio id="myPlayer" src="<a href="https://blog.kakaocdn.net/dn/PmTxy/btsk27xopkC/smpoMRN8VNc0Fim0V05g91/tfile.mp3"" target="_blank" rel="noopener noreferrer">https://blog.kakaocdn.net/dn/PmTxy/btsk27xopkC/smpoMRN8VNc0Fim0V05g91/tfile.mp3"</a> 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>




<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></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�

웹메이킹

2년 전

@비타주리 덕분에 한가지 배워갑니다.

댓글을 작성하려면 로그인이 필요합니다.

웅푸

2년 전

처음부터 다시 재생 하도록

// 슬라이드 변경 이벤트 감지
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;
}
});

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�

웹메이킹

2년 전

답변주셔서 감사합니다.~ 알려주신 방법대로 해도 안되는군요..ㅠㅠ

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

Swiper 슬라이더 관련 문의 채택완료

답변 2개

답변에 대한 댓글 1개

답변에 대한 댓글 1개

공유하기