jQuery Plugins › jQuery Slideshow Plugins ›

Fullscreen Slideshow With Circular Thumbnail Rotator

File Size: 14.7 MB
Views Total: 1650
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2024

Chrome, IE10+, FireFox, Opera, Safari#background slideshow
Fullscreen Slideshow With Circular Thumbnail Rotator

A responsive, mobile-friendly, fullscreen background slideshow that comes with a circular rotator control where you can switch between images by clicking/tapping the thumbnails.

How to use it:

1. Load the necessary JavaScript libraries in the document. Dependencies:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/TextPlugin.min.js"></script>

2. Add images to the slideshow.

<section class="slideshow">

  <!-- Thumbnail Rotator -->
  <ul class="navigation">

    <li class="navigation-item active">
      <span class="rotate-holder"></span>
      <span class="background-holder" style="background-image: url(1.jpg);"></span>
    </li>

    <li class="navigation-item">
      <span class="rotate-holder"></span>
      <span class="background-holder" style="background-image: url(2.jpg);"></span>
    </li>
   
    <li class="navigation-item">
      <span class="rotate-holder"></span>
      <span class="background-holder" style="background-image: url(3.jpg);"></span>
    </li>
   
    ...

  </ul>
  
  <!-- Slideshow -->
  <div class="detail">
   
    <div class="detail-item active">
      <div class="headline">Image 1</div>
      <div class="background" style="background-image: url(1.jpg); height: 100vh;"></div>
      <div class="background" style="background-image: url(1.jpg); height: 100vh; background-size: cover; background-position: center;"></div>
    </div>
    
    <div class="detail-item">
      <div class="headline">Image 2</div>
      <div class="background" style="background-image: url(2.jpg);"></div>
    </div>

    <div class="detail-item">
      <div class="headline">Image 3</div>
      <div class="background" style="background-image: url(3.jpg);"></div>
    </div>

    ...
    
  </div>

</section>

3. The necessary CSS styles.

body section.slideshow {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  height: 100vh;
  margin: 0 auto;
  visibility: hidden;
  overflow: hidden;
}

body section.slideshow ul.navigation {
  position: absolute;
  display: block;
  width: 640px;
  height: 640px;
  padding: 0;
  margin: 0;
  left: -230px;
  top: 50%;
  margin-top: -320px;
  z-index: 10;
}

body section.slideshow ul.navigation 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;
}

body section.slideshow ul.navigation li.navigation-item .rotate-holder {
  position: fixed;
  display: block;
  width: 0;
  height: 0;
  left: -9999px;
  top: -9999px;
}

body section.slideshow ul.navigation li.navigation-item .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;    
  background-size: cover;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
}

body section.slideshow ul.navigation li.navigation-item:hover .background-holder {
  opacity: 0.75;
}

body section.slideshow ul.navigation li.navigation-item.active .background-holder {
  opacity: 0;
  visibility: hidden;
}

body section.slideshow .detail {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 8;
}

body section.slideshow .detail .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;
}

body section.slideshow .detail .detail-item .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;
}

body section.slideshow .detail .detail-item .headline .letter {
  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;
  text-transform: uppercase;
}

body section.slideshow .detail .detail-item .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;     
  background-size: cover;
  z-index: 1;
}

body section.slideshow .detail .detail-item .background::before {
  content: ""; 
  background: linear-gradient(to right, black 0%, rgba(0, 0, 0, 0) 90%);   
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
    
}

body section.slideshow .detail .detail-item.active {
  opacity: 1;
  visibility: visible;
}

4. Enable the slideshow.

$('.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);
  }
});
})();

This awesome jQuery plugin is developed by mikeotharan-code. For more Advanced Usages, please check the demo page or visit the official website.