자동슬라이드에 대한 질문입니다.
본문
https://sir.kr/cmall/1642473188
나미웹 님의 콘텐트 메인에서 둘레아빠 님이 알려주신 비디오 태그에 더해서
웹메이킹 님이 알려주신 소스를 통해 많이 배우고 있습니다.
여기서 나미웹 님의 콘텐츠를 보면 5개의 이미지가 슬라이드로 돌아가고 있는데요.
1~3번까지만 자동으로 슬라이드 되게 할 수 있는 방법이 있을까요?
4번과 5번이미지는 그냥 수동으로(드래그) 하려구요.
코드는 아래와 같습니다.
<?php
define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if (G5_IS_MOBILE) {
include_once(G5_THEME_MOBILE_PATH.'/index.php');
return;
}
include_once(G5_THEME_PATH.'/head.php');
?>
<style type="text/css">
.video-container {
position: relative;
padding-bottom: 142%; /* 16:9 */
height: 0;
overflow: hidden;
}
.video-container .video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<script>
var video1 = document.getElementById('video1');
var video2 = document.getElementById('video2');
var video3 = document.getElementById('video3');
video1.addEventListener('ended', function() {
video2.play();
});
video2.addEventListener('ended', function() {
video3.pause();
});
function playVideo(videoId) {
var previousVideo = document.querySelector('.video:not(#' + videoId + ')');
if (previousVideo) {
previousVideo.pause();
previousVideo.currentTime = 0;
}
var video = document.getElementById(videoId);
video.play();
}
</script>
<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">
<div class="banner_tit inner">
<h2> </h2>
<p class="desc"> </p>
</div>
</div>
<div class="swiper-slide mb_slide mb_slide2">
<div class="banner_tit inner">
<h2> </h2>
<p class="desc"> </p>
</div>
</div>
<div class="swiper-slide mb_slide20 video-container">
<video id="video1" class="video" width="320" height="700" autoplay muted>
<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 class="swiper-slide mb_slide21 video-container">
<video id="video2" class="video" width="320" height="700" autoplay muted>
<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 class="swiper-slide mb_slide23 video-container">
<video controls autoplay muted width="400" height="700">
<source src="/video3.mp4" type="video/mp4">
<source src="/video3.webm type="video/webm">
<source src="/video3.ogg" type="video/ogg">
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</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>
<script>
$(function(){
var swiper = new Swiper('.default_banner .swiper-container', {
slidesPerView: 1,
spaceBetween: 0,
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
});
$('.main_banner .swiper-slide').on('mouseenter', function(e){
console.log('stop autoplay');
swiper.autoplay.stop();
});
$('.main_banner .swiper-slide').on('mouseleave', function(e){
console.log('start autoplay');
swiper.autoplay.start();
});
})
$(function(){
jQuery( '#background' ).YTPlayer();
});
</script>
<div class="main_sec main_sec5 main-latest-list">
<div class=" inner">
<div class="latest_wr wow fadeInUp" data-wow-delay="0.4s">
<div class="latest-list-box">
<div class="latest-list-tit">
<h2 class="board-tit">공지사항</h2>
</div>
<?php echo latest('theme/basic2', 'basic_list', 4, 40, 1);?>
</div>
</div>
</div>
</div>
<div class="main_sec main_sec6">
<div class="inner">
<li class="btm-con-list list-long con-list">
<div class="main-sub clearfix">
<div class="long-list2"></div>
</div>
</li>
</div>
</div>
</div>
<?php
include_once(G5_THEME_PATH.'/tail.php');
?>
답변 3
제가 정확히 이해를 한게 맞는지 잘 모르겠습니다.
질문에 의하면 1 ~3 까지는 자동으로 4 ~ 5까지는 수동으로 하신다는걸로 이해를 했는데요..
그게 맞다면 다음과 같이 해보시면 어떨까 합니다
<?php
define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if (G5_IS_MOBILE) {
include_once(G5_THEME_MOBILE_PATH.'/index.php');
return;
}
include_once(G5_THEME_PATH.'/head.php');
?>
<style type="text/css">
.video-container {
position: relative;
padding-bottom: 142%; /* 16:9 */
height: 0;
overflow: hidden;
}
.video-container .video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 0,
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
on: {
slideChange: function () {
if (swiper.activeIndex >= 3) {
swiper.autoplay.stop();
} else {
swiper.autoplay.start();
}
},
},
});
</script>
<div class="main_page">
<div class="main_banner default_banner">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide mb_slide mb_slide1">
<div class="banner_tit inner">
<h2> </h2>
<p class="desc"> </p>
</div>
</div>
<div class="swiper-slide mb_slide mb_slide2">
<div class="banner_tit inner">
<h2> </h2>
<p class="desc"> </p>
</div>
</div>
<div class="swiper-slide mb_slide20 video-container">
<video class="video" width="320" height="700" autoplay muted>
<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 class="swiper-slide mb_slide21 video-container">
<video 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 class="swiper-slide mb_slide22 video-container">
<video class="video" width="320" height="700">
<source src="/video3.mp4" type="video/mp4">
<source src="/video3.webm" type="video/webm">
<source src="/video3.ogg" type="video/ogg">
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</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 class="main_sec main_sec5 main-latest-list">
<div class="inner">
<div class="latest_wr wow fadeInUp" data-wow-delay="0.4s">
<div class="latest-list-box">
<div class="latest-list-tit">
<h2 class="board-tit">공지사항</h2>
</div>
<?php echo latest('theme/basic2', 'basic_list', 4, 40, 1);?>
</div>
</div>
</div>
</div>
<div class="main_sec main_sec6">
<div class="inner">
<li class="btm-con-list list-long con-list">
<div class="main-sub clearfix">
<div class="long-list2"></div>
</div>
</li>
</div>
</div>
</div>
<?php
include_once(G5_THEME_PATH.'/tail.php');
?>
이게 맞다고 할 수는 없겠지만, 참고 하셔서 원하시는 로직으로 구현을 하시면 될 것 같습니다.
https://lpla.tistory.com/118 를 참고하고 공부하셔서
on: {
activeIndexChange: function () {
alert(this.realIndex+'번째 slide입니다.');
}
}
를 참고하셔서 인덱스에 맞게 멈추고 돌리고를 해주시면 될거 같습니다.
답변을 작성하시기 전에 로그인 해주세요.
