LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  
	
	
	

Fluid Carousel

A carousel whose panels expand to fit the screen width. When enough space becomes available, the carousel controls and titles overlay the carousel images, but small screens display the navigation and titles beneath the images. The user can click the previous and next buttons to advance, but touch-enabled users can also swipe through the carousel.

CSS
.c {
      position: relative;
  		margin: 0 auto;
		}
.c h2 {
   font-size: 1.6em; 
}
		.c-list-container {
			overflow: hidden;
			position: relative;
      z-index: 0;
		}
		.c-list {
			width: 99999em;
			position: relative;
			left: 0;
		}
    .c-list.animating {
      -webkit-transition: left 0.25s ease-out; 
     		-moz-transition: left 0.25s ease-out;  
       		-o-transition: left 0.25s ease-out; 
        	transition: left 0.25s ease-out;
    }
		
		.c li {
			float: left;
      position: relative;
		}
		.c li a {
			display: block;
		}
		.c img {
			display: block;
		}
		.c h2 {
			margin-top: 0;
		}
		.summary {
			padding: 1em;
		}
		.c-nav {
			clear: both;
			overflow: hidden;
			border-top: 1px solid #808080;
		}
		.c-nav a {
			float: left;
			width: 50%;
			padding: 1em;
			-webkit-transition: opacity 0.5s ease-out; 
     		-moz-transition: opacity 0.5s ease-out;  
       		-o-transition: opacity 0.5s ease-out; 
        	transition: opacity 0.5s ease-out;
		}
		.c-nav a.next {
			border-left: 1px solid #808080;
			text-align: right;
		}
		.c-nav a.inactive {
			opacity: 0.2;
			
		}
		
		/* Medium */
		@media screen and (min-width: 35em) {
			body:after { /* Conditional CSS http://adactio.com/journal/5429/ */
		        content: 'medium';
		        display: none;
	   		}
		}

		
		/* Large */
		@media screen and (min-width: 56.25em) {
			body:after { /* Conditional CSS http://adactio.com/journal/5429/ */
		        content: 'large';
		        display: none;
	   		}
		}
		
		/*Large with room to spare on either side */
		@media screen and (min-width: 56em) {
      .summary {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        color: #fff;
        background: rgba(0,0,0,0.2);
      }
      .c h2 {
         font-size: 2.6em; 
      }
      .c-nav a {
				position: absolute;
				top: 40%;
				left: 1em;
				width: 4em;
				height: 2em;
				padding: 0;
				margin-top: -1em;
        color: #fff;
			}
			.c-nav a.next {
				left: auto;
				right: 1em;
				border: 0;
			}
		}
JS
(function(w){
  var sw = document.body.clientWidth,
    current = 0,
    breakpointSize = window.getComputedStyle(document.body,':after').getPropertyValue('content'),
		multiplier = 1, /*Determines the number of panels*/
		$carousel = $('.c'),
		$cList = $('.c-list'),
		$cContainer = $('.c-list-container'),
		$cWidth = $cContainer.outerWidth(),
    cLeft = $cList.css("left").replace("px",""),
		$li = $cList.find('li'),
		$liLength = $li.size(),
		numPages = $liLength/multiplier,
		$prev = $('.c-nav .prev'),
		$next = $('.c-nav .next');
	
	$(document).ready(function() {
		buildCarousel();
	});
	
	
	$(window).resize(function(){ //On Window Resize
		sw = document.body.clientWidth;
		$cWidth = $cContainer.width();
		breakpointSize = window.getComputedStyle(document.body,':after').getPropertyValue('content');  /* Conditional CSS http://adactio.com/journal/5429/ */
		sizeCarousel();
		posCarousel();
	});
	
	function sizeCarousel() { //Determine the size and number of panels to reveal
		current = 0;
		
		animLimit = $liLength/multiplier-1;
		
		$li.outerWidth($cWidth/multiplier); //Set panel widths
		
	}
	
	
	function buildCarousel() { //Build the Carousel
		sizeCarousel();

		if(Modernizr.touch) {
		   buildSwipe(); 
		}
	}
	
	function posCarousel() { //Animate Carousel. CSS transitions used for the actual animation.
		var pos = -current * $cWidth;
		$cList.addClass('animating').css("left",pos);
    
    setTimeout(function() {
      $cList.removeClass('animating');
      cLeft = $cList.css("left").replace("px","");
    }, 500);  // will work with every browser
	}
	
	$prev.click(function(e){ //Previous Button Click
		e.preventDefault();
		moveRight();
	});
  
	$next.click(function(e){ //Next Button Click
		e.preventDefault();
		moveLeft();
	});

  function moveRight() {
    if(current>0) {
			current--;
		}
		posCarousel();
  }
  
  function moveLeft() {
      if(current 0 && diffXAbs > threshold) {
        moveLeft();
			} else if (diffX < 0 && diffXAbs > threshold) {
				moveRight();
      } else {
        posCarousel();
      }
			
      origX = finalX = diffX = 0;
		});
}
  
})(this);
Host Instantly Drag and Drop Website Builder

 

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

Related Codes

Pen ID
Pen ID
Pen ID