Goldfinger Product Carousel

goldfinger-product-carousel.markdown

Goldfinger Product Carousel

A Pen by Chase Harrison on CodePen.

License.

index.html

<div id="carousel">
  <div data-package="starter">
    <ul class="carousel starter">
      <li>
        <!--Neverland-->
        <a tabindex="-1" class="main" href="javascript:void(0);" data-full="http://webplus.televoxsites.com/chase/goldfinger3/includes/images/full/neverland.jpg" data-url="http://neverlandbasetest.televox.west.com/">
          <img src="http://webplus.televoxsites.com/chase/goldfinger3/includes/images/thumbnails/neverland.jpg" alt="Neverland Starter">
        </a>
      </li>
      <li>
        <!--Atlantis-->
        <a tabindex="-1" class="main" href="javascript:void(0);" data-full="http://webplus.televoxsites.com/chase/goldfinger3/includes/images/full/atlantis.jpg" data-url="http://atlantisbasetest.televox.west.com/">
          <img src="http://webplus.televoxsites.com/chase/goldfinger3/includes/images/thumbnails/atlantis.jpg" alt="Atlantis Starter">
        </a>
      </li>
      <!--       <li><!--Olympus
        <a tabindex="-1" class="main" href="javascript:void(0);" data-full="http://webplus.televoxsites.com/chase/goldfinger3/includes/images/full/olympus.jpg" data-url="http://neverlandbasetest.televox.west.com/">
          <img src="http://webplus.televoxsites.com/chase/goldfinger3/includes/images/thumbnails/olympus.jpg" alt="Olympus Starter">
        </a>
      </li> -->
      <li>
        <!--Camelot-->
        <a tabindex="-1" class="main" href="javascript:void(0);" data-full="http://webplus.televoxsites.com/chase/goldfinger3/includes/images/full/camelot.jpg" data-url="http://camelotbasetest.televox.west.com/">
          <img src="http://webplus.televoxsites.com/chase/goldfinger3/includes/images/thumbnails/camelot.jpg" alt="Camelot Starter">
        </a>
      </li>
      <li>
        <!--Admiral-->
        <a tabindex="-1" class="main" href="javascript:void(0);" data-full="http://webplus.televoxsites.com/chase/goldfinger3/includes/images/full/admiral.jpg" data-url="http://admiralbasetest.televox.west.com/">
          <img src="http://webplus.televoxsites.com/chase/goldfinger3/includes/images/thumbnails/admiral.jpg" alt="Admiral Starter">
        </a>
      </li>
      <!------>
    </ul>
  </div>
  <div data-package="essential">
    <ul class="carousel essential">
      <li>
        <!--Bruns Dental-->
        <a tabindex="-1" class="main" href="javascript:void(0);" data-full="http://webplus.televoxsites.com/chase/goldfinger3/includes/images/full/brunsdental.jpg" data-url="http://brunsfamilydentalcenter.televox.west.com">
          <img src="http://webplus.televoxsites.com/chase/goldfinger3/includes/images/thumbnails/brunsdental.jpg" alt="Bruns Dental - Essential Design">
        </a>
      </li>
      <li>
        <!--Bunnag-->
        <a tabindex="-1" class="main" href="javascript:void(0);" data-full="http://webplus.televoxsites.com/chase/goldfinger3/includes/images/full/bunnag.jpg" data-url="http://drbunnag.televox.west.com">
          <img src="http://webplus.televoxsites.com/chase/goldfinger3/includes/images/thumbnails/bunnag.jpg" alt="Dr. Bunnag - Essential Design">
        </a>
      </li>
      <li>
        <!--Houston Retina-->
        <a tabindex="-1" class="main" href="javascript:void(0);" data-full="http://webplus.televoxsites.com/chase/goldfinger3/includes/images/full/houstonretina.jpg" data-url="http://hretina.televox.west.com">
          <img src="http://webplus.televoxsites.com/chase/goldfinger3/includes/images/thumbnails/houstonretina.jpg" alt="Houston Retina - Essential Design">
        </a>
      </li>
      <li>
        <!--South Texas-->
        <a tabindex="-1" class="main" href="javascript:void(0);" data-full="http://webplus.televoxsites.com/chase/goldfinger3/includes/images/full/southtexas.jpg" data-url="http://southtexasorthodontics.televox.west.com">
          <img src="http://webplus.televoxsites.com/chase/goldfinger3/includes/images/thumbnails/southtexas.jpg" alt="South Texas - Essential Design">
        </a>
      </li>
    </ul>
  </div>
</div>
<!--carousel-->

<div id="lightbox" style="display: none;">
  <div class="header ">
    <h2></h2>
    <a href="javasript:void(0);" class="close">Close</a>
    <a href="javascript:void(0);" class="external">See Full Site</a>
  </div>
  <div class="image">
    <img />
  </div>
</div>
<!--lightbox-->

<div class="overlay" style="display: none"></div>

<!--inside of header.php file-->

script.js

$(document).ready(function() {
  // Get html and assign to variables
  $(window).on("load", sitePreview());
  function sitePreview(){
    //Get HTML
   var mainElem = $("#carousel div[data-package]");
  // Script Events
  //open lightbox with correct data
  $(mainElem).on("click", "a.main", function(){
    const indexNum = $(this).parent("li").attr("data-num");
    $("#lightbox .image img").attr({
      src: $(this).attr("data-full"),
      alt: $(this).children("img").attr("alt")
    });
    $("#lightbox a.external").attr({
      href: $(this).attr("data-url"),
      target: "_blank"
    });
    $("#lightbox, div.overlay").fadeIn(300);
  });
  
  //close lightbox
  $("#lightbox a.close").on("click", function(){
    $("#lightbox, div.overlay").fadeOut(300);
    $("#lightbox .image img").attr({src: "", alt: ""});
    $("#lightbox a.external").attr({href: "javascript:void(0)", target: "_blank"});
  });
  
  mainElem.find("ul").each(function(){
    var liWidth = $(this).find("img").width(),
        liCount = $(this).find("li").length,
        zIndex = 300,
        current = $(this);
    $(`<div class="controls ${$(this).attr("class")}"></div>`).insertAfter($(this));
    $(this).css({
      "width": liWidth,
      "overflow": "hidden"
    });
    $(this).find("li").each(function(index){
      if(index === 0){
        current.wrap(`<div class="container" style="width: ${liWidth}px; overflow: hidden;"></div>`);
        current.width(liWidth*liCount);
        $(this).addClass("active");
        $(`<a class="active" href="javascript:void(0)" data-select="${index}">${index}</a>`).appendTo($(current).parent().next());
      } else {
        $(`<a href="javascript:void(0)" data-select="${index}">${index}</a>`).appendTo($(current).parent().next());
      }
       $(this).css({"z-index": zIndex});
      zIndex--;
    });
  });
     
   $("div.controls").on("click", "a", function(){
     var num = parseInt($(this).attr("data-select"));
     var name = $(this).parents("div[data-package]").attr("data-package");
     moveSlides(num, name);
   });
    
    // Controls start and stop automatically
    var autoSpeed = 4500, autoPlay = null;
    $(window).on("load", autoPlayStart());
    $(mainElem).find("a.main").on("mouseover click", autoPlayStop).on("mouseout", autoPlayStart)
    $(mainElem).find("a[data-select]").on("mouseover click", autoPlayStop);  
    function autoPlayStart() {
      autoPlay = setInterval(function(){
        mainElem.each(function(){
          var num = $(this).find("li.active").index();
          var name = $(this).attr("data-package");
          num++;
          moveSlides(num, name);
        }); 
      }, autoSpeed);
    }
    function autoPlayStop() {
      clearInterval(autoPlay);
    }
    
    // Controls the movement of the slides
    function moveSlides(data, pkg){
      //console.log(`this is the data/num ${data}`)
      var currentElem = $("#carousel").find(`div[data-package="${pkg}"]`),
          liWidth = currentElem.find("img").width();
          liCount = currentElem.find("li").length;
      if(data === liCount){ data = 0;}
      //console.log(`this is the length ${liCount}`);
      currentElem.find("ul").css("transform", "translateX(-"+((data)*liWidth)+"px)"); 
    //adds active to slide
      currentElem.find("li").removeClass("active");
      currentElem.find("li").eq(data).addClass("active");
    //adds active to button
      currentElem.find(".controls a").removeClass("active");
      currentElem.find(".controls a").eq(data).addClass("active");
    }
    
  }
  
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

div.overlay {width: 100%; height: 100%; background-color: rgba(37,37,37,0.4); position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 2999;}

/* Carousel Slides */
#carousel {display: flex; align-items: flex-start; flex-wrap: nowrap;}
#carousel > div {flex: 1 50%; text-align: center;}
#carousel > div div.container {margin: 0 auto;}
#carousel ul.carousel {list-style-type: none; margin: 0 auto; padding: 0; position: relative; display: inline-flex; flex-wrap: nowrap; transition: all 500ms ease;}
#carousel ul.carousel > li {position: relative; display: inline-block;}
#carousel ul.carousel > li > a {display: block; line-height: 0;}
#carousel ul.carousel > li > a:after {content: "\f00e"; position: absolute; font-family: FontAwesome; font-size: 3vw; left: 0; right: 0; bottom: 0; top: 0; display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; transition: all 200ms ease; opacity: 0; color: #fff;}
#carousel ul.carousel > li > a:hover:after {font-size: 5vw; opacity: 1; background-color: rgba(169, 166, 202, 0.45);}
#carousel ul.carousel > li > a > img {max-width: 100%; min-width: 300px;}

/* Carousel Controls */
#carousel div.controls a {display: inline-block; margin: 0 2px; text-indent: -9999vw; border: 1px solid #252525; height: 5px; width:5px; border-radius: 50%; transition: all 300ms ease;}
#carousel div.controls a.active, #carousel div.controls a:hover, #carousel div.controls a:focus {background-color: #252525;}

/* Lightbox */
#lightbox {position: fixed;left: 0;right: 0;top: 0;width: 100%;height: 100%;text-align: center;z-index: 4000;max-height: 100vh;padding: 4vw 0 2.5vw;box-sizing: border-box;}
#lightbox div.header, #lightbox div.text {position: fixed; left: 0; top: 0; right: 0; bottom: auto; padding: 3px 0; background-color: rgba(255,255,255,0.75); box-shadow: 0 0 10px 0px rgba(0,0,0,0.35);}
#lightbox div.header {top: 0px; z-index: 4001;}
#lightbox div.header h2 {margin: 0;}
#lightbox div.text {top: 50px; z-index: 4002;}
#lightbox div.image {display: inline-block; overflow-x: hidden; overflow-y: scroll; max-height: 100%; border: 1px solid #989898; box-shadow: 0 0 10px 0px rgba(0,0,0,0.35);}
#lightbox a {display: inline-block; text-decoration: none; background-color: #005DAC; border: 2px solid #41719C; padding: .8em 3em; font-size: 1em; color: #fff; margin: 0 20px 0 0; cursor: pointer; transition: all 250ms ease; font-family: 'Roboto', sans-serif; text-transform: uppercase; font-weight: 300;}
#lightbox a:hover, #lightbox div.header a:focus {background-color: #fff; border-color: #005DAC; color: #005DAC;}