allcaps/.gitignore

## .gitignore
bootstrap
jquery

## carousel-prev-next-truncated-images.html
<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>

-->

## export-00001.png

      
    Raw
  

              export-00001.png
            
          
## export-00002.png

      
    Raw
  

              export-00002.png
            
          
## export-00003.png

      
    Raw
  

              export-00003.png
            
          
## export-00004.png

      
    Raw
  

              export-00004.png
            
          
## export-00005.png

      
    Raw
  

              export-00005.png
            
          
## export-00006.png

      
    Raw
  

              export-00006.png
	<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>

	-->