Mag : Slider as header [WIP]

index.html

<!--
<div class="slider">
  <div class="slider__header">
    <div class="slider__copy">
    </div>
    <div class="slider__viewport">
      <ul class="slider__rail">
        <li class="slider__rail__item"><img src="http://lorempixel.com/777/548/technics" /></li><li class="slider__rail__item"><img src="http://lorempixel.com/777/548/people" /></li><li class="slider__rail__item"><img src="http://lorempixel.com/777/548/nature" /></li>
      </ul>
    </div>
  </div>
</div>
-->

<div class="centre">
  <div class="header">
    <div class="header__flex">
      <div class="header__copy">
        <h1>Why we are more interested in helmets from 1979 than lids of the future</h1>
        
        <div class="header__copy__footer">
          <p class="header__copy__author">By Dan Kempster | 2 March 2017</p>
          
          <div class="header__copy__footer__flexrow">
            <div class="header__copy__footer__comments">
              Comments (0)
            </div>
            <div class="header__copy__footer__social">
              SHARE
              <a href="http://twitter.com/intent/tweet?status=BELL+MOTO+REVIEW-%0D%0AWhy+we+are+more+interested+in+helmets+from+1979+than+lids+of+the+future%0D%0A%2Bhttps%3A%2F%2Fmag.sportsbikeshop.co.uk%2Fbell-moto-review%2F" target="_blank"><img src="https://mag.sportsbikeshop.co.uk/wp-content/plugins/SBSOfficial//images/twittericon.png" title="TwitterShare" alt="T"></a>
              <a href="http://www.facebook.com/share.php?u=https%3A%2F%2Fmag.sportsbikeshop.co.uk%2Fbell-moto-review%2F-%0D%0AWhy+we+are+more+interested+in+helmets+from+1979+than+lids+of+the+future%0D%0A&amp;title=BELL+MOTO+REVIEW" target="_blank"><img src="https://mag.sportsbikeshop.co.uk/wp-content/plugins/SBSOfficial//images/facebookicon.png" title="FacebookShare" alt="F"></a>
            </div>
          </div>
        </div>
      </div>
      <div class="header__slider">
        <ul class="slider__rail">
          <li class="slider__rail__item"><img src="http://lorempixel.com/777/548/technics" /></li><li class="slider__rail__item"><img src="http://lorempixel.com/777/548/people" /></li><li class="slider__rail__item"><img src="http://lorempixel.com/777/548/nature" /></li>
        </ul>
      </div>
    </div>
  </div>
</div>

mag-slider-as-header-wip.markdown

Mag : Slider as header [WIP]

A Pen by Dan Kempster on CodePen.

License.

script.js

$(document).ready(function() {
  $('.header__slider')
    .on('jcarousel:create jcarousel:reload', function() {
        var element = $(this),
            width = element.innerWidth();

        // This shows 1 item at a time.
        // Divide `width` to the number of items you want to display,
        // eg. `width = width / 3` to display 3 items at a time.
        element.jcarousel('items').css('width', width + 'px');
    })
    .jcarousel({
      list: '.slider__rail',
      items: '.slider__rail__item',
      wrap: 'both'
    })
    .jcarouselAutoscroll({
      interval: 3000,
      target: '+=1',
      autostart: true
    })
  ;
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcarousel/0.3.5/jquery.jcarousel.js"></script>

style.scss

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  
  font-family: proxima-nova, Tahoma, Arial, sans-serif;
}

.slider {  
  $itemWidth: 777px;
  $itemHeight: 548px;
  
  background: blue;
  overflow: hidden;
  width: 100%;
  
  &__header {
    @extend .centre;
    
    overflow: visible;
    
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: stretch;
    align-content: stretch;
  }
  
  &__copy {
    background: green;
    flex-basis: 40%;
    width: 40%;
  }
  
  &__copy,
  &__viewport {
    min-width:0; // fix FF ignoring flex-basis because it contains an too-large-image
  }
  
  &__viewport {
    border: 1px solid red;
    flex-basis: 60%;
    width: 60%;
    overflow: hidden;
    width: $itemWidth;
    height: $itemHeight;
  }
  
  &__rail {    
    background: aqua;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width:  ($itemWidth * 3) + 15px;
    // height: $itemHeight;
    
    &__item {
      display: inline-block;
      height: $itemHeight;
      width: $itemWidth;
    }
  }
}

/* Start header layout */
.centre {
  background: green;
  max-width: 1290px;
  min-width: 700px;
  margin: 0 auto;
}

.header {
  width: 100%;
  position: relative;
  
  background: yellow;
}

.header:before {
	content: " ";
	display: block;
	padding-top: 42.4803%;
}

.header__flex {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
  
  background: red;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: stretch;
  align-content: stretch;
}

.header__copy,
.header__image {
  align-self: stretch;
}

.header__copy {
    background: blue;
    flex-basis: 40%;
}

.header__slider,
.header__image {
    flex-basis: 60%;
    background: green;
 }

.header__slider {
  overflow: hidden;
}

.header__image__image {
    width: 100%;
    padding-bottom: 75%;
 }
/* End header layout */


.header__slider img,
.header__slider li {
    max-width: 100%;
    height: auto !important;
}
.header__slider img {
    display: block
}

/* Start: Header Copy { */
h1 {
  font-size: 2.938rem;
  font-weight: 400;
}
.header__copy {
  color: #ffffff;
  
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: stretch;
  justify-content: space-between;
  
  padding: 0 20px 20px;
}
.header__copy a {
  color: #ffffff;
  text-decoration: none;
}

.header__copy__footer {
  text-transform: uppercase;
}

.header__copy__footer__flexrow {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.header__copy__author {
  border-bottom: 1px solid #fff;
  padding-bottom: 10px;
}


/* End: Header Copy } */

@media only screen and (max-width: 1289px) {
  .centre {
    max-width: auto;
    min-width: auto;
    margin: 0;
  }
}

@media only screen and (max-width: 1200px) {
  html {
     font-size: 14px;
  }
}

@media only screen and (max-width: 1000px) {
  html {
     font-size: 13px;
  }
}

@media only screen and (max-width: 870px) {
  html {
     font-size: 12px;
  }
}

@media only screen and (max-width: 815px) {
  html {
     font-size: 11px;
  }
}

@media only screen and (max-width: 777px) {
  .header {
    position: initial;
  }
 
  .header:before {
  	display: none;
  }
  
  .header__flex {
      position: initial;
      top: auto;
      left: auto;
      bottom: auto;
      right: auto;
    
     flex-direction: column-reverse; 
  }
  
  .header__copy {
    flex-basis: auto;
  }

  .header__image {
    flex-basis: auto;
  }
 
  .header__image__image {
    width: auto;
    padding-bottom: 0;
    position: relative;
  }
}