LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
html, body{
	background: #eee;
	width: 100%;
}

.wrapper{
  width:90%;
  position:relative;
  margin:5% auto 0;
}

/**
 * Padding is set relative to the width
 * of the element, so here padding-top:60% is
 * a percentage of the width. This allows us 
 * to set the height as a ratio of the width
 *
 */
.carousel{
	width: 100%;
	position: relative;
	padding-top: 60%;
	overflow: hidden;
}

.inner{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left: 0;
}

/**
 * ==========================
 * Animation styles
 * 
 * Notes:
 * 1. We use z-index to position active slides in-front 
 * of non-active slides
 * 2. We set right:0 and left:0 on .slide to provide us with
 * a default positioning on both sides of the slide. This allows 
 * us to trigger JS and CSS3 animations easily
 *
 */
.slide{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	right:0;
	left:0;
	z-index: 1;
	opacity: 0;
}

.slide.active,
.slide.left,
.slide.right{
	z-index: 2;
	opacity: 1;
}

/**
 * ==========================
 * JS animation styles
 * 
 * We use jQuery.animate to control the sliding animations
 * when CSS3 animations are not available. In order for
 * the next slide to slide in from the right, we need
 * to change the left:0 property of the slide to left:auto
 *
 */

.js-reset-left{left:auto}

/**
 * ==========================
 * CSS animation styles
 * 
 * .slide.left and .slide.right set-up
 * the to-be-animated slide so that it can slide
 * into view. For example, a slide that is about 
 * to slide in from the right will:
 * 1. Be positioned to the right of the viewport (right:-100%)
 * 2. Slide in when the style is superseded with a more specific style (right:0%)
 *
 */
.slide.left{
	left:-100%;
	right:0;
}

.slide.right{
	right:-100%;
	left: auto;
}

.transition .slide.left{left:0%}
.transition .slide.right{right:0%}

/**
 * The following classes slide the previously active
 * slide out of view before positioning behind the 
 * currently active slide
 *
 */
.transition .slide.shift-right{right: 100%;left:auto}
.transition .slide.shift-left{left: 100%;right:auto}

/**
 * This sets the CSS properties that will animate. We set the
 * transition-duration property dynamically via JS.
 * We use the browser's default transition-timing-function
 * for simplicity's sake
 * 
 * It is important to note that we are using CodePen's inbuilt
 * CSS3 property prefixer. For your own projects, you will need
 * to prefix the transition and transform properties here to ensure
 * reliable support across browsers
 *
 */
.transition .slide{
	-webkit-transition-property: right, left, margin;
	transition-property: right, left, margin;
}

/**
 * ==========================
 * Indicators
 *
 */
.indicators{
  width:100%;
  position: absolute;
  bottom:0;
  z-index: 4;
  padding:0;
  text-align: center;
}

.indicators li{
	width: 13px;
	height: 13px;
	display: inline-block;
	margin: 5px;
	background: #fff;
	list-style-type: none;
	border-radius: 50%;
  cursor:pointer;
  -webkit-transition: background 0.3s ease-out;
  transition:background 0.3s ease-out;
}

.indicators li.active{background:#93278f}

.indicators li:hover{background-color:#2b2b2b}

/**
 * ==========================
 * Arrows 
 *
 */
.arrow{
  width: 20px;
  height: 20px;
  position:absolute;
  top:50%;
  z-index:5;
  border-top:3px solid #fff;
  border-right:3px solid #fff;
  cursor:pointer;
  -webkit-transition: border-color 0.3s ease-out;
  transition:border-color 0.3s ease-out;
}

.arrow:hover{border-color:#93278f}

.arrow-left{
  left:20px;
  -webkit-transform:rotate(225deg);
          transform:rotate(225deg);
}

.arrow-right{
  right:20px;
  -webkit-transform:rotate(45deg);
          transform:rotate(45deg);
}

/**
 * ==========================
 * For demo purposes only
 * 
 * Please note that the styles below are used
 * for the purposes of this demo only. There is no need
 * to use these in any of your own projects
 *
 */
.slide{
	text-align:center;
  padding-top:25%;
  background-size:cover;
}

h1{
	width:100px;
  height:100px;
  background-color:rgba(146, 45, 141,0.7);
	margin:auto;
  line-height:100px;
	color:#fff;
	font-size:2.4em;
  border-radius:50%;
}

.slide:nth-child(1){
	background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/163697/slide-1.jpg);
 }

.slide:nth-child(2){
	background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/163697/slide-2.jpg);
}

.slide:nth-child(3){
	background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/163697/slide-3.jpg);
 }
JS
/*
 * We trigger the factory() function is different
 * ways to support modular JavaScript libraries. See
 * the 'Wrapping Up' section of the tutorial for
 * more information
 *
 */
;(function(factory){
  
  if (typeof define === 'function' && define.amd) {
      define(['jquery'], factory);
  } else if (typeof exports !== 'undefined') {
      module.exports = factory(require('jquery'));
  } else {
      factory(jQuery);
  }

})(function($){
  
  /*
	 * We define Zippy as a variable of type ‘function’. 
   * Here, we use an anonymous function to ensure 
   * that the logic inside the function is executed immediately. 
	 *
	 */
  var Zippy = (function(element, settings){
    
    var instanceUid = 0;
    
    /*
     * The constructor function for Zippy
     *
     */
    function _Zippy(element, settings){
      this.defaults = {
        slideDuration: '3000',
        speed: 500,
        arrowRight: '.arrow-right',
        arrowLeft: '.arrow-left'
      };
      
      // We create a new property to hold our default settings after they
      // have been merged with user supplied settings
      this.settings = $.extend({},this,this.defaults,settings);
      
      // This object holds values that will change as the plugin operates
      this.initials = {
        currSlide : 0,
        $currSlide: null,
        totalSlides : false,
        csstransitions: false
      };
      
      // Attaches the properties of this.initials as direct properties of Zippy
      $.extend(this,this.initials);
      
      // Here we'll hold a reference to the DOM element passed in
      // by the $.each function when this plugin was instantiated
      this.$el = $(element);
      
      // Ensure that the value of 'this' always references Zippy
      this.changeSlide = $.proxy(this.changeSlide,this);
      
      // We'll call our initiator function to get things rolling!
      this.init();
      
      // A little bit of metadata about the instantiated object
      // This property will be incremented everytime a new Zippy carousel is created
		 // It provides each carousel with a unique ID
      this.instanceUid = instanceUid++;
    }
    
    return _Zippy;
  
  })();
  
  /**
	 * Called once per instance
	 * Calls starter methods and associate the '.zippy-carousel' class
	 * @params void
	 * @returns void
	 *
	 */
   Zippy.prototype.init = function(){
    //Test to see if cssanimations are available
    this.csstransitionsTest();
    // Add a class so we can style our carousel
    this.$el.addClass('zippy-carousel');
    // Build out any DOM elements needed for the plugin to run
    // Eg, we'll create an indicator dot for every slide in the carousel
    this.build();
    // Eg. Let the user click next/prev arrows or indicator dots
    this.events();
    // Bind any events we'll need for the carousel to function
    this.activate();
    // Start the timer loop to control progression to the next slide
    this.initTimer();
  };
	
	/**
	 * Appropriated out of Modernizr v2.8.3
	 * Creates a new DOM element and tests existence of properties on it's
	 * Style object to see if CSSTransitions are available
	 * @params void
	 * @returns void
	 *
	 */
	Zippy.prototype.csstransitionsTest = function(){
		var elem = document.createElement('modernizr');
		//A list of properties to test for
		var props = ["transition","WebkitTransition","MozTransition","OTransition","msTransition"];
		//Iterate through our new element's Style property to see if these properties exist
		for ( var i in props ) {
			var prop = props[i];
			var result = elem.style[prop] !== undefined ? prop : false;
			if (result){
				this.csstransitions = result;
				break;
			} 
		} 
	};
	
	/**
	 * Add the CSSTransition duration to the DOM Object's Style property
	 * We trigger this function just before we want the slides to animate
	 * @params void
	 * @returns void
	 *
	 */
	Zippy.prototype.addCSSDuration = function(){
		var _ = this;
		this.$el.find('.slide').each(function(){
			this.style[_.csstransitions+'Duration'] = _.settings.speed+'ms';
		});
	}
	
	/**
   * Remove the CSSTransition duration from the DOM Object's style property
   * We trigger this function just after the slides have animated
   * @params void
   * @returns void
   *
   */
	Zippy.prototype.removeCSSDuration = function(){
		var _ = this;
		this.$el.find('.slide').each(function(){
			this.style[_.csstransitions+'Duration'] = '';
		});
	}
	
	/**
	 * Creates a list of indicators based on the amount of slides
	 * @params void
	 * @returns void
	 *
	 */ 
	Zippy.prototype.build = function(){
		var $indicators = this.$el.append('
    ').find('.indicators'); this.totalSlides = this.$el.find('.slide').length; for(var i = 0; i < this.totalSlides; i++) $indicators.append('
  • '); }; /** * Activates the first slide * Activates the first indicator * @params void * @returns void * */ Zippy.prototype.activate = function(){ this.$currSlide = this.$el.find('.slide').eq(0); this.$el.find('.indicators li').eq(0).addClass('active'); }; /** * Associate event handlers to events * For arrow events, we send the placement of the next slide to the handler * @params void * @returns void * */ Zippy.prototype.events = function(){ $('body') .on('click',this.settings.arrowRight,{direction:'right'},this.changeSlide) .on('click',this.settings.arrowLeft,{direction:'left'},this.changeSlide) .on('click','.indicators li',this.changeSlide); }; /** * TIMER * Resets the timer * @params void * @returns void * */ Zippy.prototype.clearTimer = function(){ if (this.timer) clearInterval(this.timer); }; /** * TIMER * Initialise the timer * @params void * @returns void * */ Zippy.prototype.initTimer = function(){ this.timer = setInterval(this.changeSlide, this.settings.slideDuration); }; /** * TIMER * Start the timer * Reset the throttle to allow changeSlide to be executable * @params void * @returns void * */ Zippy.prototype.startTimer = function(){ this.initTimer(); this.throttle = false; }; /** * MAIN LOGIC HANDLER * Triggers a set of subfunctions to carry out the animation * @params object event * @returns void * */ Zippy.prototype.changeSlide = function(e){ //Ensure that animations are triggered one at a time if (this.throttle) return; this.throttle = true; //Stop the timer as the animation is getting carried out this.clearTimer(); // Returns the animation direction (left or right) var direction = this._direction(e); // Selects the next slide var animate = this._next(e,direction); if (!animate) return; //Active the next slide to scroll into view var $nextSlide = this.$el.find('.slide').eq(this.currSlide).addClass(direction + ' active'); if (!this.csstransitions){ this._jsAnimation($nextSlide,direction); } else { this._cssAnimation($nextSlide,direction); } }; /** * Returns the animation direction, right or left * @params object event * @returns strong animation direction * */ Zippy.prototype._direction = function(e){ var direction; // Default to forward movement if (typeof e !== 'undefined'){ direction = (typeof e.data === 'undefined' ? 'right' : e.data.direction); } else { direction = 'right'; } return direction; }; /** * Updates our plugin with the next slide number * @params object event * @params string animation direction * @returns boolean continue to animate? * */ Zippy.prototype._next = function(e,direction){ // If the event was triggered by a slide indicator, we store the data-index value of that indicator var index = (typeof e !== 'undefined' ? $(e.currentTarget).data('index') : undefined); //Logic for determining the next slide switch(true){ //If the event was triggered by an indicator, we set the next slide based on index case( typeof index !== 'undefined'): if (this.currSlide == index){ this.startTimer(); return false; } this.currSlide = index; break; case(direction == 'right' && this.currSlide < (this.totalSlides - 1)): this.currSlide++; break; case(direction == 'right'): this.currSlide = 0; break; case(direction == 'left' && this.currSlide === 0): this.currSlide = (this.totalSlides - 1); break; case(direction == 'left'): this.currSlide--; break; } return true; }; /** * Executes the animation via CSS transitions * @params object Jquery object the next slide to slide into view * @params string animation direction * @returns void * */ Zippy.prototype._cssAnimation = function($nextSlide,direction){ //Init CSS transitions setTimeout(function(){ this.$el.addClass('transition'); this.addCSSDuration(); this.$currSlide.addClass('shift-'+direction); }.bind(this),100); //CSS Animation Callback //After the animation has played out, remove CSS transitions //Remove unnecessary classes //Start timer setTimeout(function(){ this.$el.removeClass('transition'); this.removeCSSDuration(); this.$currSlide.removeClass('active shift-left shift-right'); this.$currSlide = $nextSlide.removeClass(direction); this._updateIndicators(); this.startTimer(); }.bind(this),100 + this.settings.speed); }; /** * Executes the animation via JS transitions * @params object Jquery object the next slide to slide into view * @params string animation direction * @returns void * */ Zippy.prototype._jsAnimation = function($nextSlide,direction){ //Cache this reference for use inside animate functions var _ = this; // See CSS for explanation of .js-reset-left if(direction == 'right') _.$currSlide.addClass('js-reset-left'); var animation = {}; animation[direction] = '0%'; var animationPrev = {}; animationPrev[direction] = '100%'; //Animation: Current slide this.$currSlide.animate(animationPrev,this.settings.speed); //Animation: Next slide $nextSlide.animate(animation,this.settings.speed,'swing',function(){ //Get rid of any JS animation residue _.$currSlide.removeClass('active js-reset-left').attr('style',''); //Cache the next slide after classes and inline styles have been removed _.$currSlide = $nextSlide.removeClass(direction).attr('style',''); _._updateIndicators(); _.startTimer(); }); }; /** * Ensures the slide indicators are pointing to the currently active slide * @params void * @returns void * */ Zippy.prototype._updateIndicators = function(){ this.$el.find('.indicators li').removeClass('active').eq(this.currSlide).addClass('active'); }; /** * Initialize the plugin once for each DOM object passed to jQuery * @params object options object * @returns void * */ $.fn.Zippy = function(options){ return this.each(function(index,el){ el.Zippy = new Zippy(el,options); }); }; }); // Custom options for the carousel var args = { arrowRight : '.arrow-right', //A jQuery reference to the right arrow arrowLeft : '.arrow-left', //A jQuery reference to the left arrow speed : 1000, //The speed of the animation (milliseconds) slideDuration : 4000 //The amount of time between animations (milliseconds) }; $('.carousel').Zippy(args);
Host Instantly Drag and Drop Website Builder

 

Term
Mon, 11/27/2017 - 21:45

Related Codes

Pen ID
Pen ID
Pen ID