├── README.md ├── css ├── component.css └── default.css ├── fonts ├── fontawesome.eot ├── fontawesome.svg ├── fontawesome.ttf ├── fontawesome.woff └── readme.md ├── images ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg └── 5.jpg ├── index.html └── js ├── jquery.cbpFWSlider.js ├── jquery.cbpFWSlider.min.js └── modernizr.custom.js /README.md: -------------------------------------------------------------------------------- 1 | Blueprint: Full Width Image Slider 2 | ========= 3 | 4 | A very simple 100% width slider that scales down to mobile. 5 | 6 | [article on Codrops](http://tympanus.net/codrops/?p=13665) 7 | 8 | [demo](http://tympanus.net/Blueprints/FullWidthImageSlider/) 9 | 10 | The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration. 11 | Check out all of our Blueprints [here](http://tympanus.net/codrops/category/blueprints/) 12 | 13 | [LICENSING & TERMS OF USE](http://tympanus.net/codrops/licensing/) -------------------------------------------------------------------------------- /css/component.css: -------------------------------------------------------------------------------- 1 | .cbp-fwslider { 2 | position: relative; 3 | margin: 0 0 10px; 4 | overflow: hidden; 5 | padding: 40px 0 60px; 6 | } 7 | 8 | .cbp-fwslider ul { 9 | margin: 0; 10 | padding: 0; 11 | white-space: nowrap; 12 | list-style-type: none; 13 | } 14 | 15 | .cbp-fwslider ul li { 16 | -webkit-transform: translateZ(0); 17 | -moz-transform: translateZ(0); 18 | transform: translateZ(0); 19 | float: left; 20 | display: block; 21 | margin: 0; 22 | padding: 0; 23 | } 24 | 25 | .cbp-fwslider ul li > a, 26 | .cbp-fwslider ul li > div { 27 | display: block; 28 | text-align: center; 29 | outline: none; 30 | } 31 | 32 | .cbp-fwslider ul li img { 33 | border: none; 34 | display: block; 35 | margin: 0 auto; 36 | max-width: 75%; 37 | } 38 | 39 | .cbp-fwslider nav span { 40 | position: absolute; 41 | top: 50%; 42 | width: 50px; 43 | height: 100px; 44 | background: #47a3da; 45 | color: #fff; 46 | font-size: 50px; 47 | text-align: center; 48 | margin-top: -50px; 49 | line-height: 100px; 50 | cursor: pointer; 51 | font-weight: normal; 52 | } 53 | 54 | .cbp-fwslider nav span:hover { 55 | background: #378fc3; 56 | } 57 | 58 | .cbp-fwslider nav span.cbp-fwnext { 59 | right: 0px; 60 | } 61 | 62 | .cbp-fwslider nav span.cbp-fwprev { 63 | left: 0px; 64 | } 65 | 66 | .cbp-fwdots { 67 | position: absolute; 68 | bottom: 0px; 69 | white-space: nowrap; 70 | text-align: center; 71 | width: 100%; 72 | } 73 | 74 | .cbp-fwdots span { 75 | display: inline-block; 76 | width: 18px; 77 | height: 18px; 78 | background: #ddd; 79 | margin: 4px; 80 | border-radius: 50%; 81 | cursor: pointer; 82 | } 83 | 84 | .cbp-fwdots span:hover { 85 | background: #999; 86 | } 87 | 88 | .cbp-fwdots span.cbp-fwcurrent { 89 | background: #47a3da; 90 | box-shadow: 0 0 0 2px #47a3da; 91 | -webkit-transition: box-shadow 0.2s ease-in-out; 92 | -moz-transition: box-shadow 0.2s ease-in-out; 93 | transition: box-shadow 0.2s ease-in-out; 94 | } -------------------------------------------------------------------------------- /css/default.css: -------------------------------------------------------------------------------- 1 | /* General Demo Style */ 2 | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); 3 | 4 | @font-face { 5 | font-family: 'fontawesome'; 6 | src:url('../fonts/fontawesome.eot'); 7 | src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'), 8 | url('../fonts/fontawesome.svg#fontawesome') format('svg'), 9 | url('../fonts/fontawesome.woff') format('woff'), 10 | url('../fonts/fontawesome.ttf') format('truetype'); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | 15 | body, html { font-size: 100%; padding: 0; margin: 0;} 16 | 17 | /* Reset */ 18 | *, 19 | *:after, 20 | *:before { 21 | -webkit-box-sizing: border-box; 22 | -moz-box-sizing: border-box; 23 | box-sizing: border-box; 24 | } 25 | 26 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 27 | .clearfix:before, 28 | .clearfix:after { 29 | content: " "; 30 | display: table; 31 | } 32 | 33 | .clearfix:after { 34 | clear: both; 35 | } 36 | 37 | body { 38 | font-family: 'Lato', Calibri, Arial, sans-serif; 39 | color: #47a3da; 40 | 41 | } 42 | 43 | a { 44 | color: #f0f0f0; 45 | text-decoration: none; 46 | } 47 | 48 | a:hover { 49 | color: #000; 50 | } 51 | 52 | .main, 53 | .container > header { 54 | width: 90%; 55 | max-width: 70em; 56 | margin: 0 auto; 57 | padding: 0 1.875em 3.125em 1.875em; 58 | } 59 | 60 | .container > header { 61 | padding: 2.875em 1.875em 1.875em; 62 | } 63 | 64 | .container > header h1 { 65 | font-size: 2.125em; 66 | line-height: 1.3; 67 | margin: 0; 68 | float: left; 69 | font-weight: 400; 70 | } 71 | 72 | .container > header span { 73 | display: block; 74 | font-weight: 700; 75 | text-transform: uppercase; 76 | letter-spacing: 0.5em; 77 | padding: 0 0 0.6em 0.1em; 78 | } 79 | 80 | .container > header nav { 81 | float: right; 82 | } 83 | 84 | .container > header nav a { 85 | display: block; 86 | float: left; 87 | position: relative; 88 | width: 2.5em; 89 | height: 2.5em; 90 | background: #fff; 91 | border-radius: 50%; 92 | color: transparent; 93 | margin: 0 0.1em; 94 | border: 4px solid #47a3da; 95 | text-indent: -8000px; 96 | } 97 | 98 | .container > header nav a:after { 99 | content: attr(data-info); 100 | color: #47a3da; 101 | position: absolute; 102 | width: 600%; 103 | top: 120%; 104 | text-align: right; 105 | right: 0; 106 | opacity: 0; 107 | pointer-events: none; 108 | } 109 | 110 | .container > header nav a:hover:after { 111 | opacity: 1; 112 | } 113 | 114 | .container > header nav a:hover { 115 | background: #47a3da; 116 | } 117 | 118 | .icon-drop:before, 119 | .icon-arrow-left:before { 120 | font-family: 'fontawesome'; 121 | position: absolute; 122 | top: 0; 123 | width: 100%; 124 | height: 100%; 125 | speak: none; 126 | font-style: normal; 127 | font-weight: normal; 128 | line-height: 2; 129 | text-align: center; 130 | color: #47a3da; 131 | -webkit-font-smoothing: antialiased; 132 | text-indent: 8000px; 133 | padding-left: 8px; 134 | } 135 | 136 | .container > header nav a:hover:before { 137 | color: #fff; 138 | } 139 | 140 | .icon-drop:before { 141 | content: "\e000"; 142 | } 143 | 144 | .icon-arrow-left:before { 145 | content: "\f060"; 146 | } 147 | 148 | -------------------------------------------------------------------------------- /fonts/fontawesome.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Blueprint-FullWidthImageSlider/f69efd5832eaa18a2a82b099bacee65d8876c16b/fonts/fontawesome.eot -------------------------------------------------------------------------------- /fonts/fontawesome.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /fonts/fontawesome.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Blueprint-FullWidthImageSlider/f69efd5832eaa18a2a82b099bacee65d8876c16b/fonts/fontawesome.ttf -------------------------------------------------------------------------------- /fonts/fontawesome.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Blueprint-FullWidthImageSlider/f69efd5832eaa18a2a82b099bacee65d8876c16b/fonts/fontawesome.woff -------------------------------------------------------------------------------- /fonts/readme.md: -------------------------------------------------------------------------------- 1 | Icons made with http://icomoon.io/ 2 | 3 | #Font Awesome 3.0.2 4 | ##the iconic font designed for use with Twitter Bootstrap 5 | 6 | The full suite of pictographic icons, examples, and documentation can be found at: 7 | http://fortawesome.github.com/Font-Awesome/ 8 | 9 | 10 | ##License 11 | - The Font Awesome font is licensed under the SIL Open Font License - http://scripts.sil.org/OFL 12 | - Font Awesome CSS, LESS, and SASS files are licensed under the MIT License - http://opensource.org/licenses/mit-license.html 13 | - The Font Awesome pictograms are licensed under the CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/ 14 | - Attribution is no longer required in Font Awesome 3.0, but much appreciated: "Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome" 15 | 16 | ##Contact 17 | - Email: dave@davegandy.com 18 | - Twitter: http://twitter.com/fortaweso_me 19 | - Work: Lead Product Designer @ http://kyru.us 20 | 21 | ##Changelog 22 | - v3.0.0 - all icons redesigned from scratch, optimized for Bootstrap's 14px default 23 | - v3.0.1 - much improved rendering in webkit, various bugfixes 24 | - v3.0.2 - much improved rendering and alignment in IE7 25 | -------------------------------------------------------------------------------- /images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Blueprint-FullWidthImageSlider/f69efd5832eaa18a2a82b099bacee65d8876c16b/images/1.jpg -------------------------------------------------------------------------------- /images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Blueprint-FullWidthImageSlider/f69efd5832eaa18a2a82b099bacee65d8876c16b/images/2.jpg -------------------------------------------------------------------------------- /images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Blueprint-FullWidthImageSlider/f69efd5832eaa18a2a82b099bacee65d8876c16b/images/3.jpg -------------------------------------------------------------------------------- /images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Blueprint-FullWidthImageSlider/f69efd5832eaa18a2a82b099bacee65d8876c16b/images/4.jpg -------------------------------------------------------------------------------- /images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Blueprint-FullWidthImageSlider/f69efd5832eaa18a2a82b099bacee65d8876c16b/images/5.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Blueprint: Full Width Image Slider 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | Blueprint 20 |

Full Width Image Slider

21 | 25 |
26 |
27 | 34 |
35 |
36 | 37 | 38 | 58 | 59 | -------------------------------------------------------------------------------- /js/jquery.cbpFWSlider.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jquery.cbpFWSlider.js v1.0.0 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2013, Codrops 9 | * http://www.codrops.com 10 | */ 11 | ;( function( $, window, undefined ) { 12 | 13 | 'use strict'; 14 | 15 | // global 16 | var Modernizr = window.Modernizr; 17 | 18 | $.CBPFWSlider = function( options, element ) { 19 | this.$el = $( element ); 20 | this._init( options ); 21 | }; 22 | 23 | // the options 24 | $.CBPFWSlider.defaults = { 25 | // default transition speed (ms) 26 | speed : 500, 27 | // default transition easing 28 | easing : 'ease' 29 | }; 30 | 31 | $.CBPFWSlider.prototype = { 32 | _init : function( options ) { 33 | // options 34 | this.options = $.extend( true, {}, $.CBPFWSlider.defaults, options ); 35 | // cache some elements and initialize some variables 36 | this._config(); 37 | // initialize/bind the events 38 | this._initEvents(); 39 | }, 40 | _config : function() { 41 | 42 | // the list of items 43 | this.$list = this.$el.children( 'ul' ); 44 | // the items (li elements) 45 | this.$items = this.$list.children( 'li' ); 46 | // total number of items 47 | this.itemsCount = this.$items.length; 48 | // support for CSS Transitions & transforms 49 | this.support = Modernizr.csstransitions && Modernizr.csstransforms; 50 | this.support3d = Modernizr.csstransforms3d; 51 | // transition end event name and transform name 52 | // transition end event name 53 | var transEndEventNames = { 54 | 'WebkitTransition' : 'webkitTransitionEnd', 55 | 'MozTransition' : 'transitionend', 56 | 'OTransition' : 'oTransitionEnd', 57 | 'msTransition' : 'MSTransitionEnd', 58 | 'transition' : 'transitionend' 59 | }, 60 | transformNames = { 61 | 'WebkitTransform' : '-webkit-transform', 62 | 'MozTransform' : '-moz-transform', 63 | 'OTransform' : '-o-transform', 64 | 'msTransform' : '-ms-transform', 65 | 'transform' : 'transform' 66 | }; 67 | 68 | if( this.support ) { 69 | this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ] + '.cbpFWSlider'; 70 | this.transformName = transformNames[ Modernizr.prefixed( 'transform' ) ]; 71 | } 72 | // current and old item´s index 73 | this.current = 0; 74 | this.old = 0; 75 | // check if the list is currently moving 76 | this.isAnimating = false; 77 | // the list (ul) will have a width of 100% x itemsCount 78 | this.$list.css( 'width', 100 * this.itemsCount + '%' ); 79 | // apply the transition 80 | if( this.support ) { 81 | this.$list.css( 'transition', this.transformName + ' ' + this.options.speed + 'ms ' + this.options.easing ); 82 | } 83 | // each item will have a width of 100 / itemsCount 84 | this.$items.css( 'width', 100 / this.itemsCount + '%' ); 85 | // add navigation arrows and the navigation dots if there is more than 1 item 86 | if( this.itemsCount > 1 ) { 87 | 88 | // add navigation arrows (the previous arrow is not shown initially): 89 | this.$navPrev = $( '<' ).hide(); 90 | this.$navNext = $( '>' ); 91 | $( '