Простой шаблон презентации на CSS и jQuery

jQuery 21.02.2021

Простой шаблон презентации на CSS и jQuery.

Хотя презентации обычно создаются с использованием собственных приложений, мы решили бросить вызов самим себе и разработать шаблон презентации для браузера. Это была непростая задача, потому что способ взаимодействия со слайд-шоу презентации отличается от того, как вы прокручиваете веб-сайт: каждый блок / слайд должен быть изолирован, чтобы его содержимое можно было ассимилировать перед переключением на следующий.

Как вы перемещаетесь по презентации? Самый простой способ - использовать клавиши со стрелками на клавиатуре (для устройств, на которых они есть). Однако мы должны были учитывать, что все другие взаимодействия (щелчок, прокрутка…) также должны работать при создании чего-либо для Интернета.

Создание структуры

Структура HTML состоит из двух основных элементов: <nav> для навигации по слайд-шоу и упорядоченного списка для элементов слайд-шоу. Мы использовали вложенный упорядоченный список для элементов с несколькими вспомогательными слайдами.


<div class="cd-slideshow-wrapper">
   <nav class="cd-slideshow-nav">
      <button class="cd-nav-trigger">
         Open Navigation
         <span aria-hidden="true"></span>
      </button>
    
      <div class="cd-nav-items">
         <ol>
            <li><a href="#slide-1">Slide 1</a></li>
            <li>
               <a href="#slide-2">Slide 2</a>
               <ol class="sub-nav">
                  <li><a href="#slide-2">Slide 2 - Sub 1</a></li>
                  <!-- other sub-slide links here -->
               </ol>
            </li>
            <li><a href="#slide-3">Slide 3</a></li>
            <!-- other slide links here -->
         </ol>
      </div> <!-- .cd-nav-items -->
   </nav> <!-- .cd-slideshow-nav -->
  
   <ol class="cd-slideshow">
      <li class="visible" id="slide-1">
         <div class="cd-slider-content">
            <div class="content-wrapper">
               <h2>Presentation Slideshow</h2>
               <p>A simple presentation template in CSS &amp; jQuery.</p>
            </div>
         </div>
      </li>

      <li id="slide-2">
         <ol class="sub-slides">
            <li>
               <div class="cd-slider-content">
                  <div class="content-wrapper">
                     <h2>Slider #2</h2>
                  </div>
               </div>
            </li>
            <!-- sub-slides content here -->

         </ol> <!-- .sub-slides -->
      </li>

      <!-- additional slides here -->
   </ol> <!-- .cd-slideshow -->
</div> <!-- .cd-slideshow-wrapper -->

Добавление стиля

На небольших устройствах (ширина области просмотра меньше 1100 пикселей) мы организовали все слайды в виде простого списка. Однако для элементов с дополнительными слайдами мы реализовали ползунок с возможностью перетаскивания для навигации по нему.


.cd-slideshow .sub-slides {
  width: 100%;
  transition: transform 0.3s;
}
.cd-slideshow > li, 
.cd-slideshow .sub-slides > li {
  position: relative;
  z-index: 1;
  height: 100vh;
  width: 100vw;
}
.cd-slideshow .sub-slides > li {
  float: left;
}

Ширина элементов упорядоченного списка с подчиненными слайдами устанавливается с помощью JavaScript. Когда пользователь переходит от вспомогательного слайда к предыдущему / следующему, мы переводим элемент .sub-slides (вложенный упорядоченный список) по оси X (подробнее в разделе «Обработка событий»).

На больших устройствах мы устанавливаем высоту .cd-slideshow-wrapper на 100vh и добавляем скрытое переполнение, чтобы был виден только слайд в области просмотра. Затем мы устанавливаем высоту, ширину и поля .cd-slider-content, чтобы центрировать его в области просмотра. Класс .visible добавляется к видимому слайду: он используется для скрытия псевдоэлемента .cd-slider-content ::after (используется для изменения цвета фона слайда, когда слайд не в фокусе) и отображения содержимого слайда .


@media only screen and (min-width: 1100px) {
  .cd-slideshow-wrapper {
    height: 100vh;
    overflow: hidden;
  }

  .cd-slideshow {
    transition: transform 0.6s;
  }
  .cd-slideshow > li, .cd-slideshow .sub-slides > li {
    height: auto;
    width: auto;
  }

  .cd-slider-content {
    height: 84vh;
    width: 90vw;
    margin: 2vh 5vw;
    border-radius: 10px;
    cursor: pointer;
  }
  .visible .sub-visible .cd-slider-content, 
  .visible > .cd-slider-content {
    /* visible slide */
    cursor: auto;
  }
  .cd-slideshow > li:first-of-type .cd-slider-content {
    margin-top: 8vh;
  }
  .sub-slides > li:first-of-type .cd-slider-content {
    margin-left: 5vw;
  }
  .sub-slides > li .cd-slider-content {
    margin-left: 1.25vw;
    margin-right: 1.25vw;
  }
  .cd-slider-content .content-wrapper {
    height: 100%;
    /* hide the slide content if the slide is not selected/visible */
    opacity: 0;
    box-shadow: 0 6px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-radius: inherit;
    transition: opacity 0.6s;
  }
  .cd-slider-content::after {
    /* this is used to change the slide background color when the slide is out of focus */
    content: '';
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    background-color: #3a3a3a;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s, visibility 0.6s;
  }
  .visible .cd-slider-content .content-wrapper {
    opacity: 1;
  }
  .visible .cd-slider-content::after {
    opacity: 0;
    visibility: hidden;
  }
}

Когда пользователь переходит от слайда к следующему / предыдущему, мы перемещаем элемент .cd-slideshow по оси Y (подробнее в разделе «Обработка событий»).

Обработка событий

По презентации можно перемещаться по-разному: с помощью клавиатуры; используя главную навигацию слайд-шоу; щелчок по слайдам, находящимся вне фокуса, или прокрутка слайдов.

Для реализации навигации по слайд-шоу использовались две основные функции: updateSlide для перехода от слайда к следующему / предыдущему и updateSubSlide для перехода от вспомогательного слайда к следующему / предыдущему. Например, для функции updateSubSlide мы использовали:


function updateSubSlide(listItem, string, subSlide) {
   var translate,
       marginSlide = Number(listItem.find('.cd-slider-content').eq(0).css('margin-right').replace('px', ''))*6,
       windowWidth = window.innerWidth;

   windowWidth = ( mq == 'desktop' ) ? windowWidth - marginSlide : windowWidth;

   if( listItem.children('.sub-slides').length > 0 ) {
      var subSlidesWrapper = listItem.children('.sub-slides'),
      visibleSubSlide = subSlidesWrapper.children('.sub-visible');
    
      if( string == 'nav' ) {
         /* we have choosen a new slide from the navigation */
         var newSubSlide = subSlide;
      } else {
         var newSubSlide = (string == 'next') ? visibleSubSlide.next() : visibleSubSlide.prev();
      }
      var newSubSlidePosition = newSubSlide.index();
      translate = parseInt(- newSubSlidePosition*windowWidth);
      setTransformValue(subSlidesWrapper.get(0), 'translateX', translate + 'px');
      visibleSubSlide.removeClass('sub-visible');
      newSubSlide.addClass('sub-visible');
   }
}

function setTransformValue(element, property, value) {
   element.style["-webkit-transform"] = property+"("+value+")";
   element.style["-moz-transform"] = property+"("+value+")";
   element.style["-ms-transform"] = property+"("+value+")";
   element.style["-o-transform"] = property+"("+value+")";
   element.style["transform"] = property+"("+value+")";
   // ...
}

Вот и всё!

Автор Себастьяно Герриеро