DEV Community

Cover image for Responsive slider
Frank Wisniewski
Frank Wisniewski

Posted on

Responsive slider

#html #css

solved with flex-box 

<!DOCTYPE html>
<html lang=de>
  <meta charset=UTF-8>
  <title>Document</title>
  <style>
    body{
      font-family:system-ui, sans-serif,sans-serif; 
    }
    .fhwslider {
      width: 90%;
      margin:auto;
      position: relative;
      overflow: hidden;
      background: black;
      display: flex;
      flex-direction: row;  
    }
    .fhwslider h2, .fhwslider p{
      color:white;
      padding: 0em 10% 0 10%;
      text-align: center;
    }
    .fhwslider div {  
      min-width:100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
      transform: translateX(-100%);
      animation: fhwsliderani 24s ease-in-out 0s infinite;
    }
    .fhwslider > div:nth-child(1) {
      animation-delay: -4s;
    }
    .fhwslider > div:nth-child(2) {
      animation-delay: 4s;
      margin-left:-100%;
    }
    .fhwslider > div:nth-child(3) {
      animation-delay: 12s;
      margin-left:-100%;
    }
    @keyframes fhwsliderani {
      8.33333% {transform: translateX(0);}
      33.3333337% {transform: translateX(0);}
      41.6666667% {transform: translateX(100%);}
      100% {transform: translateX(100%);}
    }
  </style>
  <h1>responsive Slider</h1>  
  <h2>solved with flexbox</h2>  
  <div class=fhwslider>
    <div>
      <h2>Lorem1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.
    </div>
    <div>
      <h2>Lorem 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.
    </div>
    <div>
      <h2>Lorem 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.
    </div>
</div>
<p>Lorem ipsum dolor sit amet.
Enter fullscreen mode Exit fullscreen mode

Top comments (0)