Mastering Modern Web Design: Stripe Sessions Inspired Flex Carousel Tutorial with HTML, CSS, and JavaScript

C++ Mastery
Author - C++ Mastery
August 30, 2023
0

 Stripe Sessions style Flex Carousel Html Css JavaScript


Introduction:

🚀 Ready to elevate your web design skills? Join us in this comprehensive tutorial as we dive into creating a stunning Flex Carousel inspired by the sleek Stripe Sessions style. 🎨✨

In this engaging coding session, we'll walk you through step-by-step how to craft an impressive and interactive Flex Carousel using the power of HTML, CSS, and JavaScript. Whether you're a seasoned developer or just starting out, this tutorial is tailored to accommodate all skill levels.

    

🌐 Throughout this video, you'll learn:

  • Building a responsive structure using HTML5 to lay the foundation for our carousel.
  • Styling the carousel elements with CSS3 to achieve that professional Stripe Sessions look.
  • Implementing dynamic transitions and animations to make your carousel come to life.
  • Incorporating JavaScript to add interactivity and navigation functionality.
  • Optimizing your code for performance and responsiveness across devices.

🎥 Our presenter will guide you with clear explanations and practical examples, ensuring you grasp each concept thoroughly. By the end of this tutorial, you'll have the tools to create captivating carousels that are not only visually appealing but also functional.

🔗 Ready to code along? Watch now and embark on a journey to master the art of modern web design with this Stripe Sessions inspired Flex Carousel tutorial. Don't forget to like, comment, and subscribe to stay up-to-date with our latest coding guides and web development insights!

🔥 Let's revolutionize your web design skills together. Watch now and create web experiences that stand out! 💻🎉

Html Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
initial-scale=1.0">
    <title>Blogging Website</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <main id="app">
        <section class="carousel">
          <ul class="carousel__list">
            <li class="carousel__item" tabindex="0">
              <div class="carousel__box">
                <div class="carousel__image">
<img src="https://images.unsplash.com/photo-1507003211169-
0a1dd7228f2d?fit=crop&amp;h=720&amp;q=80" width="480"
height="720"/></div>
                <div class="carousel__contents">
                  <h2 class="user__name">Anthony Lee</h2>
                  <h3 class="user__title">Archetypal Professor of Recognition</h3>
                </div>
              </div>
            </li>
            <li class="carousel__item" tabindex="0">
              <div class="carousel__box">
                <div class="carousel__image">
<img src="https://images.unsplash.com/photo-1544005313-
94ddf0286df2?fit=crop&amp;h=720&amp;q=80" width="480"
height="720"/></div>
                <div class="carousel__contents">
                  <h2 class="user__name">Alicia Chevalier</h2>
                  <h3 class="user__title">Corporate Usability Analyst</h3>
                </div>
              </div>
            </li>
            <li class="carousel__item" tabindex="0">
              <div class="carousel__box">
                <div class="carousel__image">
<img src="https://images.unsplash.com/photo-1500648767791-
00dcc994a43e?fit=crop&amp;h=720&amp;q=80" width="480"
height="720"/></div>
                <div class="carousel__contents">
                  <h2 class="user__name">Nate Boucher</h2>
                  <h3 class="user__title">Customer Impact Officer</h3>
                </div>
              </div>
            </li>
            <li class="carousel__item" tabindex="0">
              <div class="carousel__box">
                <div class="carousel__image">
<img src="https://images.unsplash.com/photo-1614204424926-
196a80bf0be8?fit=crop&amp;h=720&amp;q=80" width="480"
height="720"/></div>
                <div class="carousel__contents">
                  <h2 class="user__name">Leah Harris</h2>
                  <h3 class="user__title">Designer and Bandit</h3>
                </div>
              </div>
            </li>
            <li class="carousel__item" tabindex="0" data-active="data-active">
              <div class="carousel__box">
                <div class="carousel__image">
<img src="https://images.unsplash.com/photo-1536766768598-
e09213fdcf22?fit=crop&amp;h=720&amp;q=80" width="480"
height="720"/></div>
                <div class="carousel__contents">
                  <h2 class="user__name">Angelina Laurent</h2>
                  <h3 class="user__title">Oracle for Inspiration</h3>
                </div>
              </div>
            </li>
            <li class="carousel__item" tabindex="0">
              <div class="carousel__box">
                <div class="carousel__image">
<img src="https://images.unsplash.com/photo-1494790108377-
be9c29b29330?fit=crop&amp;h=720&amp;q=80" width="480"
height="720"/></div>
                <div class="carousel__contents">
                  <h2 class="user__name">Gal Gadot</h2>
                  <h3 class="user__title">Acting Designer and Consultant</h3>
                </div>
              </div>
            </li>
            <li class="carousel__item" tabindex="0">
              <div class="carousel__box">
                <div class="carousel__image">
<img src="https://images.unsplash.com
/photo-1590086782792-42dd2350140d?fit=crop&amp;
h=720&amp;q=80" width="480" height="720"/></div>
                <div class="carousel__contents">
                  <h2 class="user__name">Albert Sørensen</h2>
                  <h3 class="user__title">Neural Big Shot of Anticipation</h3>
                </div>
              </div>
            </li>
            <li class="carousel__item" tabindex="0">
              <div class="carousel__box">
                <div class="carousel__image">
<img src="https://images.unsplash.com/
photo-1553514029-1318c9127859?fit=crop&amp;h=720&amp;q=80"
width="480" height="720"/></div>
                <div class="carousel__contents">
                  <h2 class="user__name">Candice Marchand</h2>
                  <h3 class="user__title">Mindful Realist of Motion Laws </h3>
                </div>
              </div>
            </li>
            <li class="carousel__item" tabindex="0">
              <div class="carousel__box">
                <div class="carousel__image">
<img src="https://images.unsplash.com/
photo-1596813362035-3edcff0c2487?fit=crop&amp;h=720&amp;
q=80" width="480" height="720"/></div>
                <div class="carousel__contents">
                  <h2 class="user__name">Jennifer Salazar</h2>
                  <h3 class="user__title">Design Habitué</h3>
                </div>
              </div>
            </li>
            <li class="carousel__item" tabindex="0">
              <div class="carousel__box">
                <div class="carousel__image">
<img src="https://images.unsplash.com/

photo-1552374196-c4e7ffc6e126?fit=crop&amp;h=720&amp;
q=80" width="480" height="720"/></div>
                <div class="carousel__contents">
                  <h2 class="user__name">Antonin Dufour</h2>
                  <h3 class="user__title">Human-Centered Designer</h3>
                </div>
              </div>
            </li>
            <li class="carousel__item" tabindex="0">
              <div class="carousel__box">
                <div class="carousel__image">
<img src="https://images.unsplash.com/
photo-1530785602389-07594beb8b73?fit=crop&amp;
h=720&amp;q=80" width="480" height="720"/></div>
                <div class="carousel__contents">
                  <h2 class="user__name">Melissa Simon</h2>
                  <h3 class="user__title">International Infrastructure Analyst</h3>
                </div>
              </div>
            </li>
            <li class="carousel__item" tabindex="0">
              <div class="carousel__box">
                <div class="carousel__image">
<img src="https://images.unsplash.com/
photo-1560250097-0b93528c311a?fit=crop&amp;h=720&amp;
q=80" width="480" height="720"/></div>
                <div class="carousel__contents">
                  <h2 class="user__name">Brandon Murray</h2>
                  <h3 class="user__title">Central Functionality VP</h3>
                </div>
              </div>
            </li>
          </ul>
          <div class="carousel__nav">
            <button class="prev">
              <svg width="24" height="24" viewBox="0 0 24 24">
                <path d="M9.586 4l-6.586 6.586a2 2 0 0 0 0 2.828l6.586
6.586a2 2 0 0 0 2.18 .434l.145 -.068a2 2 0 0 0 1.089 -1.78v-2.586h7a2
2 0 0 0 2 -2v-4l-.005 -.15a2 2 0 0 0 -1.995 -1.85l-7 -.001v-2.585a2 2
0 0 0 -3.414 -1.414z"></path>
              </svg><span>prev</span>
            </button>
            <button class="next"><span>next</span>
              <svg width="24" height="24" viewBox="0 0 24 24">
                <path d="M12.089 3.634a2 2 0 0 0 -1.089 1.78l-.001
2.586h-6.999a2 2 0 0 0 -2 2v4l.005 .15a2 2 0 0 0
1.995 1.85l6.999 -.001l.001 2.587a2 2 0 0 0 3.414
1.414l6.586 -6.586a2 2 0 0 0 0 -2.828l-6.586 -6.586a2
2 0 0 0 -2.18 -.434l-.145 .068z"></path>
              </svg>
            </button>
          </div>
        </section>

</body>
<script src="script.js"></script>

</html>

Css Code:

:root {
  --height: calc( 80vh - 50px );
  --width: 450px;
}

.carousel {
  display: grid;
  transform: translate3d(0,0,0.1px);
}

.carousel__list {
  display: flex;
  overflow: hidden;
  list-style: none;
  padding: 2em 0 3em;
  margin: 0;
  contain: layout;
  isolation: isolate;
}

.carousel__item {
  display: grid;
  position: relative;
  align-content: start;
  margin: 0 10px;
  padding: 0;
  flex: 1 1 10%;
  height: var(--height);
  overflow: hidden;
  background: rgba(255,255,255,0.2);
  border-radius: 16px;
  transform: translate3d(0,0,0.1px);
  box-shadow: rgba(0, 0, 0, 0.4) 0px 3px 15px 2px,
rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1)
0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
  contain: layout;
  isolation: isolate;
}

.carousel__item,
.carousel__item * {
  transition: all .6s cubic-bezier(.55,.24,.18,1);
  user-select: none;
}

.carousel__image,
.carousel__contents {
  width: var(--width);
  height: auto;
}

.carousel__item:hover {
  flex-basis: calc( var(--width) / 2 );
  transition: all 0.3s ease;
}

.carousel__item[data-active] {
  flex-basis: var(--width);
  flex-grow: 0;
}

@media screen and (max-width: 800px) {
  .carousel__item {
      flex-basis: 15%;
  }
}

@media screen and (max-width: 600px) {
 
  .carousel__item {
      flex-basis: 10%;
      margin: 0 5px;
      border-radius: 8px;
      font-size: 3vw;
  }
 
  .carousel__item[data-active] {
      flex-basis: 45%;
      flex-grow: 0;
  }

  .carousel__item:nth-child(3),
  .carousel__item:nth-child(7) {
      flex: 0 0 10px;
  }

  .carousel__item:nth-child(2),
  .carousel__item:nth-child(8) {
      flex: 0 0 5px;
      transform: translateX(-50px);
  }

  .carousel__item:nth-child(8) {
      transform: translateX(50px);
  }

  .carousel__item:nth-child( 1 ),
  .carousel__item:nth-child( n + 9 ) {
      flex: 0 0 0px;
      margin: 0;
      box-shadow: none;
      opacity: 0!important;
  }

  .carousel__item:not(:nth-child( n + 5 )) img,
  .carousel__item:nth-child( n + 7 ) img {
      opacity: 0.8;
  }

  .carousel__item:not(:nth-child( n + 4 )) *,
  .carousel__item:nth-child( n + 7 ) * {
      opacity: 0!important;
  }
 
}

@media screen and (min-width: 600px) {

  .carousel__item:nth-child(3),
  .carousel__item:nth-child(10) {
      flex: 0 0 10px;
  }

  .carousel__item:nth-child(2),
  .carousel__item:nth-child(11) {
      flex: 0 0 5px;
      transform: translateX(-50px);
  }

  .carousel__item:nth-child(11) {
      transform: translateX(50px);
  }

  .carousel__item:nth-child( 1 ),
  .carousel__item:nth-child( n + 12 ) {
      flex: 0 0 0px;
      margin: 0;
      box-shadow: none;
      opacity: 0!important;
  }

  .carousel__item:not(:nth-child( n + 5 )) img,
  .carousel__item:nth-child( n + 9 ) img {
      opacity: 0.8;
  }

  .carousel__item:not(:nth-child( n + 4 )) *,
  .carousel__item:nth-child( n + 10 ) * {
      opacity: 0!important;
  }
 
}

.carousel__item img {
  display: block;
  position: absolute;
  width: var(--width);
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  aspect-ratio: 2/3;
  object-fit: cover;
  filter: saturate(0.2) contrast(0.75) brightness(1.1);
}

.carousel__item::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 1;
  background: linear-gradient(160deg,
rgba(2,0,36,0) 40%, rgba(118,221,136,.5) 70%,
rgba(0,255,246,.6) 100%);
  transition: all .66s cubic-bezier(.55,.24,.18,1);
}

.carousel__item[data-active]::after {
  transform: translateY(100%);
}

.carousel__item[data-active],
.carousel__item[data-active] * {
  opacity: 1;
  filter: none;
}

.carousel__contents {
  display: flex;
  flex-direction: column-reverse;
  justify-content: start;
  min-height: 200px;
  padding: 1em;
  z-index: 2;
  background-image: radial-gradient( ellipse at 0px 0px,
rgba(0,0,0,0.4) 20%, transparent 50% );
  background-size: 170% 200px;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
}

.carousel__contents .user__name {
  color: #e8eff4;
  font-size: 1.75em;
  font-weight: 600;
  letter-spacing: .8px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}

.carousel__contents .user__title {
  font-family: lexend;
  font-size: .875em;
  letter-spacing: 1.25px;
  font-weight: 500;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient( 270deg,
rgb(67, 255, 0), rgb(0, 255, 247) );
  background-clip: text;
  -webkit-background-clip: text;
  opacity: 0.85;
  margin-bottom: 0.5em;
}

.carousel__contents .user__title,
.carousel__contents .user__name {
  margin: 0;
  line-height: 1.1;
  opacity: 0;
  transform: translateX(-200px);
  transition-duration: 1s;
  max-width: 18em;
}

@media screen and (max-width: 800px) {
  .carousel__item img {
      width: calc(var(--width) * .5);
  }
  .carousel__contents {
      transform: translateX(-100%) rotate(90deg);
      transform-origin: bottom right;
      align-items: end;
      justify-content: end;
      background-image: radial-gradient( ellipse at 100% 100%,
rgba(0, 0, 0,.4) 0%, transparent 50% );
      background-position: -100% 100%;
      flex-direction: column;
      position: absolute;
      bottom: 0;
      left: 0;
      text-align: right;
  }
  [data-active] .carousel__contents {
      background-position: 100% 100%;
  }
  .carousel__contents .user__title,
  .carousel__contents .user__name {
      max-width: 70vh;
      transform: translateX(200px);
  }
}

[data-active] .carousel__contents * {
  transform: translateX(0px);
  transition-duration: 0.66s;
  opacity: 1;
}
[data-active] .carousel__contents .user__name {
  transition-delay: 0.1s;
}
[data-active] .carousel__contents .user__title {
  opacity: 0.85;
  transition-delay: 0.05s;
}

.carousel__nav {
  padding: 1em;
  justify-self: end;
  grid-row: 1;
  display: flex;
  justify-content: space-between;
  gap: 1em;
}

button {
  display: flex;
  gap: .5em;
  padding: 0.5em 1.5em;
}

button span,
button svg {
  margin: 0;
  padding: 0;
  fill: none;
}

button path {
  fill: currentColor;
}

body, html {
  padding: 0;
  align-items: start;
}

Javascript Code:

const d = document;
const $q = d.querySelectorAll.bind(d);
const $g = d.querySelector.bind(d);
const $prev = $g(".prev");
const $next = $g(".next");
const $list = $g(".carousel__list");
let auto;
let pauser;

const getActiveIndex = () => {
    const $active = $g("[data-active]");
    return getSlideIndex($active);
}

const getSlideIndex = ($slide) => {
    return [...$q(".carousel__item")].indexOf( $slide );
}

const prevSlide = () => {
    const index = getActiveIndex();
    const $slides = $q(".carousel__item");
    const $last = $slides[$slides.length-1];
    $last.remove();
    $list.prepend($last);
    activateSlide( $q(".carousel__item")[index] );
}
const nextSlide = () => {
    const index = getActiveIndex();
    const $slides = $q(".carousel__item");
    const $first = $slides[0];
    $first.remove();
    $list.append($first);
    activateSlide( $q(".carousel__item")[index] );
}

const chooseSlide = (e) => {
    const max = (window.matchMedia("screen and
( max-width: 600px)").matches) ? 5 : 8;
    const $slide = e.target.closest( ".carousel__item" );
    const index = getSlideIndex( $slide );
    if ( index < 3 || index > max ) return;
    if ( index === max ) nextSlide();
    if ( index === 3 ) prevSlide();
    activateSlide($slide);
}

const activateSlide = ($slide) => {
    if (!$slide) return;
    const $slides = $q(".carousel__item");
    $slides.forEach(el => el.removeAttribute('data-active'));
    $slide.setAttribute( 'data-active', true );
    $slide.focus();
}

const autoSlide = () => {
    nextSlide();
}

const pauseAuto = () => {
    clearInterval( auto );
    clearTimeout( pauser );
}

const handleNextClick = (e) => {
    pauseAuto();
    nextSlide(e);
}

const handlePrevClick = (e) => {
    pauseAuto();
    prevSlide(e);
}

const handleSlideClick = (e) => {
    pauseAuto();
    chooseSlide(e);
}

const handleSlideKey = (e) => {
    switch(e.keyCode) {
        case 37:
        case 65:
            handlePrevClick();
            break;
        case 39:
        case 68:
            handleNextClick();
            break;
    }
}

const startAuto = () => {
    auto = setInterval( autoSlide, 3000 );
}

startAuto();

$next.addEventListener( "click", handleNextClick );
$prev.addEventListener( "click", handlePrevClick );
$list.addEventListener( "focusin", handleSlideClick );
$list.addEventListener( "keyup", handleSlideKey );















Tags

You may like these posts

Show more

Post a Comment

0Comments
Post a Comment (0)
Share to other apps
Copy Post Link