slider를 쉽게 만드는 라이브러리 Swiper js

1. 화면분할

- height 62px

- left 60% / 배경 #333

- right 40%/ 배경 #f6f5ef

- h2 / size 17px / weight 700 / margin-right 20px

- 아이콘 사이즈 30px

 

 

2. swiper로 공지사항 리스트 만들기

---

 

1. 화면 분할

(힌트)

section안에

1) notice-line 자식 요소로 bg-left, bg-right, inner 생성

2) inner 자식요소로 inner__left, inner_right 생성

 

<section class="notice">

  <div class="notice-line">
    <div class="bg-left"></div>
    <div class="bg-right"></div>
    <div class="inner">

      <div class="inner__left">
        <h2>공지사항</h2>
        <div class="swiper-container"></div>
        <a href="javascript:void(0)" class="notice-line__more">
          <div class="material-icons">add_circle</div>
        </a>
      </div>
      
      <div class="inner__right">
        <h2>스타벅스 프로모션</h2>
        <div class="toggle-promotion">
          <div class="material-icons">upload</div>
        </div>
      </div>

    </div>
  </div>

 </section>

.notice .notice-line {
  position: relative;
}

.notice .notice-line .bg-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #333;
}

.notice .notice-line .bg-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: #f6f5ef;
}

.notice .notice-line .inner {
  height: 62px;/*부모에 높이값이 없고, 기본값이 세로로 줄어들려고 하기때문에 */
  display: flex;
}

.notice .notice-line .inner__left {
  width: 60%;
  height: 100%;
  background-color: #333;
  display: flex;
  align-items: center;
}

.notice .notice-line .inner__left h2 {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  margin-right: 20px;
}

.notice .notice-line .inner__left .swiper-container { /*중요*/
  height: 62px;
  flex-grow: 1;
}

.notice .notice-line .inner__left .swiper-slide { 
  height: 62px;
  display: flex;
  align-items: center;
}

.notice .notice-line .inner__left .swiper-slide a { 
  color: #fff;
}

.notice .notice-line .inner__left .notice-line__more {
  width: 62px;
  height: 62px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.notice .notice-line .inner__left .notice-line__more .material-icons {
  color: #fff;
  font-size: 30px;
}

.notice .notice-line .inner__right {
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.notice .notice-line .inner__right h2 {
  font-size: 17px;
  font-weight: 700;
}

.notice .notice-line .inner__right .toggle-promotion {
  width: 62px;
  height: 62px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.notice .notice-line .inner__right .toggle-promotion .material-icons {
  font-size: 30px;
}

 

 

2. swiper사용해 수직으로 올라가는 공지사항 리스트 만들기 

(힌트)

1) swiperjs사이트에서 css, js링크 함께 연결

2) js에서 direction, autoplay, loop 속성 부여

*사이트의 demo에서 다양한 예제 확인 가능

Swiper - The Most Modern Mobile Touch Slider

<div class="inner__left">
  <h2>공지사항</h2>
  <div class="swiper-container">
  	<div class="swiper-wrapper">
      <div class="swiper-slide">
          <a href="javascript:void(0)">연말연시 영업시간</a>
      </div>
      <div class="swiper-slide">
          <a href="javascript:void(0)">크리스마스 기간 이벤트 안내</a>
      </div>
      <div class="swiper-slide">
          <a href="javascript:void(0)">당첨자 발표 2021 플래너 증정</a>
      </div>
      <div class="swiper-slide">
          <a href="javascript:void(0)">어플리케이션 버전 업데이트 안내</a>
      </div>
    </div>
  </div>
  <a href="javascript:void(0)" class="notice-line__more">
  	<div class="material-icons">add_circle</div>
  </a>
</div>

// swiper
// new Swiper(선택자, 옵션)

new Swiper('.notice-line .swiper-container', {
  direction: 'vertical',
  autoplay: true,
  loop: true
});