Carousel modal

by Laura Kishimoto

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link rel="stylesheet" href="https://personal.rbs.co.uk/etc/designs/responsive/clientlib_base_rbs_personal.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<div class="tour">
  <div class="tour__content">
    <div class="tour__carousel" data-slick>
     <div>
       <h2>Slide 1 Heading</h2>
       <p>Ne’ermind soft lad th’art nesh thee gi’ o’er ah’ll box thi ears shurrup. Tha knows wacken thi sen up cack-handed nay lad gi’ o’er ne’ermind. Ee by gum. Tintintin ah’ll box thi ears aye tha what ne’ermind big girl’s blouse.</p>
       <p>Nay lad tintintin face like a slapped arse what’s that when it’s at ooam. Michael palin ah’ll gi’ thee a thick ear.</p>
       <p>By ‘eck that’s champion mardy bum mardy bum t’foot o’ our stairs appens as maybe. Will ‘e ‘eckerslike. Big girl’s blouse nay lad tha knows.</p>

      <h3>Another heading </h3>
      <p>Eeh ah’ll gi’ thee a thick ear. Where there’s muck there’s brass. Shurrup where there’s muck there’s brass. Aye. T’foot o’ our stairs cack-handed where’s tha bin. Soft lad.</p>
     </div>  
     <div>
       <h2>Slide 2 Heading</h2>
       <p>By ‘eck that’s champion mardy bum mardy bum t’foot o’ our stairs appens as maybe. Will ‘e ‘eckerslike. Big girl’s blouse nay lad tha knows.</p>

      <h3>Another heading </h3>
      <p>Aye. T’foot o’ our stairs cack-handed where’s tha bin.</p>
     </div>  
     <div>
       <h2>Slide 3 Heading</h2>
       <p>Tintintin ah’ll box thi ears aye tha what ne’ermind big girl’s blouse.</p>
      <p>Eeh ah’ll gi’ thee a thick ear. Where there’s muck there’s brass. Shurrup where there’s muck there’s brass. Aye. T’foot o’...

SCSS

$space: 4rem;
$overlay-background: rgba(0, 0, 0, 0.2);
$tour-width: 600px;
$tour-height: 50vh;


.tour {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: $space;
  background-color: $overlay-background;
  
  &__content {
    margin: auto;
    padding: $space;
    width: $tour-width;
    max-width: 100%;
    min-height: $tour-height;
    max-height: 100%;
    background-color: white;
  }
  
  // carousel overrides
  .slick-slider {
    max-height: 100%;
  }

  .slick-arrow:before {
    color: red;
  }
  
  .slick-dots {
    bottom: -$space;
    
    li button:before {
      font-size: 1rem;
    }
  }
}

body {
  box-sizing: border-box;
  background-color: teal;
}

*, *:before, *:after {
  box-sizing: inherit;
}

JavaScript

$('[data-slick]').slick({
  dots: true,
  infinite: false,
  speed: 200,
  fade: true
});