Last active
August 29, 2015 14:26
-
-
Save allcaps/4525c0150a14ef3d9985 to your computer and use it in GitHub Desktop.
Carousel slider with truncated next and previous images. Mobile first, responsive. I try to stay close to Twitter Bootstrap markup
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| bootstrap | |
| jquery |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title></title> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> | |
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> | |
| <script src="jquery/jquery-1.11.0.min.js"></script> | |
| <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> | |
| <script src="bootstrap/js/bootstrap.min.js"></script> | |
| <style> | |
| body { | |
| margin: 0; | |
| } | |
| #carousel { | |
| width: 100%; | |
| overflow: hidden; | |
| background-color: black; | |
| } | |
| #carousel .slide { | |
| display:block; | |
| margin: 0; | |
| float:left; | |
| } | |
| #carousel .wrapper { | |
| /* set with js calculated len(slides) */ | |
| width: 10000000px; | |
| } | |
| /* xs */ | |
| @media (max-width: 767px) { | |
| #carousel > .wrapper > .slide { | |
| /* Set with js to vp width. Updated with js? */ | |
| width: 100%; | |
| } | |
| } | |
| /* sm */ | |
| @media (max-width: 991px) and (min-width: 768px){ | |
| #carousel > .wrapper > .slide { | |
| width: 750px; | |
| } | |
| } | |
| /* md */ | |
| @media (max-width: 1199px) and (min-width: 992px) { | |
| #carousel > .wrapper > .slide { | |
| width: 970px; | |
| } | |
| } | |
| /* lg */ | |
| @media (min-width: 1200px) { | |
| #carousel > .wrapper > .slide { | |
| width: 1170px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container" style="background-color:lightgray"> | |
| <div class="showmedia"> | |
| <div class="visible-xs">xs</div> | |
| <div class="visible-sm">sm</div> | |
| <div class="visible-md">md</div> | |
| <div class="visible-lg">lg</div> | |
| </div> | |
| </div> | |
| <!-- The BS `class="carousel"` helps to position the indicators --> | |
| <div id="carousel" class="carousel"> | |
| <div class="wrapper"> | |
| <div class="slide"> | |
| <img src="export-00001.png" class="responsive" width="100%"> | |
| </div> | |
| <div class="slide"> | |
| <img src="export-00002.png" class="responsive" width="100%"> | |
| </div> | |
| <div class="slide"> | |
| <img src="export-00003.png" class="responsive" width="100%"> | |
| </div> | |
| <div class="slide"> | |
| <img src="export-00004.png" class="responsive" width="100%"> | |
| </div> | |
| <div class="slide"> | |
| <img src="export-00005.png" class="responsive" width="100%"> | |
| </div> | |
| <div class="slide"> | |
| <img src="export-00006.png" class="responsive" width="100%"> | |
| </div> | |
| </div> | |
| <ol class="carousel-indicators"> | |
| <li class="active"></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| </ol> | |
| </div> | |
| <script> | |
| /* A debounced resize handler that fires ONLY when the width changes */ | |
| // https://jsbin.com/lalopu/3/edit?html,js,output | |
| function resizeWidthOnly(a,b) { | |
| var c = [window.innerWidth]; | |
| return onresize = function() { | |
| var d = window.innerWidth, | |
| e = c.length; | |
| c.push(d); | |
| if(c[e]!==c[e-1]){ | |
| clearTimeout(b); | |
| b = setTimeout(a, 250); | |
| } | |
| }, a; | |
| } | |
| function foo() { | |
| // settings | |
| var carousel = $("#carousel"); | |
| var interval = 1000; | |
| var speed = 600; | |
| var xs_max = 767; | |
| var gutter = 30; | |
| var opacity = .5; | |
| // Derived vars. | |
| var wrapper = $(".wrapper"); | |
| var slides = $(carousel).find('.slide').css('opacity', opacity); | |
| var carousel_width = $(carousel).width(); | |
| var first_slide = $(slides[0]).css('opacity', 1); | |
| // Initial sizing and positioning. | |
| if (carousel_width >= xs_max) { | |
| // Let the css take over. | |
| $(slides).css('width', ''); | |
| } else { | |
| $(slides).css('width', carousel_width + 'px'); | |
| offset = 0; | |
| } | |
| var slide_width = $(first_slide).width(); | |
| var offset = ((carousel_width - slide_width) / 2); | |
| $(wrapper).css('margin-left', offset); | |
| $(wrapper).width(slides.length * slide_width); | |
| // Click event listner | |
| $(slides).click(function() { | |
| slide_to(this); | |
| }); | |
| function slide_to(elm) { | |
| // Slide to the current slide. | |
| var idx = $(slides).index(elm); | |
| $(wrapper).stop().animate({'margin-left': -(idx * slide_width) + offset}, speed) | |
| // Set the clicked slide to full opacity and nested fade out animation. | |
| $(elm).stop().css('opacity', 1, $(function(){ | |
| $(slides).not(elm).stop().animate({'opacity': opacity}, speed / 3 * 2); | |
| })); | |
| } | |
| }; | |
| // Init and resize. | |
| resizeWidthOnly(function() { | |
| foo(); | |
| })(); | |
| </script> | |
| </body> | |
| </html> | |
| <!-- | |
| Carousel | |
| Twitter Bootstrap and JQuery based. | |
| Mobile first. | |
| Carousel slider with truncated next and previous buttons. | |
| Main slide should have Bootstrap `.container` width. That is 100% at xs. At other viewport sizes a fixed width. | |
| Must have: | |
| - Mobile first | |
| - Responsive | |
| - Any content | |
| - Bootstrap styles where possible | |
| - Previous, next (the truncated slides) | |
| ToDo | |
| - Slide interval | |
| - Wrapping slides last slide will be the first previous button. | |
| Nice to have: | |
| - Previous, next toned down | |
| - Swipe prev next. | |
| - Indicators | |
| <div id="carousel"> # Viewport width 100%. Overflow hidden; | |
| <div class="wrapper"> # Total with of all slides combined. Has negative left margin. (vp_width - slide_width) / 2 | |
| <div class="slide"> # Responsive so variable with. On mobile 100%. Set form js from the #carousel container. Because the parent is to wide. On other sizes this should take the Bootstrap .container size. | |
| <img src="slide.jpeg" class="responsive" width="100%"> # Responsive images fill the container (but keep ratio). Add 'width=100%' So upscaling can happen. | |
| </div> | |
| ... | |
| </div> | |
| </div> | |
| --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment