개요

TECH: EXPERT 수업에서 오리지널 미니어처를 제작할 수 있는 기회
그 부분의 페이지에는 Materializecss의 Carrousel을 사용해 3초마다 이미지 전환 페이지를 만들었기 때문에 소개해 드리겠습니다.

Materializecss라는 Carrousel

이미지를 회전할 수 있는 기능입니다.

https://materializecss.com/carousel.html

직접 만든 페이지 소개

생성 사전 요구 사항

Materializecss에서 CDN으로 읽기

편집할 파일

• 보기 파일
• CSS 파일
/js 파일

뷰 파일

about.html.erb

<section class="about-main" >
  <div class="carousel carousel-slider" data-indicators="true" id="big3" >
    <div class="carousel-fixed-item">
      <div class="container">
        <h1 class="white-text">Work Hard See Result</h1>
      <% if user_signed_in? %>
        <a class="btn waves-effect white black-text darken-text-2" href="/" target="_blank">HOME</a>
      <%else%>
        <a class="btn waves-effect white black-text darken-text-2" href="/users/sign_in" target="_blank">Log in</a>
      <%end%>
      </div>
    </div>
    <div class="carousel-item big3pic" id="benchpress">
      <div class="container">
        <h3 class="white-text">Bench Press</h3>
        <p class="white-text">chest</p>
      </div>
    </div>
    <div class="carousel-item big3pic" id="deadlift">
      <div class="container">
        <h3 class="white-text">Dead Lift</h3>
        <p class="white-text">back</p>
      </div>
    </div>
    <div class="carousel-item big3pic"  id="squat">
      <div class="container">
        <h3 class="white-text">Squat</h3>
        <p class="white-text">legs</p>
      </div>
    </div>
  </div>
</section>

"carousel carousel-slider"를 사용했습니다.
'carousel-fixed-item'은 고정적으로 표시하고 싶은 것을 쓰는 것이다.
"carousel carousel-item"부분은 각자의 이미지의 클래스입니다.

CSS 파일

style.css

#big3{
  height: 100vh;
}
#benchpress{
  background-image: url('benchpress.jpg');
  background-size: 100%;
}
#deadlift{
  background-image: url('deadlift.jpg');
  background-size: 100%;
}
#squat{
  background-image: url('squat.jpg');
  background-size: 100%;
}

각각 id를 부여했기 때문에 id에 따라 그림을 변경하십시오.

파일 형식

about.js

$(document).ready(function(){
  $('#big3').carousel(
  {
    dist: 0,
    padding: 0,
    fullWidth: true,
    indicators: true,
    duration: 100,
  }
  );
  autoplay()
  function autoplay() {
      $('#big3').carousel('next');
      autoplay: true,
      setTimeout(autoplay, 3000);
  }
});

autooplay의 함수를 정의했습니다.
3000ms 대 id=big3 다음 카우셀-item
디스플레이로 설정합니다.
옵션은 다음을 참조합니다.

[1] dist:0, => 원근 줌 0

[2]padding:0,=>중앙 이외의 프로젝트의 공백 0

[3]fullWidth:true,=>carousel 전체 너비의 슬라이더

[4]indicators: 진짜, => 표시 표시기

[5]duration:100=>다음 슬라이드로 이동할 때까지 100ms