반응 형 이미지 궤도 슬라이더

Question

데스크톱에 4 열, 각 열에 이미지가 표시되는 기초 6 궤도 슬라이더가 있습니다. 사용자는 한 번에 4 개의 미리보기 이미지를 스크롤 할 수 있습니다. 화면 크기 내 '작은'크기에 도달 할 때

나는 슬라이더가 당신이 여기에 구현 된 페이지를 볼 수 있습니다 대신 4

1 썸네일을 표시 할 : robertrhu.net/vail/tier1.html를 .

파란색 배경 산 꼭대기의 이미지 슬라이더입니다.

이

HTML :이

<!--HTML FOR ORBIT THUMB IMAGE SLIDER--> 

<!--THUMB IMAGE SLIDER ROW--> 
<div 
    class="row" 
    id="thumb-slider-container"> 

<!--THUMB IMAGE SLIDER HEADING--> 
<h1> 
    Lorem Ipsum Dolor 
</h1> 
<!--END HOME POSTS SLIDER HEADING--> 

    <!--ORBIT SLIDER WRAPPER--> 
    <div 
     class="orbit" 
     role="region" 
     aria-label="Thumbnail Image Slider" 
     data-orbit 
     data-use-m-u-i="false" 
     data-option="autoplay:false;"> 

      <!--ORBIT SLIDER CONTAINER--> 
      <ul 
       class="orbit-container"> 

       <!--ORBIT SLIDER PREVIOUS ARROW BUTTON--> 
       <button 
        class="orbit-previous"> 
       <span 
        class="show-for-sr prev-slide"> 
       <i 
        class="icon-chevron-left"> 
       </i> 
       </span> 

       </button> 
       <!--END ORBIT SLIDER PREVIOUS ARROW BUTTON--> 

       <!--ORBIT SLIDER NEXT ARROW BUTTON--> 
       <button 
        class="orbit-next"> 
       <span 
        class="show-for-sr next-slide"> 
       <i 
        class="icon-chevron-right"> 
       </i> 
       </span> 

       </button> 
       <!--END ORBIT SLIDER NEXT ARROW BUTTON--> 

        <!--ORBIT POST SLIDES--> 

        <!--4 THUMBNAAIL GRID SLIDE FOR ORBIT SLIDER--> 
        <li 
        class="is-active orbit-slide"> 

        <!--GRID CLASS--> 
        <ul 
         class="row small-up-1 medium-up-4"> 

         <!--IMAGE COLUMN--> 
         <li 
         class="column"> 
         <img 
         src="assets/img/thumb-slider-image-1.jpg" 
         class="post-thumb-photo" /> 
         </li> 
        <!--END IMAGE COLUMN--> 

        <!--IMAGE COLUMN--> 
        <li 
        class="column"> 
        <img 
        src="assets/img/thumb-slider-image-1.jpg" 
        class="post-thumb-photo" /> 
       </li> 
       <!--END IMAGE COLUMN--> 

       <!--IMAGE COLUMN--> 
      <li 
       class="column"> 
       <img 
       src="assets/img/thumb-slider-image-1.jpg" 
       class="post-thumb-photo" /> 
       </li> 
      <!--END IMAGE COLUMN--> 

      <!--IMAGE COLUMN--> 
     <li 
     class="column"> 
      <img 
       src="assets/img/thumb-slider-image-1.jpg" 
       class="post-thumb-photo" /> 
      </li> 
     <!--END IMAGE COLUMN--> 

    </ul> 
    <!--END GRID CLASS--> 

</li> 
<!--4 THUMBNAAIL GRID SLIDE FOR ORBIT SLIDER--> 

      </ul> 
      <!--END ORBIT SLIDER CONTAINER--> 
    </div> 
    <!--END ORBIT SLIDER WRAPPER--> 
</div> 
<!--END THUMB IMAGE SLIDER ROW--> 

SCSS :

#thumb-slider-container { 
background-image: url('../img/thumb-image-slider-background.jpg'); 
background-repeat: no-repeat; 
background-size: 100% 100%; 
background-position: top left; 
padding: 2.5rem 5.313rem 3.125rem 5.313rem; 
max-width: 100%; 

h1 { 
    color: white; 
} 


    .orbit { 
     padding: 0 3.25rem 0px 3.5rem; 

     .orbit-container { 
      max-width: 1170px; 
      margin: 0 auto; 

      .orbit-slide { 
       max-width: 1170px; 
       margin: 0 auto; 

      ul { 
       margin-bottom: 0; 

       li.column { 

       &:last-child { 
        padding-right: 0; 
       } 

        img { 
         margin-bottom: 0; 
         &:last-of-type { 
          margin-right: 0; 

         } 

       } 
       } 
      } 
      } 


      } 

     } 


    } 

Answer 1

내가 페이지를 확인하지만 봤는데 거기

다음은 4 축소판 슬라이더 내 코드입니다 영웅 영역의 비디오, 슬라이더 없음? 나는 무엇인가 놓친다 당신은 무엇이라도 바꿨 느냐?

하지만 올빼미 회전 목마 2에는 옵션이 있습니다 (각 중단 점에 대한 슬라이드 수를 설정하는 옵션과 같음). 기초를 지원합니다. (모든 슬라이드는 내부의 복잡한 레이아웃에 대해 f6 마크 업을 저장할 수 있습니다. 슬라이더). http://www.owlcarousel.owlgraphic.com/

F5 궤도에서는 더 이상 지원되지 않으며 프로토 타이핑 용입니다. 나는 F6에서 궤도에 관한 정보를 찾지 못했습니다 (그래서 나는 생산 사이트 imho에서 그것을 사용하는 것을 권하지 않습니다).

어쨌든 도움이됩니다.

모두 최고