How to create a Sliding Cards using HTML, CSS & JS

Introduction

In this detailed blog post, we’ll explore the creation of a captivating “Movie Night” section for your website. By combining HTML, CSS, and a touch of JavaScript with the popular Swiper library, we’ll design an immersive experience that seamlessly integrates animated backgrounds and a dynamic movie showcase. Let’s delve into the code, dissect each component, and understand the magic behind this visually stunning section.

HTML Structure

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Amazing Project #1</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.5/swiper-bundle.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
    />
  </head>
  <body>
    <section class="main-section">
      <div class="cards">
        <div class="information">
          <p>
            Join us for a fantastic
            <span class="movie-night">movie night</span> filled with popcorn,
            laughter, and great company! Whether you're a fan of thrilling
            action, heartwarming dramas, or side-splitting comedies, we've got a
            film lineup to cater to all tastes. Save the date and bring your
            favorite snacks to make it a memorable evening.
          </p>
          <button class="btn">Join</button>
        </div>
        <div class="swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <span>8.5</span>
              <h2>The Queen's Gambit</h2>
            </div>

            <div class="swiper-slide">
              <span>9.5</span>
              <h2>Breaking Bad</h2>
            </div>

            <div class="swiper-slide">
              <span>8.1</span>
              <h2>Wednesday</h2>
            </div>

            <div class="swiper-slide">
              <span>8.7</span>
              <h2>Stranger Things</h2>
            </div>

            <div class="swiper-slide">
              <span>8.6</span>
              <h2>Anne with an E</h2>
            </div>

            <div class="swiper-slide">
              <span>8.9</span>
              <h2>Friends</h2>
            </div>

            <div class="swiper-slide">
              <span>8.6</span>
              <h2>The Crown</h2>
            </div>

            <div class="swiper-slide">
              <span>8.7</span>
              <h2>House M.D.</h2>
            </div>

            <div class="swiper-slide">
              <span>9.2</span>
              <h2>Game of Thrones</h2>
            </div>
          </div>
        </div>
      </div>

      <ul class="circle-back">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </section>
  </body>
  <script>
</html>

HTML

HTML Breakdown:

Main Section: The container for the entire Movie Night section.
Cards Container: Houses the information block and the Swiper container.
Information Block: Contains a brief invitation to the movie night and a “Join” button.
Movie Night Span: A span element with the class “movie-night” for styling.
Join Button: A button with the class “btn” to prompt user interaction.
Swiper Container: Contains the Swiper wrapper for movie slides.
Swiper Wrapper: Holds individual slides for each movie.
Individual Movie Slides: Each slide consists of a rating and the name of a movie.
Animated Background Circles: A list of circles used for the animated background.

CSS Styling

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700;800&display=swap');

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Comfortaa', cursive;
}

.main-section {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #262626;
  min-height: 100vh;
  overflow: hidden;
}

.cards {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center; 
  gap: 30px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  backdrop-filter: blur(30px);
  border-radius: 20px;
  width: min(900px, 100%);
  box-shadow: 0 0.5px 0 1px rgba(255, 255, 255, 0.23) inset, 0 1px 0 0 rgba(255, 255, 255, 0.66) inset, 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 10;
}

.information {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 450px;
  padding: 0 35px;
  text-align: justify;
}

.information p{
  color: #fff;
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: 20px;
  line-height: 1.5;
}

.movie-night {
  background: linear-gradient(225deg, #ff3cac 0%, #784ba0 50%, #2b86c5 100%);
}

.btn {
  display: block;
  padding: 10px 40px;
  margin: 10px auto;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 4px;
  outline: none;
  text-decoration: none;
  color: #784ba0;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
}

.btn:hover, .btn:focus, .btn:active, .btn:visited {
    transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
    animation: gelatine 0.5s 1;
}

@keyframes gelatine {
  
  0%, 100% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  75% {
    transform: scale(0.95, 1.05);
  }
}

/* SWIPER */

.swiper {
  width: 250px;
  height: 450px;
  padding: 50px 0;
}

.swiper-slide {
  position: relative;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.swiper-slide span {
  position: absolute;
  top: 0;
  right: 0;
  color: #fff;
  padding: 7px 18px;
  margin: 10px;
  border-radius: 20px;
  letter-spacing: 2px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.095);
  box-shadow: inset 2px -2px 20px rgba(214, 214, 214, 0.2), inset -3px 3px 3px rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(74px);
}

.swiper-slide h2 {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.4;
  margin: 0 0 20px 20px;
}

.swiper-slide:nth-child(1n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url(https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/2929f534-3bc3-4cbd-b84c-80df863d5a38)
      no-repeat 50% 50% / cover;
}

.swiper-slide:nth-child(2n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/b6f5eb64-887c-43b1-aaba-d52a4c59a379")
      no-repeat 50% 50% / cover;
}

.swiper-slide:nth-child(3n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/e906353b-fde0-4518-9a03-16545c1161bd")
      no-repeat 50% 0% / cover;
}

.swiper-slide:nth-child(4n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/fc21e481-e28a-41a8-9db3-3b62c1ddc17e")
      no-repeat 50% 50% / cover;
}

.swiper-slide:nth-child(5n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/6b6ad966-79e1-4d3c-8f92-566d0fee8082")
      no-repeat 50% 50% / cover;
}

.swiper-slide:nth-child(6n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/2ad44f5d-2215-4416-9c9b-2bae3be51a67")
      no-repeat 50% 50% / cover;
}

.swiper-slide:nth-child(7n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/aa8fe914-741f-4bf4-ad4a-24f19d1f4178")
      no-repeat 50% 50% / cover;
}

.swiper-slide:nth-child(8n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/d5f10b4f-7d34-45bd-bb5f-5f1530c2ac1c")
      no-repeat 50% 0% / cover;
}

.swiper-slide:nth-child(9n) {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/7cbac263-7c55-4428-908e-31018dc1bce3")
      no-repeat 50% 50% / cover;
}

/* ANIMATED BACKGROUND */

.circles{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.circles li{
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background-color: #ff3cac;
  background-image: linear-gradient(225deg, #ff3cac 0%, #784ba0 50%, #2b86c5 100%);
  animation: animate 25s linear infinite;
  bottom: -150px;
}

.circles li:nth-child(1){
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}

.circles li:nth-child(2){
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.circles li:nth-child(3){
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}

.circles li:nth-child(4){
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}

.circles li:nth-child(5){
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.circles li:nth-child(6){
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}

.circles li:nth-child(7){
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}

.circles li:nth-child(8){
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}

.circles li:nth-child(9){
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}

.circles li:nth-child(10){
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
}

@keyframes animate {

  0%{
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0;
  }

  100%{
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }
}

CSS

CSS Highlights:

Global Styles: Sets global styles, including font-family and box-sizing.
Main Section Styles: Defines styles for the main section, including positioning, background color, and overflow properties.
Cards Container Styles: Styles for the container holding information and the Swiper, including layout, background, and shadow.
Information Block Styles: Styles for the information block, text color, and padding.
Movie Night Span Styles: Styling for the movie night span, applying a gradient background.
Join Button Styles: Styles for the “Join” button, defining its appearance, color, and hover effects.
Swiper Styles: Styles for the Swiper container, setting its dimensions.
Swiper Slide Styles: Styles for individual movie slides, including background images, box-shadow, and positioning.
Animated Background Styles: Styles for the animated circles, including their position, size, and animation properties.

JavaScript Interactivity

var swiper = new Swiper(".swiper", {
    effect: "cards",
    grabCursor: true,
    initialSlide: 2,
    speed: 500,
    loop: true,
    rotate: true,
    mousewheel: {
    invert: false,
  },
});

JavaScript

JavaScript Breakdown:

Swiper Initialization: Initializes Swiper using the provided configuration, making the movie slides interactive and visually appealing.
Swiper Configuration Options: Specifies options like the effect, initial slide, speed, loop, and mousewheel behavior for the Swiper instance.

Conclusion

By combining HTML, CSS, and JavaScript, we’ve created a visually stunning Movie Night section for your website. This engaging experience, enhanced by the Swiper library, brings dynamic movie showcases to life. Customize and integrate this code into your project, and let your creativity shine.

Enhance user interaction, experiment with variations, and create a memorable movie night experience on your website.

Happy coding!