DEV Community

Cover image for Responsive slider
Frank Wisniewski
Frank Wisniewski

Posted on

5 3

Responsive slider

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

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more