랜덤으로 순서가 바뀌는 slider (+with video), 플러그인 x

새로고침 할때마다 랜덤으로 순서가 바뀌는 slider.

현재 작동하는 slide의 video가 끝나면 다음 슬라이드로 넘어가는 방식.

pagination 있음, slider plugin 사용 안함!

 

See the Pen random slide with video by publisher.kim (@publisherkim) on CodePen.

 

 

 

html

<div id="mainSlide">
  <!-- main_slide_wrap -->
  <div class="main_slide_wrap">
    <div class="videoslide slide_01">
      <video id="banner_video1" class="banner_video" src="https://umings.github.io/images/video1.mp4" muted autoplay playsinline data-keepplaying></video>
      <div class="slide_txt">
          <strong>비디오1번_타이틀</strong>
          <p>비디오1번_텍스트</p>
    </div>
    </div>
    <div class="videoslide slide_02">
      <video id="banner_video2" class="banner_video" src="https://umings.github.io/images/video2.mp4" muted autoplay playsinline data-keepplaying></video>
      <div class="slide_txt">
        <strong>비디오2번_타이틀</strong>
        <p>비디오2번_텍스트</p>
      </div>
    </div>
    <div class="videoslide slide_03">
      <video id="banner_video3" class="banner_video" src="https://umings.github.io/images/video3.mp4" muted autoplay playsinline data-keepplaying></video>
      <div class="slide_txt">
        <strong>비디오3번_타이틀</strong>
        <p>비디오3번_텍스트</p>
      </div>
    </div>
    <div class="videoslide slide_04">
      <video id="banner_video4" class="banner_video" src="https://umings.github.io/images/video4.mp4" muted autoplay playsinline data-keepplaying></video>
      <div class="slide_txt">
        <strong>비디오4번_타이틀</strong>
        <p>비디오4번_텍스트</p>
      </div>
    </div>
  </div>
  <!-- //main_slide_wrap -->
  <!-- pagination_area -->
  <div class="pagination_area">
    <button class="main_btn btn_pause">
      <img src="https://umings.github.io/images/btn_slide_pause.png" alt="비디오 정지">
    </button>
    <button class="main_btn btn_play">
      <img src="https://umings.github.io/images/btn_slide_play.png" alt="비디오 실행">
    </button>
    <div class="main_pagination">
      <button class="main_pagination_bullet slide_01">
        <p><b>01. </b>비디오1_페이지네이션</p>
        <span class="progress"></span>
      </button>
      <button class="main_pagination_bullet slide_02">
        <p><b>02. </b>비디오2_페이지네이션</p>
        <span class="progress"></span>
      </button>
      <button class="main_pagination_bullet slide_03">
        <p><b>03. </b>비디오3_페이지네이션</p>
        <span class="progress"></span>
      </button>
      <button class="main_pagination_bullet slide_04">
        <p><b>04. </b>비디오4_페이지네이션</p>
        <span class="progress"></span>
      </button>
    </div>
  </div>
  <!-- //pagination_area -->
</div>

 

css

/** mainSlide **/
#mainSlide, #mainSlide .videoslide, #mainSlide .banner_video{min-height:600px;}
#mainSlide {position: relative;width: 100%;height: 100vh;  overflow: hidden;}
/* slide */
#mainSlide .videoslide {position: absolute;width: 100%;height: 100vh;}
#mainSlide .videoslide::after{content: ''; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.4); position: absolute; left: 0; top: 0; z-index: 99;}
#mainSlide .banner_video {width: 100%;height: 100vh;object-fit: cover;}
#mainSlide .slide_txt {position: absolute;top: 50%;left: 50%;color: #fff;text-align: center; transform: translate(-50%, -50%); z-index: 999;}
#mainSlide .slide_txt.animate {margin-bottom:-40px; opacity: 0;-webkit-animation: fadeInUp 0.5s forwards ease-out 0.4s;-ms-animation: fadeInUp 0.5s forwards ease-out 0.4s;animation: fadeInUp 0.5s forwards ease-out 0.4s;}
#mainSlide .slide_txt strong {font-size: 40px;font-weight: 600;line-height: 1.2;letter-spacing: -2px;}
#mainSlide .slide_txt p {margin-top: 36px;font-size: 20px;line-height: 1.6;}
@keyframes fadeInUp {
  0% {opacity:0; top:53%;}
  100% {opacity:1; top:50%;}
}

/* pagination */
#mainSlide .pagination_area {width:800px; position: absolute;bottom: 80px;left: 50%; margin-left:-400px; padding-left:40px; z-index: 999;}
#mainSlide .pagination_area .main_btn{position: absolute; left: 0; top: 16px; background:#fff; width:22px; height: 22px; display: inline-block; border-radius: 100px; border: 0; cursor: pointer;}
#mainSlide .pagination_area .main_btn.btn_play {display: none;}
#mainSlide .main_pagination {display: flex;width: 100%;bottom: 0;}
#mainSlide .main_pagination_bullet {position: relative;width: 100%;height: 2px;margin: 0 10px;padding-top: 28px;background: none;border-radius: 0;opacity: 1;cursor:pointer; border: 0;}
#mainSlide .main_pagination_bullet p{  position: absolute;top: 0;left: 0;right: 0;width: 100%;color: #fff;opacity: 0.2;white-space:nowrap;}
#mainSlide .main_pagination_bullet:after {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 2px;background-color: rgba(255,255,255,0.2);}
#mainSlide .main_pagination_bullet span {display: inline-block;position: absolute;left: 0;right: 0;bottom: 0;width: 0;height: 2px;background: #fff;}

#mainSlide .main_pagination_bullet.active {background: rgba(0,0,0,0) !important;background-color: rgba(0,0,0,0) !important;}
#mainSlide .main_pagination_bullet.active p {opacity: 1;}
#mainSlide .main_pagination_bullet.slide_01.active .progress {animation: progressBar 10s linear forwards;  }/* 기본 1번 슬라이드 비디오 재생시간 */
#mainSlide .main_pagination_bullet.slide_02.active .progress {animation: progressBar 5s linear forwards;  }/* 기본 2번 슬라이드 비디오 재생시간 */
#mainSlide .main_pagination_bullet.slide_03.active .progress {animation: progressBar 10s linear forwards;  }/* 기본 3번 슬라이드 비디오 재생시간 */
#mainSlide .main_pagination_bullet.slide_04.active .progress {animation: progressBar 15s linear forwards;  }/* 기본 4번 슬라이드 비디오 재생시간 */
#mainSlide .main_pagination_bullet.active.stop .progress{animation-play-state: paused !important;}
@keyframes progressBar {
  0% {  width: 0;}
  100% {  width:100%;}
}

 

js *jquery 필요

//랜덤으로 섞는 함수 shuffleElements
function shuffleElements(container1, container2) {
    var elements1 = Array.from(container1.children());
    var elements2 = Array.from(container2.children());
    var currentIndex = elements1.length;

    while (currentIndex !== 0) {
      var randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex--;
      var temp1 = elements1[currentIndex];
      elements1[currentIndex] = elements1[randomIndex];
      elements1[randomIndex] = temp1;

      var temp2 = elements2[currentIndex];
      elements2[currentIndex] = elements2[randomIndex];
      elements2[randomIndex] = temp2;
    }
    container1.empty();
    container2.empty();
    for (var i = 0; i < elements1.length; i++) {
      container1.append(elements1[i]);
      container2.append(elements2[i]);
    }
  }

//슬라이드 순서와 pagination 순서를 로딩 할때마다 랜덤으로 바뀌게 하는것
  function mixslide(callback) {
    var mainSlideWrapper = $(".main_slide_wrap");
    var paginationBullets = $(".main_pagination");
    shuffleElements(mainSlideWrapper, paginationBullets);
    if (typeof callback === "function") {
      callback(); //섞은 후 callback
    }
  }

$(function() {
  mixslide(function() {
  // 섞은 후 callback으로 모든 동작 넣기. 만약 랜덤으로 섞는것을 적용하지 않고 슬라이드 동작 스크립트만 넣는다면 callback 위치의 스크립트를 밖으로 빼주고,  shuffleElements와 mixslide는 없애주면 된다.

  var firstSlide = $(".videoslide:first-child");
  var v_first = firstSlide.find(".banner_video")[0];
  //pagination default
  $(".main_pagination_bullet").each(function(){
    var pageindex = $(this).index()+1;
    $(this).find("b").html("0"+pageindex+". ");
  })
  $(".main_pagination_bullet:nth-of-type(1)").addClass('active');
  
  //slide, video default
  $(".videoslide").hide();
  firstSlide.addClass("on")
  firstSlide.fadeIn(500);
  firstSlide.find(".slide_txt").addClass("animate");
  $(".banner_video").each(function() {
    var video = this;
    video.pause();
    video.currentTime = 0;
  });
  v_first.play();

  // video 끝났을때
  $(".banner_video").each(function(){
    var slidelength = $(".videoslide").length-1;
    $(this).bind("ended", function() {
      console.log(slidelength);
      if($(this).closest(".videoslide").index() == slidelength){
        var v_next = 1; // 마지막 슬라이드의 비디오가 끝났을때 v_next
      }else{
        var v_next = $(this).closest(".videoslide").index() + 2; // 그 외 v_next
      }
      var v_next_video = $(".videoslide:nth-of-type(" + v_next + ")").find(".banner_video")[0];
      v_next_video.play();
      //초기화
      $(".slide_txt").removeClass("animate");
      $('.main_pagination_bullet').removeClass('active')
      $('.videoslide').removeClass('on');
      $(".videoslide:nth-of-type(" + v_next + ")").siblings().fadeOut(1000);
      
      //next slide show , play
      $(".videoslide:nth-of-type(" + v_next + ")").addClass('on');
      $(".videoslide:nth-of-type(" + v_next + ")").fadeIn(500);
      $(".main_pagination_bullet:nth-of-type(" + v_next + ")").addClass('active');
      $(".videoslide:nth-of-type(" + v_next + ") .slide_txt").addClass("animate");
    })
  })

  // pagination 컨트롤
  $(".main_pagination_bullet").each(function(){
    $(this).click(function(){
      var this_index = $(this).index()+1;
      var this_video = $(".videoslide:nth-of-type(" + this_index + ")").find(".banner_video")[0];
      //초기화
      $('.videoslide').removeClass("on");
      $(".slide_txt").removeClass("animate");
      $('.videoslide').fadeOut("500");
      $(".main_pagination_bullet").removeClass("active")
      setTimeout(function(){
        $(".banner_video").each(function() {
            if (this !== this_video) {
                this.pause();
                this.currentTime = 0;
            }
        });
      },500)
      
      //play
      this_video.play();
      $(".videoslide:nth-of-type(" + this_index + ")").addClass('on');
      $(".videoslide:nth-of-type(" + this_index + ")").fadeIn(500);
      $(this).addClass('active');
      $(".videoslide:nth-of-type(" + this_index + ") .slide_txt").addClass("animate");	
    })
  })	
});
  
//btn_pause, play
$('.btn_pause').click(function() {
  $('.btn_pause').css('display', 'none');
  $('.btn_play').css('display', 'block');
  $('.videoslide.on').find('video')[0].pause();
  $('.main_pagination_bullet').addClass('stop');
  
})
$('.btn_play').click(function() {
  $('.btn_play').css('display', 'none');
  $('.btn_pause').css('display', 'block');
  $('.videoslide.on').find('video')[0].play();
  $('.main_pagination_bullet').removeClass('stop');
})
});
// 스크립트 짜는데 도움준 따봉 chapgpt야 고마워!