Big Slider

Big Slider with case study: image or video modal

by 25058214

HTML

<script src="https://npmcdn.com/[email protected]/dist/flickity.pkgd.js"></script>
<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/flickity.css">
<div class="fn_big">
<div class="big__slider"
  data-flickity='{"wrapAround": true, "cellAlign": "left","pageDots": false } '>
  <div class="big__slider__content">
    <div class="big__slider__wrapper">
      <div class="big__slider__media">
<a class="big__slider__thumbnail" href="/105/media/us/education/2020/87d87e8e-4606-4f70-bbbe-95612538b3f7/films/duke/education-duke-tpl-cc-us-2020_1280x720h.mp4" aria-label="Ver el video de la Universidad de Duke">
					<span class="thumbnail-scrim"></span>
					<span class="thumbnail-button" aria-label="Play"></span>
				</a>
      </div>
      <div class="big__slider__content">
      <div class="big__slider__content-ele">
        <div class="big__slider__content-tit">
        <h4 class="big__slider__content-tit-ha">Lorem ipsum dolor sit</h4>
        <h3 class="big__slider__content-tit-hb">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
        </div>
        <div class="big__slider__content-tex">
        <p class="big__slider__content-tex-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget mauris pharetra et ultrices neque ornare aenean euismod elementum. Phasellus egestas tellus rutrum tellus pellentesque.</p>
        </div>
      </div>
      </div>      
    </div>
  </div>
  <div class="big__slider__content">
    <div class="big__slider__wrapper">
      <div class="big__slider__media">
<a class="big__slider__thumbnail" href="/105/media/us/education/2020/87d87e8e-4606-4f70-bbbe-95612538b3f7/films/duke/education-duke-tpl-cc-us-2020_1280x720h.mp4" aria-label="Ver el video de la Universidad de Duke">
					<span class="thumbnail-scrim"></span>
					<span class="thumbnail-button" aria-label="Play"></span>
				</a>
      </div>
      <div class="big__slider__content">
     ...

CSS

.big__slider{
  padding:20px 80px;
}
.big__slider__content{
    scroll-snap-align: start;
    width: 95%;
    margin-right:40px;
}
.big__slider__media{
  position:relative;
  height:500px;
}
.big__slider__thumbnail{
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    z-index: 1;
}
.big__slider__thumbnail{
  background-image:url(https://images.pexels.com/photos/2041396/pexels-photo-2041396.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  height:550px;
}