메가공무원 컴포넌트 가이드

상단 D-day 슬라이드

국가직 5급 1차 D-162

국가직 9급 D-10

소방공무원 D-7

지방직 9급 D-5

국가직 5급 2차 D-3

메가스터디 공무원 메인 페이지에서 사용되는 슬라이드 기능입니다.
상단 우측 헤더(Header)부분에 고정적으로 위치하고 있으며 남은 시험 과목과 그 기간에 대한 정보를 D-day로 표기하여 사용자에게 전달해줍니다.
기본적으로 아래에서 위로 자연스럽게 넘어가는 효과와 함께 3초 단위로 슬라이드가 변경됩니다.


  
    국가직 5급 1차 D-162
    국가직 9급 D-10
    소방공무원 D-7
    지방직 9급 D-5
    국가직 5급 2차 D-3

$('.dday_wrap').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  infinite: true,
  dots: false,
  arrows: false,
  speed: 200,
  autoplaySpeed: 3000,
  autoplay: true,
  rows: 0,
  vertical: true
});

EXAMPLE

#디데이
#날짜
#슬라이드

헤더 좌측 슬라이드

메가스터디 공무원 메인 페이지에서 사용되는 슬라이드 배너 기능입니다.
상단 좌측 헤더(Header)부분에 고정적으로 위치하고 있으며 클릭 시, 홍보 및 이벤트 페이지로 연결됩니다.
기본적으로 자연스럽게 넘어가는 효과 없이, 보여지고 있는 슬라이드가 3초 단위로 변경됩니다.

.hd_left_bnr {margin: auto;}

$('.hd_slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  infinite: true,
  dots: false,
  arrow: true,
  speed: 0,
  autoplaySpeed: 3000,
  autoplay: true,
});

EXAMPLE

#배너
#화살표
#메인상단

우측 퀵 슬라이드

메가스터디 공무원 메인 페이지에서 사용되는 슬라이드 배너 기능입니다.
중앙 우측 부분에 주로 위치하고 있으며 클릭 시, 홍보 및 이벤트 페이지로 연결됩니다.
기본적으로 자연스럽게 넘어가는 효과 없이, 보여지고 있는 슬라이드가 3초 단위로 변경됩니다.


.main_exhibi.d0420 {margin: auto;}

$('#main_exhibi_bs .exhibi_sd').slick({
  infinite: true,
  arrow: false,
  speed: 0,
  autoplaySpeed: 3000,
  autoplay: true,
  dots: true,
  fade: true,
});

EXAMPLE

#배너슬라이드
#메인중앙
#이벤트페이지연결

메인 배너 슬라이드

메가’s PICK 기획전

메가스터디 공무원 메인 페이지에서 사용되는 슬라이드 배너 기능입니다.
페이지 중앙부에 위치하고 있으며 반응형의 경우 Dot 슬라이드 버튼이 나타납니다. 또한 배너를 클릭할 경우, 홍보 및 이벤트 페이지로 연결됩니다.
기본적으로 우측에서 좌측으로 자연스럽게 넘어가는 효과와 함께 3초 단위로 슬라이드가 변경됩니다.


  
    
      메가’s PICK 기획전
      더보기

var mainEventexhibi_lng = $('#exhibi_roll .item').length;
var mainEventexhibi_num = $('.exhibi_wrap .counting > strong');
$('.exhibi_wrap .counting .total').html(mainEventexhibi_lng);

$('#exhibi_roll').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  infinite: true,
  dots: false,
  arrow: true,
  speed: 200,
  autoplaySpeed: 3000,    
  autoplay: true,
  //initialSlide: mainEventexhibi_load,
  dots: true,
  responsive: [{
    breakpoint: 1200,
    settings: {
      slidesToShow: 1,
      }
    },{
      breakpoint: 769,
      settings: {
        slidesToShow: 1,
    }
  }]
});
function exhibiPcwrap_focus() {
  if ($(".exhibi_wrap").hasClass('on')) {
    $(".exhibi_wrap").removeClass('on');
  } else {
    $(".exhibi_wrap").addClass('on');
  }
}

EXAMPLE

#메인배너
#링크연결
#펼치기

후기 슬라이드

메가스터디 공무원 홍보 및 이벤트 페이지에서 사용되는 슬라이드 기능입니다.
주로 강의 후기 등의 정보를 사용자에게 전달하기 위하여 사용됩니다. 이미지 파일 교체를 통해 다양한 후기 등의 내용을 변경할 수 있습니다.
기본적으로 우측에서 좌측으로 3초마다 슬라이드가 이동됩니다.

.review_slider { position:absolute; top:0; left:50%; transform:translateX(-50%); width:255%; }
.review_slider .item { color:#fff; }
.review_slider .item img { width:95%; display:block; margin:auto; }
.review_slider .slick-slide { opacity:.2; transition:all .3s; }
.review_slider .slick-slide.on { opacity:1; }

@media (max-width:1200px){
  .review_slider:before,
  .review_slider:after { display:none; }
  .review_slider { position:static; top:0; left:0; transform:translateX(0); width:100%; }
  .review_slider .item img { width:95%; display:block; margin:auto; }
}

$(".review_slider").slick({
  arrows: true,
  dots : false,
  infinite: true,
  slidesToShow: 7,
  //slidesToScroll: 3,
  autoplaySpeed: 3000,
  autoplay: true,
  variableWidth: false,
  centerMode: true,
  centerPadding: '5px',
  touchThreshold: 100,
  responsive: [ 
    {  
      breakpoint: 1200,
      settings: {
        slidesToShow:3 
      } 
    }
  ]
});
slider_on();
$('.review_slider').on('afterChange', function (event, slick, currentSlide, nextSlide) {
  //var i = (currentSlide ? currentSlide : 0) + 1;
  slider_on();
});
function slider_on(){
  $(".slick-slide").removeClass("on");
  var cur_slide = $(".slick-slide.slick-current.slick-active.slick-center");
  cur_slide.addClass("on");
  cur_slide.prev().addClass("on");
  cur_slide.next().addClass("on");
}

EXAMPLE

#이벤트페이지
#후기
#자동롤링

후기 슬라이드 2

메가스터디 공무원 홍보 및 이벤트 페이지에서 사용되는 슬라이드 기능입니다.
주로 강의 후기 등의 정보를 사용자에게 전달하기 위하여 사용됩니다. 이미지 파일 교체를 통해 다양한 후기 등의 내용을 변경할 수 있습니다.
기본적으로 우측에서 좌측으로 3초마다 슬라이드가 이동됩니다. 또한 하단부의 슬라이드 버튼을 통해서도 이동이 가능합니다.

$('.con01_sd').slick({
  centerMode: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  variableWidth: true,
  centerPadding: '20px',
  autoplay: true,
  arrows: false,
  dots:true,
  autoplaySpeed: 3000,
  responsive: [
    {
      breakpoint: 992,
      settings: {
        slidesToShow: 1,
        variableWidth: false,
        autoplay: true,
      }
    }
  ]
});

EXAMPLE

#강사홍보
#후기정보
#기다란네비게이션

출판 모의고사기획전 슬라이드

메가스터디 공무원 홍보 및 기획전 페이지에서 사용되는 슬라이드 기능입니다.
공개된 교재들을 홍보하기 위해 사용됩니다. 우측에서 좌측으로 자연스럽게 흐르며 넘어갑니다.

.bookSlider--bind { position:relative; margin:-12px -267px 0; } 
.bookSlider--bind .icon_update { position:absolute; top:-48px; left:-48px; z-index: 2; } 
.bookSlider--bind .bookList { padding:0 12px; padding-bottom: 10px; width:282px; } 

@media (max-width: 1670px){
  .bookSlider--bind { margin: -12px auto 0; } 
}

@media (max-width: 1200px){
  .bookSlider--bind { margin:9% 5% 0; } 
  .bookSlider--bind .icon_update { top: -21%; left: -3% } 
  .bookSlider--bind .bookList { padding:0 12px; width:220px; } 
}

@media (max-width: 768px){
  .bookSlider--bind .icon_update { width: 70px; top:-25px; } 
  .bookSlider--bind .bookList { padding:0 12px; width:180px; }
}

$('.bookSlider').slick({
  rows: 0,
  centerMode: true,
  slidesToShow: 5,
  variableWidth: true,
  autoplay: true,
  autoplaySpeed:0,
  speed:3000,
  cssEase: 'linear',
  arrows: false,
  dots: false
});

EXAMPLE

#교재홍보
#와이드구성
#끊김없이흐르기

2023달력+굿즈배포이벤트 슬라이드

메가스터디 공무원 홍보 및 이벤트 페이지에서 사용되는 슬라이드 기능입니다.
Border 및 Scale 효과를 이용하여 슬라이드 중앙에 오게되는 이미지를 표시하여 줍니다.

.concept_slider {position:relative;margin: 0 -1470px 0;}
.concept_slider .slick-slide{margin: 0;transform: scale(0.75);transition: all 0.3s;margin: 0;}
.concept_slider .slick-slide img{display: inline-block;}
.concept_slider .slick-slide.slick-current{transform: scale(1);}
.concept_slider .slick-slide.slick-current .item{border:5px solid #3fb882}
.concept_slider .slick-arrow{display: none !important;}
.concept_slider::before{content:'';background:url(https://img.megagong.net/m/2022/1220_goods/con_img31.png) no-repeat;position: absolute;bottom: -82px;left: 50%;width: 330px;height: 170px;z-index: 1;margin: 0 0 0 131px;}

@media screen and (max-width: 1200px){
  .concept_slider{margin: 0px -8vw 0;}
  .concept_slider::before{width: 22vw;height: 12vw;margin: 0 0 0 6%;background-size: 100%;bottom: -5vw}
  .concept_slider .slick-slide.slick-current .item{border-width:3px}
}

@media screen and (max-width: 576px){
  .concept_slider{margin: 0px -55vw 0;}
  .concept_slider::before{width: 33vw;height: 19vw;margin: 0 0 0 4%;background-size: 100%;bottom: -10vw}
  .concept_slider .slick-slide.slick-current .item{border-width:2px}
}

$('#concept_slider').slick({
  autoplay: true,
  autoplaySpeed: 2000,  
  slidesToShow: 7,
  arrows: false,	
  centerMode: true,
  pauseOnHover: false,
  focusOnSelect: true,
  touchThreshold: 100,
  responsive: [{
    breakpoint: 1201,
    settings: {
      slidesToShow: 3,
    }
  }]    
})

EXAMPLE

#굿즈홍보
#캘린더
#슬라이드효과

합격 키워드북 + 페이징 슬라이드

메가스터디 공무원 홍보 및 교재 홍보 페이지에서 사용되는 슬라이드 기능입니다.
교재 내부의 정보들을 슬라이드를 통해 제공하여 줍니다.

.concept_slider {position:relative;margin: 0 -1470px 0;}
.concept_slider .slick-slide{margin: 0;transform: scale(0.75);transition: all 0.3s;margin: 0;}
.concept_slider .slick-slide img{display: inline-block;}
.concept_slider .slick-slide.slick-current{transform: scale(1);}
.concept_slider .slick-slide.slick-current .item{border:5px solid #3fb882}
.concept_slider .slick-arrow{display: none !important;}
.concept_slider::before{content:'';background:url(https://img.megagong.net/m/2022/1220_goods/con_img31.png) no-repeat;position: absolute;bottom: -82px;left: 50%;width: 330px;height: 170px;z-index: 1;margin: 0 0 0 131px;}

@media screen and (max-width: 1200px){
  .concept_slider{margin: 0px -8vw 0;}
  .concept_slider::before{width: 22vw;height: 12vw;margin: 0 0 0 6%;background-size: 100%;bottom: -5vw}
  .concept_slider .slick-slide.slick-current .item{border-width:3px}
}

@media screen and (max-width: 576px){
  .concept_slider{margin: 0px -55vw 0;}
  .concept_slider::before{width: 33vw;height: 19vw;margin: 0 0 0 4%;background-size: 100%;bottom: -10vw}
  .concept_slider .slick-slide.slick-current .item{border-width:2px}
}

$('#concept_slider').slick({
  autoplay: true,
  autoplaySpeed: 2000,  
  slidesToShow: 7,
  arrows: false,	
  centerMode: true,
  pauseOnHover: false,
  focusOnSelect: true,
  touchThreshold: 100,
  responsive: [{
    breakpoint: 1201,
    settings: {
      slidesToShow: 3,
    }
  }]    
})

EXAMPLE

#키워드북
#페이징
#교재정보

2023 거꾸로 플래너 슬라이드

메가스터디 공무원 홍보 및 이벤트 페이지에서 사용되는 슬라이드 기능입니다.
좌우의 Arrow 버튼 외에도 하단의 네비게이션 슬라이드를 클릭하여 이미지를 넘길 수 있습니다.

.planner_slider_for { position: relative; margin: 0 120px; } 
.planner_slider_for::before,
.planner_slider_for::after { position: absolute; content: ''; background-repeat: no-repeat; background-position: center; background-size: contain; z-index: 1; } 
.planner_slider_for::before { top: -21px; left: -35px; width: 134px; height: 101px; background-image: url('https://img.megagong.net/m/2022/1215_planner/con3_deco1.png'); } 
.planner_slider_for::after { right: -39px; bottom: -23px; width: 136px; height: 101px; background-image: url('https://img.megagong.net/m/2022/1215_planner/con3_deco3.png'); } 
.planner_slider_for .slick-arrow { position: absolute; top: 50%; transform: translate(0, -50%); width: 50px; height: 100px; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: contain; z-index: 1; } 
.planner_slider_for .slick-arrow.slick-prev { left: -120px; background-image: url('https://img.megagong.net/m/2022/1215_planner/con1_slider_arrow_left.png'); } 
.planner_slider_for .slick-arrow.slick-next { right: -120px; background-image: url('https://img.megagong.net/m/2022/1215_planner/con1_slider_arrow_right.png'); } 

.planner_slider_nav { margin-top: 50px; } 
.planner_slider_nav .slick-slide { border: 2px solid transparent; cursor: pointer; } 
.planner_slider_nav .slick-slide.slick-current { border: 2px solid #000; } 

@media (max-width:768px) {
  .planner_slider_for { margin: 0 auto; } 
  .planner_slider_for::before, .planner_slider_for::after { width: 14vw; height: 10vw; } 
  .planner_slider_for::before { top: -6px; left: -12px; } 
  .planner_slider_for::after { right: -17px; bottom: 39px; } 
  .planner_slider_for .slick-dots { display: flex; flex-direction: row; align-items: center; justify-content: center; margin-top: 30px; padding: 4px; background-color: rgba(0,0,0,.1); border-radius: 30px; } 
  .planner_slider_for .slick-dots li { flex: 1; height: 10px; margin-right: 4px; background-color: rgba(0,0,0,0); border-radius: 30px; } 
  .planner_slider_for .slick-dots li:last-of-type { margin-right: 0; } 
  .planner_slider_for .slick-dots li.slick-active { background-color: #459361; } 
  .planner_slider_for .slick-dots li button { color: transparent; font-size: 0; } 
  .planner_slider_nav { display: none; } 
}

$(window).resize(function(){
  $('.planner_slider_nav')[0].slick.refresh();
});
  
$('.planner_slider_for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
  arrows: true,
  fade: true,
  pauseOnHover: false,
  asNavFor: '.planner_slider_nav',
  responsive: [
    {
    breakpoint: 769,
    settings: {
        dots: true,
        arrows: false
      }
    }
  ]
});

$('.planner_slider_nav').slick({
  slidesToShow: 10,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
  asNavFor: '.planner_slider_for',
  dots: true,
  centerMode: true,
  focusOnSelect: true,
});

EXAMPLE

#플래너
#이미지네비게이션
#굿즈홍보

온라인 모의고사 게이트 + 탭 내부 슬라이드

국어
영어
한국사

국어

EVENT

공무원 수험가를 가장 뜨겁게 달군 모의고사
완벽에 갓벽을 더하는 100일의 기적

국어 이유진
백일기도 모의고사

응시 기간 : 12/26(월)~4/3(월)

OPEN >

국어

EVENT

최고의 적중률! 보석같은 문항!
이것이 진짜 실전모의고사다!

윤주국어
실전 모의고사

2023. 01. 03.
Coming Soon
영어

EVENT

'적정'한 문항, '적합'한 학습으로
'적중'하는 조태정의 동형모의고사입니다.

조태정
실전 동형 모의고사

응시 기간 : 1/11(수)~4/2(일)

OPEN >
한국사

EVENT

압도적 선택으로 증명된 최고의 모의고사로
나의 합격여부를 체크하세요.

한국사 고종훈
동형모의고사 시즌1

응시 기간 : 11/28(월) ~ 1/13(금)

OPEN >

한국사

시험일까지 매주 2회 엄선된 모의고사로
실력을 점수로 만드는 기회로 활용하세요!

한국사 고종훈
동형모의고사 시즌2

응시 기간 : 1/16(월)~3/7(금)

2023. 01. 14.
Coming Soon

메가스터디 공무원 홍보 및 이벤트 페이지에서 사용되는 슬라이드 기능입니다.
각각의 탭 내부에 별도의 슬라이드 기능을 제공하고 있습니다.


  
      국어
      영어
      한국사
  
  
      
      
          
              
                  
                      
                          
                          
                          국어
                      
                      
                          
                              
                              EVENT
                          
                          
                              공무원 수험가를 가장 뜨겁게 달군 모의고사 
완벽에 갓벽을 더하는 100일의 기적
                              국어 이유진 
백일기도 모의고사
                              응시 기간 : 12/26(월)~4/3(월)
                          
                          OPEN >
                      
                  
                  
                    
                        
                        
                        국어
                    
                    
                        
                              
                            EVENT
                        
                        
                            최고의 적중률! 보석같은 문항! 
이것이 진짜 실전모의고사다!
                            윤주국어 
실전 모의고사
                        
                        
                            2023. 01. 03. 
Coming Soon
                        
                        
                    
                
              
          
      
      
          
              
                  
                    
                        
                        
                        영어
                    
                    
                        
                            
                            EVENT
                        
                        
                            '적정'한 문항, '적합'한 학습으로
'적중'하는 조태정의 동형모의고사입니다.
                            조태정 
실전 동형 모의고사
                            응시 기간 : 1/11(수)~4/2(일)
                        
                        OPEN >
                    
                
              
          
      
      
          
              
                  
                      
                          
                          
                          한국사
                      
                      
                          
                              
                              EVENT
                          
                          
                              압도적 선택으로 증명된 최고의 모의고사로 
나의 합격여부를 체크하세요.
                              한국사 고종훈 
동형모의고사 시즌1
                              응시 기간 : 11/28(월) ~ 1/13(금)
                          
                          OPEN >
                      
                  
                  
                      
                          
                          
                          한국사
                      
                      
                          
                              
                          
                          
                              시험일까지 매주 2회 엄선된 모의고사로 
실력을 점수로 만드는 기회로 활용하세요!
                              한국사 고종훈 
동형모의고사 시즌2
                              응시 기간 : 1/16(월)~3/7(금)
                          
                          
                              2023. 01. 14. 
Coming Soon

.mockexam_obj{text-align:left;position:relative;}
.mockexam_obj .edge{display:block;position: relative;}
.mockexam_obj .edge.edge2, .mockexam_obj .edge.edge3{display:none;position:absolute;left:0;top:0;}
.mockexam_obj.dimm .edge.edge2{display:block;}
.mockexam_obj.dimm.closed .edge.edge2{display:none;}
.mockexam_obj.dimm.closed .edge.edge3{display:block;}
.mockexam_obj .edge_wrp{position:relative;display:inline-block;z-index:1;vertical-align:bottom;}
.mockexam_obj .edge_wrp .edge img{vertical-align:top;}
.mockexam_obj .mock_subject{font-size:28px;font-weight:900;color:#000;left:0;top:30px;position:absolute;text-align:center;width:100%;padding-right:50px;}
.mockexam_thumb{position:relative;background-color:#ededed;text-align:center;border-radius:0 20px 20px 20px;overflow:hidden;padding-top:35px;}
.mockexam_thumb .tec_img_wrp{position: relative;height:0;padding:0 0 293px 0;}
.mockexam_thumb .tec_img_wrp .tec_img{display:inline-block;width:240px;}
.mockexam_thumb .tec_img_wrp .evt_label{display:inline-block;font-size:20px;font-weight:900;color:#000;background-color:#25c4fe;position: absolute;right:30px;top:0;border-radius:20px;padding:10px 13px;line-height:1;}
.mockexam_thumb .tec_img_wrp.multi .tec_img{position:absolute;}
.mockexam_thumb .tec_img_wrp.multi .tec_img:nth-child(1){left:4%;}
.mockexam_thumb .tec_img_wrp.multi .tec_img:nth-child(2){position:relative;}
.mockexam_thumb .tec_img_wrp.multi .tec_img:nth-child(3){right:4%;}
.mockexam_thumb .tec_con_wrp{position: relative;background-color:#fff;padding:30px 50px 110px;height:331px;}
.mockexam_thumb .tec_con_wrp .mock_desc{font-size:18px;color:#000;}
.mockexam_thumb .tec_con_wrp .mock_title{font-size:30px;font-weight:900;color:#000;line-height:1.2;margin-top:5px;}
.mockexam_thumb .tec_con_wrp .mock_date{font-size:16px;font-weight:900;color:#000;padding-top:20px;margin-top:20px;border-top:1px solid #3e3b10;}
.mockexam_thumb .mock_link{font-size:25px;font-weight:bold;color:#fff;background-color: #000000;display:block;padding:23.5px 0;position: absolute;left:0;bottom:0;width:100%;}
.mockexam_thumb .mock_dimm{position: absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(0, 34, 47, 0.8);}
.mockexam_thumb .mock_dimm span{display:block;color:#fff;position:absolute;left:0;top:50%;transform:translateY(-50%);text-align:center;width:100%;font-size:28px;font-weight:900;text-transform:uppercase;}
.mockexam_thumb .mock_dimm span.closed:before{content:'';display:block;background:url(https://img.megagong.net/m/2022/1214_examgate/ic_lock.png) 0 0 no-repeat;width:43px;height:62px;margin:0 auto 10px;}

.mockexam_gate{max-width:768px;margin:0 auto;}
.mockexam_gate .tab_base{width:100%;}
.mockexam_gate .tab_base:after{content:'';display:block;clear:both;}
.mockexam_gate .tab_base > li{float:left;width:33.333%;border-right:1px solid #1e2021;background-color:#ffffff;text-align:center;}
.mockexam_gate .tab_base > li:nth-child(3n){width:33.334%;border-right:0;}
.mockexam_gate .tab_base > li > a{display:block;padding:15px 0;font-size:18px;color:#1e2021;}
.mockexam_gate .tab_base > li.on{background-color:#25c4fe;}
.mockexam_gate .tab_base > li.on > a{color:#fff;}
.mockexam_gate .tab_base > li:nth-child(4), .mockexam_gate .tab_base > li:nth-child(5), 
.mockexam_gate .tab_base > li:nth-child(6){border-top:1px solid #1e2021;}
.mockexam_gate .panel_base > li{padding:4% 4% 0;}
.mockexam_gate{opacity:0;transition:opacity 0.2s;}
.mockexam_gate.isReady{opacity:1;}
.mg_slick_wrap .slick-dots li button{background-color: #fff;border:1px solid #25c4fe;width:16px;height:16px;}
.mg_slick_wrap .slick-dots li.slick-active button{background-color: #25c4fe;}

@media screen and (max-width:414px) {
  .mg_slick_wrap .slick-dots{margin-top:0;}
  .mg_slick_wrap .slick-dots li button{width:8px;height:8px;}
}

var subjectSlide = $('.subject_slide').slick({
  infinite: false,
  speed: 500,
  arrows: false,
  draggable: true,
  touchThreshold: 100,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
});
$('.tab_base li a').on('click', function(){
  subjectSlide.slick('refresh');
  subjectSlide.slick('setPosition');
});
  
var RANDOM_IDX = Math.floor(Math.random() * $('.panel_base > li').length);
setTimeout(function(){
  $('.mockexam_gate').find('.tab_base li').eq(RANDOM_IDX).find('a').click();
}, 250);

setTimeout(function(){
  $('.mockexam_gate').addClass('isReady');
}, 500);

EXAMPLE

#탭내부슬라이드
#강사홍보
#모의고사

PSAT 강좌 후기 + 반응형 슬라이드

메가스터디 공무원 홍보 및 이벤트 페이지에서 사용되는 슬라이드 기능입니다.
슬라이드 이미지를 통하여 사용자가 강좌후기를 보다 더 수월히 확인할 수 있도록 돕습니다.

.reviewSlide_wrp{text-align:center;}
.reviewSlide_wrp .slider { margin-top:50px; }
.reviewSlide_wrp .slick-slide { text-align:center; }
.reviewSlide_wrp .slick-slide img { display:block; margin:auto; }
.reviewSlide_wrp .slick-arrow { position:absolute; top:50%; z-index:5; width:47px; height:90px; font-size:0; transform:translateY(-50%);  }
.reviewSlide_wrp .slick-arrow.slick-prev { left:-80px; background: url(https://img.megagong.net/m/2022/1128_psat/btn_prev_con4.png) no-repeat center center; }
.reviewSlide_wrp .slick-arrow.slick-next { right:-80px; background: url(https://img.megagong.net/m/2022/1128_psat/btn_next_con4.png) no-repeat center center; }

@media screen and (max-width: 1200px) {
  .reviewSlide_wrp .slider { margin-top:4vw; }
  .reviewSlide_wrp .slick-arrow { width:40px; height:50px; }
  .reviewSlide_wrp .slick-arrow.slick-prev { left:0; background-size:60%; }
  .reviewSlide_wrp .slick-arrow.slick-next { right:0; background-size:60%; }
  .reviewSlide_wrp .slick-dots { margin-top:-1vw; }
  .reviewSlide_wrp .slick-dots li { display:inline-block; vertical-align:top; margin:0 5px;  }
  .reviewSlide_wrp .slick-dots li button { width:10px; height:10px; border-radius:5px; background:#b8b8b8; font-size:0; }
  .reviewSlide_wrp .slick-dots li.slick-active button { background:#90f398; width:40px; }
}

$('.reviewSlide_wrp .slider').slick({
  slidesToShow: 2,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
  dots: false,
  infinite: true,
  speed: 1000,
  arrows: true,
  pauseOnHover: false,
  responsive: [ 
    { 
      breakpoint: 768, 
      settings: { 
        slidesToShow: 1,
        arrows: false,
        dots: true,
      } 
    }, 
  ]
});

EXAMPLE

#후기
#슬라이드
#반응형

카드 호버시 flip 효과 슬라이드

천제 풀기
정말 추천드립니다!

2022 국가직 9급 세무직 합격생

결과적으로 천제를 많이
돌림으로써 시간도 단축하고
문제푸는 능력도 길러졌다고
생각하기 때문에 미리 천제 풀기
정말 추천드립니다!

시험 전날까지도
세법천제를 봤어요.

2022 국가직 9급 세무직 합격생

천제에서 봤던 게 시험에 나오고,
계산문제도 천제만큼은 아니지만
천제에서 연습했던 것 처럼 풀었어요.
시험문제 풀 때
정말 술술 풀려서 뭐지?싶었는데
채점하니까 90점이여서
정말 놀랐어요.

천제 문제 반복해서
푸는 걸 추천합니다.

2022 국가직 9급 세무직 합격생

기출하고 천제 모두 기본 3회는 풀었고,
3회 이후에도 풀이법이
바로 떠오르지않는 문제는
잘씹기에 표시해서 떠오를 때까지
수를 세지않고 계속 푼 거 같아요.

기본서, 기출, 천제를
3박자로 병행

국가직 9급 세무직 합격생

회계는 시간을 단축시키기 위해
계산을 빨리해야 하는
노력이 필요했기 때문에
기본서, 기출, 천제를
3박자로 병행해서
파트별로 쭉 푸는 방식으로
공부했습니다.

천제를 못해도
15회독정도
한 것 같습니다.

2022 7급 재경직 합격생

천제를 못해도 15회독 정도
한 것 같습니다.
그러다 보니까 어느순간부터는
문제를 읽으면 손이
자동적으로 나가는 수준이 되고
한 10회독을 넘기다 보면 문제푸는
속도가 굉장히 빨라집니다.

회계학이라는 과목이
가장 재미있는,
효자 과목이 되었습니다.

국가직·지방직 9급 세무직 합격생

문제를 당황하지 않고
빠르게 풀어내기 위하여
회계 천제를 계속해서 회독하여
익숙하게 만들었습니다.

천제를 3회독까지
하고 시험장
들어갔습니다.

국가직 7급 세무직 합격생

천제를 3회독까지 하고 시험장
들어갔습니다. 이게 정말 힘들어요.
하지만 어느 순간을 넘어가니
이해 못했던 부분, 잘 못 알고
있던 부분 등을 캐치하게 되고
개념이 정확하게 잡혀갔습니다.

천제 2회독부터는
어떻게 풀어야할지
감이 오더라구요.

2022 국가직·지방직 9급 세무직 합격생

천제도 1번 회독하고
강의도 듣고 하다 보니 익숙해져서
2회독부터는 어떻게 풀어야할지
감이 오더라구요.

메가스터디 공무원 홍보 및 이벤트 페이지에서 사용되는 슬라이드 기능입니다.
슬라이드 카드에 위에 마우스를 올릴 경우(Hover), 카드가 Flip되면서 뒷면으로 전환되는 효과가 나타납니다.

<%
    Function reviewItems()
%>

    
        
            
                천제 풀기 
정말 추천드립니다!
                2022 국가직 9급 세무직 합격생
            
        
        
            
                결과적으로 천제를 많이 
돌림으로써 시간도 단축하고 
문제푸는 능력도 길러졌다고 
생각하기 때문에 미리 천제 풀기 
정말 추천드립니다!
            
        
    


    
        
            
                시험 전날까지도 
세법천제를 봤어요.
                2022 국가직 9급 세무직 합격생
            
        
        
            
                천제에서 봤던 게 시험에 나오고, 
계산문제도 천제만큼은 아니지만 
 천제에서 연습했던 것 처럼 풀었어요. 
시험문제 풀 때 
정말 술술 풀려서 뭐지?싶었는데 
채점하니까 90점이여서 
정말 놀랐어요.
            
        
    


    
        
            
                천제 문제 반복해서 
푸는 걸 추천합니다.
                2022 국가직 9급 세무직 합격생
            
        
        
            
                기출하고 천제 모두 기본 3회는 풀었고, 
3회 이후에도 풀이법이 
바로 떠오르지않는 문제는 
잘씹기에 표시해서 떠오를 때까지 
수를 세지않고 계속 푼 거 같아요.
            
        
    


    
        
            
                기본서, 기출, 천제를 
3박자로 병행
                국가직 9급 세무직 합격생
            
        
        
            
                회계는 시간을 단축시키기 위해 
계산을 빨리해야 하는 
노력이 필요했기 때문에 
기본서, 기출, 천제를 
3박자로 병행해서 
파트별로 쭉 푸는 방식으로 
공부했습니다.
            
        
    


    
        
            
                천제를 못해도 
15회독정도 
한 것 같습니다.
                2022 7급 재경직 합격생
            
        
        
            
                천제를 못해도 15회독 정도 
한 것 같습니다. 
그러다 보니까 어느순간부터는 
문제를 읽으면 손이 
자동적으로 나가는 수준이 되고 
한 10회독을 넘기다 보면 문제푸는 
속도가 굉장히 빨라집니다.
            
        
    


    
        
            
                회계학이라는 과목이 
가장 재미있는, 
효자 과목이 되었습니다.
                국가직·지방직 9급 세무직 합격생
            
        
        
            
                문제를 당황하지 않고 
빠르게 풀어내기 위하여 
회계 천제를 계속해서 회독하여 
익숙하게 만들었습니다. 
            
        
    


    
        
            
                천제를 3회독까지 
하고 시험장 
들어갔습니다.
                국가직 7급 세무직 합격생
            
        
        
            
                천제를 3회독까지 하고 시험장 
들어갔습니다. 이게 정말 힘들어요. 
하지만 어느 순간을 넘어가니 
이해 못했던 부분, 잘 못 알고 
있던 부분 등을 캐치하게 되고 
개념이 정확하게 잡혀갔습니다.
            
        
    


    
        
            
                천제 2회독부터는 
어떻게 풀어야할지 
감이 오더라구요.
                2022 국가직·지방직 9급 세무직 합격생
            
        
        
            
                천제도 1번 회독하고 
강의도 듣고 하다 보니 익숙해져서 
2회독부터는 어떻게 풀어야할지 
감이 오더라구요.
            
        
    

<%
    End Function
%>

    

    
        
            
                천제 풀기 
정말 추천드립니다!
                2022 국가직 9급 세무직 합격생
            
        
        
            
                결과적으로 천제를 많이 
돌림으로써 시간도 단축하고 
문제푸는 능력도 길러졌다고 
생각하기 때문에 미리 천제 풀기 
정말 추천드립니다!
            
        
    


    
        
            
                시험 전날까지도 
세법천제를 봤어요.
                2022 국가직 9급 세무직 합격생
            
        
        
            
                천제에서 봤던 게 시험에 나오고, 
계산문제도 천제만큼은 아니지만 
 천제에서 연습했던 것 처럼 풀었어요. 
시험문제 풀 때 
정말 술술 풀려서 뭐지?싶었는데 
채점하니까 90점이여서 
정말 놀랐어요.
            
        
    


    
        
            
                천제 문제 반복해서 
푸는 걸 추천합니다.
                2022 국가직 9급 세무직 합격생
            
        
        
            
                기출하고 천제 모두 기본 3회는 풀었고, 
3회 이후에도 풀이법이 
바로 떠오르지않는 문제는 
잘씹기에 표시해서 떠오를 때까지 
수를 세지않고 계속 푼 거 같아요.
            
        
    


    
        
            
                기본서, 기출, 천제를 
3박자로 병행
                국가직 9급 세무직 합격생
            
        
        
            
                회계는 시간을 단축시키기 위해 
계산을 빨리해야 하는 
노력이 필요했기 때문에 
기본서, 기출, 천제를 
3박자로 병행해서 
파트별로 쭉 푸는 방식으로 
공부했습니다.
            
        
    


    
        
            
                천제를 못해도 
15회독정도 
한 것 같습니다.
                2022 7급 재경직 합격생
            
        
        
            
                천제를 못해도 15회독 정도 
한 것 같습니다. 
그러다 보니까 어느순간부터는 
문제를 읽으면 손이 
자동적으로 나가는 수준이 되고 
한 10회독을 넘기다 보면 문제푸는 
속도가 굉장히 빨라집니다.
            
        
    


    
        
            
                회계학이라는 과목이 
가장 재미있는, 
효자 과목이 되었습니다.
                국가직·지방직 9급 세무직 합격생
            
        
        
            
                문제를 당황하지 않고 
빠르게 풀어내기 위하여 
회계 천제를 계속해서 회독하여 
익숙하게 만들었습니다. 
            
        
    


    
        
            
                천제를 3회독까지 
하고 시험장 
들어갔습니다.
                국가직 7급 세무직 합격생
            
        
        
            
                천제를 3회독까지 하고 시험장 
들어갔습니다. 이게 정말 힘들어요. 
하지만 어느 순간을 넘어가니 
이해 못했던 부분, 잘 못 알고 
있던 부분 등을 캐치하게 되고 
개념이 정확하게 잡혀갔습니다.
            
        
    


    
        
            
                천제 2회독부터는 
어떻게 풀어야할지 
감이 오더라구요.
                2022 국가직·지방직 9급 세무직 합격생
            
        
        
            
                천제도 1번 회독하고 
강의도 듣고 하다 보니 익숙해져서 
2회독부터는 어떻게 풀어야할지 
감이 오더라구요.

.review_slide_wrap{font-family:'NotoSans KR';}
.reviewDetail .item{color:#2b201a;cursor:pointer;text-align:center;}
.reviewDetail .item .item_inner{margin:10px;height:300px;position:relative;}
.reviewDetail .item .before, .reviewDetail .item .after{position:absolute;left:0;top:0;width:100%;height:100%;display:table;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .5s;}
.reviewDetail .item .before{background-color: #d7b4a1;transform:rotatey(0deg);z-index:2;}
.reviewDetail .item .after{background-color:#fff;transform:rotatey(-180deg);z-index:1;}
.reviewDetail .item:hover .before{transform:rotatey(-180deg);z-index:1;}
.reviewDetail .item:hover .after{transform:rotatey(0deg);z-index:2;}
.reviewDetail .item .before_inner{display:table-cell;vertical-align:middle;}
.reviewDetail .item .before p{font-size:22px;font-weight:900;}
.reviewDetail .item .before span{font-size:15px;border-top:1px solid #b28c77;display:inline-block;padding-top:15px;margin-top:10px;}
.reviewDetail .item .after_inner{display:table-cell;vertical-align:middle;}
.reviewDetail .item .after span{font-size:17px;line-height:25px;}
.reviewDetail .slick-arrow{position:absolute;top:50%;z-index:1;width:23px;height:66px;margin-top:-33px;font-size:0;}
.reviewDetail .slick-arrow.slick-prev{left:-60px;background:url(https://img.megagong.net/m/2022/1109_tax/btn_prev.png) 0 0 no-repeat;}
.reviewDetail .slick-arrow.slick-next{right:-60px;background:url(https://img.megagong.net/m/2022/1109_tax/btn_next.png) 0 0 no-repeat;}

@media screen and (max-width: 1280px){
  .review_slide_wrap{padding:0 30px;}
  .reviewDetail .slick-arrow.slick-prev{left:-30px;}
  .reviewDetail .slick-arrow.slick-next{right:-30px;}
}

@media (max-width: 500px){
  .review_slide.reviewDetail .item .item_inner{height:200px;}
  .review_slide.reviewDetail .item .before p{font-size:16px;}
  .review_slide.reviewDetail .item .before span{font-size:12px;padding-top:10px;margin-top:5px;}
  .review_slide.reviewDetail .item .after span{font-size:12px;line-height:1.4;}
}

@media (max-width: 414px){
  .review_slide.reviewDetail .item .before p{font-size:14px;}
  .review_slide.reviewDetail .item .before span{font-size:11px;}
  .review_slide.reviewDetail .item .after span{font-size:11px;padding:0 5px;display:inline-block;}
  .review_slide.reviewDetail .item .after span br{display:none;}
}

var reviewSlide = $('.review_slide').slick({
    autoplay: true,
    autoplaySpeed: 3000,
    infinite: true,
    speed: 500,
    arrows: true,
    draggable: true,
    touchThreshold: 100,
    slidesToShow: 4,
    slidesToScroll: 1,
    dots: false,
    responsive: [
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 3,
            }
        },
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 2,
            }
        },
    ]
});

$('.reviewDetail').on('click', '.item', function(){
    if (!$(this).hasClass('on')) {
      $(this).addClass('on');
    } else {
      $(this).removeClass('on');
    }
});

EXAMPLE

#플립효과
#후기
#슬라이드

세로 방향 슬라이드 1ST

조*빈 (행정직)

박*백 (세무직)

강*목 (교정직)

이*영 (행정직)

김*배 (세무직)

조*진 (직업상담직)

최*아 (행정직)

정*은 (검찰직)

김*수 (교정직)

조*우 (세무직)

공*원 (행정직)

김*미 (행정직)

이*일 (교정직)

태*호 (행정직)

한*현 (세무직)

최*훈 (행정직)

윤*현 (보호직)

이*원 (행정직)

오*민 (세무직)

박*연 (세무직)

송*주 (세무직)

김*리 (행정직)

김*연 (행정직)

이*수 (교정직)

유*승 (교정직)

김*리 (행정직)

정*선 (행정직)

이*솔 (세무직)

강*희 (행정직)

박*필 (세무직)

이*찬 (행정직)

김*연 (세무직)

양*목 (세무직)

이*현 (세무직)

안*빈 (행정직)

송*영 (행정직)

이*민 (세무직)

임*금 (세무직)

진* (세무직)

김*현 (세무직)

류*진 (세무직)

권*율 (세무직)

김*나 (행정직)

이*미 (행정직)

한*성 (관세직)

최*희 (세무직)

곽*휘 (행정직)

손*혁 (교정직)

고*수 (교정직)

장*경 (행정직)

이*광 (교정직)

윤*빈 (행정직)

배*천 (세무직)

김*비 (세무직)

김*영 (교정직)

하*정 (세무직)

최*서 (세무직)

임*석 (보호직)

천*이 (행정직)

박*근 (세무직)

김*현 (행정직)

고*준 (교정직)

김*은 (세무직)

김*민 (세무직)

장*소리 (행정직)

이*찬 (행정직)

김*헌 (교정직)

김*현 (행정직)

윤*영 (세무직)

김*지 (행정직)

김*빈 (교정직)

이*영 (세무직)

유*석 (교정직)

박*순 (교정직)

이*호 (행정직)

김*호 (세무직)

김*현 (행정직)

김*영 (행정직)

유*연 (행정직)

이*민 (세무직)

박*우 (행정직)

이*연 (행정직)

박*현 (직업상담직)

이*현 (행정직)

최*지 (세무직)

송*근 (세무직)

하*준 (세무직)

박*희 (행정직)

배*희 (행정직)

정*나 (세무직)

윤*영 (행정직)

유*아 (행정직)

김*우 (행정직)

문*우 (행정직)

황*주 (행정직)

유*아 (행정직)

기*주 (행정직)

하*은 (행정직)

천*명 (행정직)

박*연 (행정직)

경*지 (세무직)

최*정 (세무직)

김*경 (세무직)

오*경 (행정직)

정*경 (행정직)

김*정 (행정직)

이*영 (행정직)

김*봉 (세무직)

박*해 (행정직)

이*리 (세무직)

임*호 (행정직)

진*훈 (행정직)

이*택 (세무직)

오*주 (보호직)

이*주 (행정직)

이*우 (교정직)

김*경 (세무직)

이*석 (보호직)

김*연 (교정직)

강*구 (교정직)

김*원 (세무직)

박*욱 (교정직)

강*령 (세무직)

박*모 (교정직)

이*민 (행정직)

문*무 (행정직)

이*호 (세무직)

강*정 (직업상담직)

김*지 (세무직)

권*경 (행정직)

하*민 (행정직)

변*지 (세무직)

박*연 (세무직)

정*비 (행정직)

이*후 (교정직)

박*권 (행정직)

이*수 (세무직)

이*환 (행정직)

박*은 (세무직)

권*완 (행정직)

이*쁨 (행정직)

박*재 (행정직)

전*현 (직업상담직)

여*진 (세무직)

김*경 (행정직)

정*훈 (행정직)

임*수 (행정직)

문*진 (세무직)

이*정 (세무직)

박*운 (행정직)

현*창 (세무직)

천*민 (행정직)

이*연 (세무직)

방*진 (행정직)

박*경 (세무직)

오*형 (교정직)

김*호 (행정직)

조*봄 (행정직)

송*정 (직업상담직)

김*서 (세무직)

이*진 (행정직)

박*지 (행정직)

전*병 (행정직)

김*로 (행정직)

김*석 (행정직)

소*주 (관세직)

윤*희 (세무직)

황*아 (세무직)

정*아 (세무직)

심*섭 (세무직)

조*비 (세무직)

김*정 (교정직)

메가스터디 공무원 홍보 및 이벤트 페이지에서 사용되는 슬라이드 기능입니다.
순차적으로 성명이 적힌 행이 위로 올라가면서(세로 방향) 순환 반복되는 구조로 이루어져 있습니다.


  조*빈 (행정직)
  박*백 (세무직)
  강*목 (교정직)
  이*영 (행정직)
  김*배 (세무직)
  조*진 (직업상담직)
  최*아 (행정직)
  정*은 (검찰직)
  김*수 (교정직)
  조*우 (세무직)
  공*원 (행정직)
  김*미 (행정직)
  이*일 (교정직)
  태*호 (행정직)
  한*현 (세무직)
  최*훈 (행정직)
  윤*현 (보호직)
  이*원 (행정직)
  오*민 (세무직)
  박*연 (세무직)
  송*주 (세무직)
  김*리 (행정직)
  김*연 (행정직)
  이*수 (교정직)
  유*승 (교정직)
  김*리 (행정직)
  정*선 (행정직)
  이*솔 (세무직)
  강*희 (행정직)
  박*필 (세무직)
  이*찬 (행정직)
  김*연 (세무직)
  양*목 (세무직)
  이*현 (세무직)
  안*빈 (행정직)
  송*영 (행정직)
  이*민 (세무직)
  임*금 (세무직)
  진*	(세무직)
  김*현 (세무직)
  류*진 (세무직)
  권*율 (세무직)
  김*나 (행정직)
  이*미 (행정직)
  한*성 (관세직)
  최*희 (세무직)
  곽*휘 (행정직)
  손*혁 (교정직)
  고*수 (교정직)
  장*경 (행정직)
  이*광 (교정직)
  윤*빈 (행정직)
  배*천 (세무직)
  김*비 (세무직)
  김*영 (교정직)
  하*정 (세무직)
  최*서 (세무직)
  임*석 (보호직)
  천*이 (행정직)
  박*근 (세무직)
  김*현 (행정직)
  고*준 (교정직)
  김*은 (세무직)
  김*민 (세무직)
  장*소리 (행정직)
  이*찬 (행정직)
  김*헌 (교정직)
  김*현 (행정직)
  윤*영 (세무직)
  김*지 (행정직)
  김*빈 (교정직)
  이*영 (세무직)
  유*석 (교정직)
  박*순 (교정직)
  이*호 (행정직)
  김*호 (세무직)
  김*현 (행정직)
  김*영 (행정직)
  유*연 (행정직)
  이*민 (세무직)
  박*우 (행정직)
  이*연 (행정직)
  박*현 (직업상담직)
  이*현 (행정직)
  최*지 (세무직)
  송*근 (세무직)
  하*준 (세무직)
  박*희 (행정직)
  배*희 (행정직)
  정*나 (세무직)
  윤*영 (행정직)
  유*아 (행정직)
  김*우 (행정직)
  문*우 (행정직)
  황*주 (행정직)
  유*아 (행정직)
  기*주 (행정직)
  하*은 (행정직)
  천*명 (행정직)
  박*연 (행정직)
  경*지 (세무직)
  최*정 (세무직)
  김*경 (세무직)
  오*경 (행정직)
  정*경 (행정직)
  김*정 (행정직)
  이*영 (행정직)
  김*봉 (세무직)
  박*해 (행정직)
  이*리 (세무직)
  임*호 (행정직)
  진*훈 (행정직)
  이*택 (세무직)
  오*주 (보호직)
  이*주 (행정직)
  이*우 (교정직)
  김*경 (세무직)
  이*석 (보호직)
  김*연 (교정직)
  강*구 (교정직)
  김*원 (세무직)
  박*욱 (교정직)
  강*령 (세무직)
  박*모 (교정직)
  이*민 (행정직)
  문*무 (행정직)
  이*호 (세무직)
  강*정 (직업상담직)
  김*지 (세무직)
  권*경 (행정직)
  하*민 (행정직)
  변*지 (세무직)
  박*연 (세무직)
  정*비 (행정직)
  이*후 (교정직)
  박*권 (행정직)
  이*수 (세무직)
  이*환 (행정직)
  박*은 (세무직)
  권*완 (행정직)
  이*쁨 (행정직)
  박*재 (행정직)
  전*현 (직업상담직)
  여*진 (세무직)
  김*경 (행정직)
  정*훈 (행정직)
  임*수 (행정직)
  문*진 (세무직)
  이*정 (세무직)
  박*운 (행정직)
  현*창 (세무직)
  천*민 (행정직)
  이*연 (세무직)
  방*진 (행정직)
  박*경 (세무직)
  오*형 (교정직)
  김*호 (행정직)
  조*봄 (행정직)
  송*정 (직업상담직)
  김*서 (세무직)
  이*진 (행정직)
  박*지 (행정직)
  전*병 (행정직)
  김*로 (행정직)
  김*석 (행정직)
  소*주 (관세직)
  윤*희 (세무직)
  황*아 (세무직)
  정*아 (세무직)
  심*섭 (세무직)
  조*비 (세무직)
  김*정 (교정직)

.candidate_slide { background:#3b5aa4; padding:70px 80px; font-family: 'NotoSans KR'; }
.candidate_slide .item { color:#3ac1ff; padding:15px; text-align:center; font-size:17px; }

@media screen and (max-width: 1200px) {
  .candidate_slide { margin-top:5vw; padding:3vw; }
  .candidate_slide .item { padding:2vw; font-size:2vw; }
}

$('.candidate_slide').slick({
  slidesToShow: 8,
  slidesToScroll: 1,
  slidesPerRow: 4,
  rows: 1,
  dots : false,
  infinite : true,
  autoplay: true,
  arrows: false,
  speed:1000,
  autoplaySpeed: 0,
  vertical: true,
  adaptiveHeight: false,
});

EXAMPLE

#전당
#세로방향
#반복

세로 방향 슬라이드 2ND

나책형 행정법 11번 문제를 풀때 전효진선생님의 암기법 (이일)….
-구*한 2021.04.17-

공부방법과 수험생활의 조언이 있었기에 행정법 90점 입니다!
-최*문 2021.04.30-

애기엄마! 행정법 100점 받았습니다. 마지막까지 믿음을 가지고….
-한*정 2021.04.28-

효진쌤만 따라간, 행정법 찐초시생 노베이스로부터 36일의 전사….
-김*연 2021.04.27-

이번 국가직 10분만에 100점 맞았습니다!!
-최*로 2021.04.27-

2020 국가직 행정법 35점에서 2021 국가직 105점(가산점 포함)
-황*준 2021.04.21-

2021 국가직 9급 행정법 95점 / 효진쌤 커리 추천 / 적중률에 소름….
-김*원 2021.04.21-

작년 국가직 70점에서 이번 국가직 95점 받았습니다! 효진샘 커리만….
-백*진 2021.04.20-

행정법은 효진쌤이라는 말이 아까울 정도예요!
-김*혜 2021.04.19-

전효진 한권 행정법총론 없었으면 큰일 날 뻔 했네요.
-김*원 2021.04.21-

효진쌤 믿고 100점 받았습니다!
-임*선 2021.04.19-

40대 초보 맘시생 효진쌤 덕분에 행정법 100점
-송*정 2021.04.19-

소름이 돋았습니다. 쌤의 목소리가 들렸어요…♡
-윤*선 2021.04.19-

반복이 답이고 찍신은 효진샘이다.
-고*람 2021.04.19-

3월 모고 75점 → 파이널 → 국가직 95점
-김*현 2021.04.19-

법과목도 음성지원시켜주는 효진쌤 감사합니다 ㅠㅠ
-고*석 2021.04.19-

국가직 9급 행정법 100점 수강후기입니다!
-박*경 2021.04.18-

국가직 행정법 효진샘이 출제위원이신가요…
-전*영 2021.04.18-

법=전효진
-박*경 2021.04.18-

국가직 9급 행정법 100점 수강후기입니다!
-이*리 2021.04.18-

법무지렁이가 행정법 100점을 맞기까지
-이*슬 2021.04.18-

믿고 듣는 효진쌤, 감사합니다. 국가직 95점.
-김*수 2021.04.18-

메가스터디 공무원 홍보 및 이벤트 페이지에서 사용되는 슬라이드 기능입니다.
순차적으로 글귀가 적힌 행이 위로 올라가면서(세로 방향) 순환 반복되는 구조로 이루어져 있습니다.
Bold 및 font-size, color 등으로 슬라이드 중앙에 오는 글귀를 강조할 수 있습니다.


  
      
          나책형 행정법 11번 문제를 풀때 전효진선생님의 암기법 (이일)…. 
-구*한 2021.04.17-
      
      
          공부방법과 수험생활의 조언이 있었기에 행정법 90점 입니다! 
-최*문 2021.04.30-
      
      
          애기엄마! 행정법 100점 받았습니다. 마지막까지 믿음을 가지고…. 
-한*정 2021.04.28-
      
      
          효진쌤만 따라간, 행정법 찐초시생 노베이스로부터 36일의 전사…. 
-김*연 2021.04.27-
      
      
          이번 국가직 10분만에 100점 맞았습니다!! 
-최*로 2021.04.27-
      
      
          2020 국가직 행정법 35점에서 2021 국가직 105점(가산점 포함) 
-황*준 2021.04.21-
      
      
          2021 국가직 9급 행정법 95점 / 효진쌤 커리 추천 / 적중률에 소름…. 
-김*원 2021.04.21-
      
      
          작년 국가직 70점에서 이번 국가직 95점 받았습니다! 효진샘 커리만…. 
-백*진 2021.04.20-
      
      
          행정법은 효진쌤이라는 말이 아까울 정도예요! 
-김*혜 2021.04.19-
      
      
          전효진 한권 행정법총론 없었으면 큰일 날 뻔 했네요. 
-김*원 2021.04.21-
      
      
          효진쌤 믿고 100점 받았습니다! 
-임*선 2021.04.19-
      
      
          40대 초보 맘시생 효진쌤 덕분에 행정법 100점 
-송*정 2021.04.19-
      
      
          소름이 돋았습니다. 쌤의 목소리가 들렸어요…♡ 
-윤*선 2021.04.19-
      
      
          반복이 답이고 찍신은 효진샘이다. 
-고*람 2021.04.19-
      
      
          3월 모고 75점 → 파이널 → 국가직 95점 
-김*현 2021.04.19-
      
      
          법과목도 음성지원시켜주는 효진쌤 감사합니다 ㅠㅠ 
-고*석 2021.04.19-
      
      
          국가직 9급 행정법 100점 수강후기입니다! 
-박*경 2021.04.18-
      
      
          국가직 행정법 효진샘이 출제위원이신가요… 
-전*영 2021.04.18-
      
      
          법=전효진 
-박*경 2021.04.18-
      
      
          국가직 9급 행정법 100점 수강후기입니다! 
-이*리 2021.04.18-
      
      
          법무지렁이가 행정법 100점을 맞기까지 
-이*슬 2021.04.18-
      
      
          믿고 듣는 효진쌤, 감사합니다. 국가직 95점. 
-김*수 2021.04.18-

.vertical_text_wrp {position:relative;margin-top:60px;border-top:1px solid #b2b2b2;border-bottom:1px solid #b2b2b2;padding:35px 0;font-family:'NotoSans KR';text-align:center;}
.vertical_text_wrp:before {content:'';position:absolute;top:0;left:0;right:0;height:22%;z-index:3;background:rgba(255, 255, 255, .5);box-shadow: 0 0 5px rgba(255, 255, 255, .5);}
.vertical_text_wrp:after {content:'';position:absolute;bottom:0;left:0;right:0;height:22%;z-index:3;background:rgba(255, 255, 255, .5);box-shadow: 0 0 5px rgba(255, 255, 255, .5);}
.vertical_text_wrp .slick-arrow {display:none!important;}
.vertical_text_wrp .vertical_text .item {padding:13px 0;font-weight:300;font-size:20px;color:#252525;line-height:1.2;}
.vertical_text_wrp .slick-slide.slick-active.slick-center+.slick-slide .item {padding:10px 0;font-size:26px;font-weight:bold;}
.vertical_text_wrp .vertical_text .item .mo_br {display:none;}

@media (max-width: 992px){
  .vertical_text_wrp .vertical_text .item {font-size:1.6vw;}
  .vertical_text_wrp .slick-slide.slick-active.slick-center+.slick-slide .item {font-size:2.6vw;}
}

@media (max-width: 768px){
  .vertical_text_wrp {padding:10px 0;}
  .vertical_text_wrp:before {height:15%;}
  .vertical_text_wrp:after {height:15%;}
  .vertical_text_wrp .vertical_text .item {padding:5px 0;font-size:2.4vw;}
  .vertical_text_wrp .slick-slide.slick-active.slick-center+.slick-slide .item {padding:3px 0;font-size:3.2vw;}
  .vertical_text_wrp .vertical_text .item .mo_br {display:block;}
}

@media (max-width: 576px){
  .vertical_text_wrp .vertical_text .item {font-size:2.6vw;}
  .vertical_text_wrp .slick-slide.slick-active.slick-center+.slick-slide .item {font-size:3.4vw;}
}

@media (max-width: 420px){
  .vertical_text_wrp .vertical_text .item {font-size:2.9vw;}
  .vertical_text_wrp .slick-slide.slick-active.slick-center+.slick-slide .item {font-size:3.5vw;}
}

$('.vertical_text').slick({
  slidesToShow: 5,
  slidesToScroll: 1,
  infinite: true,
  autoplaySpeed: 1000,
  speed: 500,
  autoplay: true,
  dots: false,
  arrow: false,
  vertical: true,
  verticalSwiping: true,
  centerMode: true,
  touchThreshold: 100
});

EXAMPLE

#세로방향
#한마디
#후기

세로 방향 슬라이드 3RD

: 선생님 정말 감사해요!
수험기간을 단축하고 싶다면 정인국 선생님 강의 꼭 추천합니다.

- 수강생 김** -

: 도식화된 행정법 강의와 차별화된 해설강의가
제 점수를 멱살잡고 끌어올려주셨습니다.

- 수강생 이** -

: 판례를 자세히 설명해주시고 순서도 잡아주셔서 머리에 쏙쏙 들어오고,
자세히 설명해주시면서도 철저하게 시험에 맞게 잘 알려주세요.

- 수강생 장** -

: 진짜 이과생도 이해 가능한 설명력..
정말 너무 감탄 스럽습니다 ㅠㅠ

- 수강생 이** -

: 그냥 듣고 있으면 자동적으로 머리에 도식화가 들어와서
더 기억에 잘 남는 거 같아요.

- 수강생 박** -

: 자칫 정보의 홍수에 이끌려 산으로 갈 수 있는 수험의 방향을
정인국 선생님이 효율적이고 효과적으로 잡아주십니다.

- 수강생 이** -

: 블랙홀 같은 행정법이라고 쓸 정도로 비유나 예시 등 심지어 그냥 하는 농담도
다 스킵 한번 없이 기억에 남을 정도로 쏙쏙 빨려들어가는 강의력이 너무 대단하다!!

- 수강생 허** -

메가스터디 공무원 홍보 및 이벤트 페이지에서 사용되는 슬라이드 기능입니다.
순차적으로 이미지 슬라이드가 위로 올라가면서(세로 방향) 순환 반복되는 구조로 이루어져 있습니다.
디자인 시안에 따라 다른 여러 이미지들을 적용할 수 있습니다.


  
      
          
              
              
              
                  
                      
                          선생님 정말 감사해요!
수험기간을 단축하고 싶다면  정인국 선생님 강의 꼭 추천합니다.
                  
                  - 수강생 김** -
              
          
      
      
          
              
              
              
                  
                      
                          도식화된 행정법 강의와 차별화된 해설강의가
제 점수를 멱살잡고 끌어올려주셨습니다.
                  
                  - 수강생 이** -
              
          
      
      
          
              
              
              
                  
                      
                          판례를 자세히 설명해주시고 순서도 잡아주셔서 머리에 쏙쏙 들어오고,
자세히 설명해주시면서도 철저하게 시험에 맞게 잘 알려주세요.
                  
                  - 수강생 장** -
              
          
      
      
          
              
              
              
                  
                      
                          진짜 이과생도 이해 가능한 설명력..
정말 너무 감탄 스럽습니다 ㅠㅠ
                  
                  - 수강생 이** -
              
          
      
      
          
              
              
              
                  
                      
                          그냥 듣고 있으면 자동적으로 머리에 도식화가 들어와서
더 기억에 잘 남는 거 같아요.
                  
                  - 수강생 박** -
              
          
      
      
          
              
              
              
                  
                      
                          자칫 정보의 홍수에 이끌려 산으로 갈 수 있는 수험의 방향을
정인국 선생님이 효율적이고 효과적으로 잡아주십니다.
                  
                  - 수강생 이** -
              
          
      
      
          
              
              
              
                  
                      
                          블랙홀 같은 행정법이라고 쓸 정도로 비유나 예시 등 심지어 그냥 하는 농담도
다 스킵 한번 없이 기억에 남을 정도로 쏙쏙 빨려들어가는 강의력이 너무 대단하다!!
                  
                  - 수강생 허** -

.vertical_review_wrp .vertical_review { overflow:hidden;}
.vertical_review_wrp .item { color:#fff; }
.vertical_review_wrp .item > div { background:#082430; border:1px solid #0e303f; box-sizing:border-box; position:relative; overflow:hidden;  }
.vertical_review_wrp .item > div i { position:absolute; top:0; left:27px; }
.vertical_review_wrp .item > div > img { float:left; margin:25px 0 0 55px;}
.vertical_review_wrp .item > div div { float:left; text-align:left; margin:55px 0 0 45px; width:60%; }
.vertical_review_wrp .item > div dd { margin-top:25px; font-size:20px; line-height:120%; font-weight:300; }
.vertical_review_wrp .item > div div p { float:right; margin-top:30px; color:#626262; font-size:15px; }
.vertical_review_wrp .slick-list { margin-top:-30px; }
.vertical_review_wrp .slick-slide { margin-top:30px; height: auto; }

@media (max-width:1200px) {
  .vertical_review_wrp .item { color:#fff; }
  .vertical_review_wrp .item > div i { left:1.5vw; }
  .vertical_review_wrp .item > div i img { width:2vw; }
  .vertical_review_wrp .item > div > img { margin:3vw 0 0 2vw; width:30%; max-width:290px; }
  .vertical_review_wrp .item > div div { margin:3vw 0 0 0; width:65%;  padding:0 3vw 0 2vw; }
  .vertical_review_wrp .item > div dd { margin-top:3vw; font-size:17px; }
  .vertical_review_wrp .item > div div p {  margin-top:3vw;  font-size:15px; }
  .vertical_review_wrp .slick-list { margin-top:-3vw; }
  .vertical_review_wrp .slick-slide { margin-top:3vw; }
}
@media (max-width: 768px){
    .vertical_review_wrp .item > div dd { margin-top:2vw; font-size:2.5vw; }
    .vertical_review_wrp .item > div div p { margin-top:2vw; font-size:12px; }
}

$('.vertical_review').slick({
  arrows : false,
  dots: false,
  autoplay : true,
  speed:1500, 
  slidesToShow : 3,	
  slidesToScroll : 1,
  autoplaySpeed: 2000,
  pauseOnHover: true,
  pauseOnFocus: true,
  focusOnSelect: true,
  vertical: true,
  verticalSwiping: true,
  touchThreshold: 100
});

EXAMPLE