자동슬라이드에 대한 질문입니다. 채택완료

</p>

<p><?php

define('_INDEX_', true);

if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가</p>

<p>if (G5_IS_MOBILE) {

    include_once(G5_THEME_MOBILE_PATH.'/index.php');

    return;

}</p>

<p>include_once(G5_THEME_PATH.'/head.php');

?></p>

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

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

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

                }, 

            });</p>

<p>             $('.main_banner .swiper-slide').on('mouseenter', function(e){

                console.log('stop autoplay');

                swiper.autoplay.stop();

            });</p>

<p>        $('.main_banner .swiper-slide').on('mouseleave', function(e){

                console.log('start autoplay');

                swiper.autoplay.start();

            }); 

        })

    

    

        $(function(){

            jQuery( '#background' ).YTPlayer();

        });

  </p>

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

<p>

<?php

include_once(G5_THEME_PATH.'/tail.php');

?></p>

<p>