jevedw
Last Updated: April 12, 2019
·
337
· mirzahodzic

How to make Slideshow with Animated Circular Navigation

Slideshow with Animated Circular Navigation

Suppose now you would like to add a slideshow to your webpage, but you need inspiration or a ready-to-use product that you simply can download and use, or perhaps upgrade as needed. Although there are many open-source solutions available for slideshows, I do not believe that they contain such creative navigation with thumbnails as you can see here and now.

See Full Article for details or just Demo

Slideshow with Animated Circular Navigation

HTML5 STRUCTURE

<!-- slideshow START -->
<section class="slideshow">

  <!-- slideshow:navigation START -->
  <ul class="navigation">

    <!-- slideshow:navigation:item START -->
    <li class="navigation-item active">
      <span class="rotate-holder"></span>
      <span class="background-holder" style="background-image: url(path/to/thumb.jpg);"></span>
    </li>
    <!-- slideshow:navigation:item END -->
    ...
  </ul>
  <!-- slideshow:navigation END -->


  <!-- slideshow:details START -->
  <div class="detail">

    <!-- slideshow:details START -->
    <div class="detail-item active">
      <div class="headline">Headline</div>
      <div class="background" style="background-image: url(path/to/img.jpg)"></div>
    </div>
    <!-- slideshow:details END -->
   ....
  </div>
  <!-- slideshow:details END -->

SCSS STRUCTURE

/* SLIDESHOW */
  section {
    &.slideshow {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      height: 100vh;
      margin: 0 auto;
      visibility: hidden;
      overflow: hidden;
      ul {
        &.navigation {
          position: absolute;
          display: block;
          width: 640px;
          height: 640px;
          padding: 0;
          margin: 0;
          left: -230px;
          top: 50%;
          margin-top: -320px;
          z-index: 10;
          @media screen and (max-width: 992px) {
            width: 480px;
            height: 480px;
            left: -170px;
            margin-top: -240px;
          }
          @media screen and (max-width: 768px) {
            width: 320px;
            height: 320px;
            margin-top: -160px;
            left: -190px;
          }
          li {
            &.navigation-item {
              position: absolute;
              display: inline-block;
              overflow: hidden;
              width: 120px;
              height: 120px;
              padding: 10px;
              text-align: center;
              cursor: pointer;
              border-radius: 50%;
              transition: border 0.6s ease-in-out;
              @media screen and (max-width: 992px) {
                width: 92px;
                height: 92px;
              }
              @media screen and (max-width: 768px) {
                width: 48px;
                height: 48px;
              }
              .rotate-holder {
                position: fixed;
                display: block;
                width: 0;
                height: 0;
                left: -9999px;
                top: -9999px;
              }
              .background-holder {
                position: absolute;
                display: block;
                width: 100%;
                height: 100%;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                border-radius: 50%;
                background-repeat: no-repeat;
                background-position: center center;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
                opacity: 1;
                visibility: visible;
                transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
              }
              &:hover {
                .background-holder {
                  opacity: 0.75;
                }
              }
              &.active {
                .background-holder {
                  opacity: 0;
                  visibility: hidden;
                }
              }
            }
          }
        }
      }
      .detail {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 8;
        .detail-item {
          position: absolute;
          display: block;
          width: 100%;
          height: 100%;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
          .headline {
            position: absolute;
            display: block;
            width: 100%;
            max-width: calc(100% - 480px);
            height: 126px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            overflow: visible;
            white-space: nowrap;
            box-sizing: border-box;
            z-index: 2;
            @media screen and (max-width: 992px) {
              max-width: calc(100% - 380px);
            }
            @media screen and (max-width: 768px) {
              max-width: calc(100% - 120px);
            }
            .letter {
              font-family: 'Playfair Display', serif;
              position: relative;
              display: inline-block;
              opacity: 0;
              visibility: hidden;
              color: #FFFFFF;
              font-size: 132px;
              line-height: 110px;
              font-weight: 900;
              font-kerning: none;
              white-space: nowrap;
              box-sizing: border-box;
              @media screen and (max-width: 992px) {
                font-size: 78px;
                line-height: 126px;
              }
              @media screen and (max-width: 992px) {
                font-size: 48px;
                line-height: 126px;
              }
            }
          }
          .background {
            position: absolute;
            display: block;
            width: 100%;
            width: calc(100% + 100px);
            height: 100%;
            height: calc(100% + 100px);
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow: visible;
            background-repeat: no-repeat;
            background-position: center center;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            z-index: 1;
            &::before {
              content: '';
              background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
              background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
              background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
              filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 );
              position: absolute;
              display: block;
              width: 100%;
              height: 100%;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              z-index: 2;
            }
          }
          &.active {
            opacity: 1;
            visibility: visible;
          }
        }
      }

JAVASCRIPT (jQuery)

$('.slideshow').imagesLoaded({ background: true })
  .done( function() {
    // hide loader
    $('.loader').addClass('is-loaded');

    // init variables
    var slideshow = $(".slideshow"),
      navigation = $(".navigation"),
      navigationItem = $(".navigation-item"),
      detailItem = $(".detail-item"),
      rotation,
      type = '_short';

    // prepare letters
    $('.headline').each(function() {
      $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
    });

    // prepare navigation and set navigation items on the right place
    navigationItem.each(function(index, elem) {
      TweenMax.set(elem, {
        left: navigation.width() / 2 - navigationItem.width() / 2 - 10,
        rotation: 90 + (index * 360 / navigationItem.length),
        transformOrigin: "50% " + navigation.width() / 2 + "px"
      });
      TweenMax.set($(elem).find('.rotate-holder'), {
        text: String(index * 360 / navigationItem.length)
      });
      TweenMax.set($(elem).find('.background-holder'), {
        rotation: -90 - (index * 360 / navigationItem.length),
      });
    });

    // set tween values
    function setTweenValues() {
      rotation = Number($(this).find('.rotate-holder').text());
    }

    // do tween
    function doTween(target) {

      var targetIndex = navigationItem.index(target),
        timeline = new TimelineMax();

      // add/remove class "active" from navigation & detail
      navigationItem.each(function() {
        $(this).removeClass('active');
        if ($(this).index() == $(target).index()) {
          $(this).addClass('active');
        }
      });
      detailItem.each(function() {
        $(this).removeClass('active');
        if ($(this).index() == $(target).index()) {
          $(this).addClass('active');
        }
      });

      timeline
        .to(navigation, 0.6, {
          rotation: -rotation + type,
          transformOrigin: "50% 50%",
          ease: Sine.easeInOut
        })
        .staggerTo(navigationItem.find('.background-holder'), 0.6, {
          cycle: {
            //function that returns a value
            rotation: function(index, element) {
              return -90 - Number($(element).prev('.rotate-holder').text()) + rotation + type;
            }
          },
          transformOrigin: "50% 50%",
          ease: Sine.easeInOut,
        }, 0, '-=0.6')
        .staggerFromTo($('.active').find('.letter'), 0.3, {
          autoAlpha: 0,
          x: -100,
        },
        {
          autoAlpha: 1,
          x: 0,
          ease: Sine.easeInOut,
        }, 0.025, '-=0.3')
        .fromTo($('.active').find('.background'), 0.9, {
          autoAlpha: 0,
          x: -100,
        },
        {
          autoAlpha: 1,
          x: 0,
          ease: Sine.easeInOut,
        }, 0.05, '+=0.3');
    }

    // click/hover on items
    navigationItem.on('mouseenter', setTweenValues);
    navigationItem.on('click', function() { doTween($(this)); })

    // on load show slideshow as well as first "active" navigation/detail item
    TweenMax.to(slideshow, 1, { autoAlpha: 1 });
    TweenMax.to($('.active').find('.letter'), 0.7, { autoAlpha: 1, x: 0 });
    TweenMax.to($('.active').find('.background'), 0.7, { autoAlpha: 1, x: 0 });

  });

  // fast fix for resize window and refresh view, attention: not use in production, only for demo purposes!
  (function () {
  var width = window.innerWidth;

  window.addEventListener('resize', function () {
    if (window.innerWidth !== width) {
      window.location.reload(true);
    }
  });
  })();

DETAILS + DEMO

See Full Article for details or just Demo