LabEx
Log In Join For Free

Create a Swiper Carousel Web App

JavaScriptJavaScriptBeginner
Practice Now

Introduction

In this project, you'll learn how to create a Swiper carousel web app that features a visually appealing carousel layout with cosmic-themed content. The app will allow users to navigate through different slides and view cards with interesting facts about the universe.

Here is a preview of the Swiper carousel:

project-swiper

🎯 Tasks

In this project, you will learn:

  • How to construct the HTML skeleton for the web app
  • How to embed the Swiper carousel into the HTML structure
  • How to add circles and animated floating circles to the background of the app
  • How to implement foundational CSS resets to ensure consistent styling across browsers
  • How to style the main section and content holder of the app
  • How to design and animate floating circles in the background
  • How to style the Swiper carousel and its components
  • How to initialize the Swiper carousel using JavaScript

🏆 Achievements

After completing this project, you will be able to:

  • Create a visually appealing Swiper carousel web app with cosmic-themed content
  • Implement HTML structure and layout for the web app
  • Apply CSS styling and animations to enhance the user interface
  • Utilize JavaScript to initialize and configure the Swiper carousel

Construct the HTML Skeleton

Requirement:

  • Embed essential meta tags to define character set and viewport settings.
  • Link to external stylesheets and scripts.

Functionality:

  • Generate a foundational HTML layout to build upon.

Steps:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Swiper Carousel</title>
    <link rel="stylesheet" href="./style.css" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
    />
  </head>
  <body>
    <!-- partial -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.5/swiper-bundle.min.js"></script>
    <!-- We'll slot in our Swiper carousel structure next -->
    <!-- Scripts: Swiper library and our custom logic -->
    <script src="./script.js"></script>
  </body>
</html>
✨ Check Solution and Practice

Requirement:

  • A structural place within the HTML to house our carousel's content.
  • Pagination elements for navigation.

Functionality:

  • Embed a carousel layout that can be styled and made interactive.

Steps:

Append this within the <body> tag in index.html:

<section>
  <div class="content">
    <div class="swiper">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="card">
              <h1>Cosmic Ballet</h1>
              <p>
                The universe is not just a vast expanse of darkness; it's a
                dynamic stage of cosmic ballet. Galaxies dance, stars are born
                and die, and black holes roam, all governed by the timeless
                rhythm of gravitational forces.
              </p>
              <button class="read-more">Read More</button>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="card">
              <h1>Dark Secrets</h1>
              <p>
                For all its luminous stars and galaxies, the universe hides more
                than it reveals. Dark matter and dark energy, invisible and
                mysterious, make up 95% of the universe, holding the cosmos
                together and driving its expansion.
              </p>
              <button class="read-more">Read More</button>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="card">
              <h1>Time's Relativity</h1>
              <p>
                In the vast cosmos, time is relative. Near massive objects like
                black holes, time seems to slow down. What feels like minutes
                there could equate to years elsewhere, making the universe a
                theater of time's elasticity.
              </p>
              <button class="read-more">Read More</button>
            </div>
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</section>
✨ Check Solution and Practice

Embed the Circles Into the HTML

Requirement:

  • To get lots of round bubbles, add <ul> and <li>.

Functionality:

  • Many bubbles of different sizes are animated in the background of the page.

Steps:

<section>
  <!--swiper content...-->
  <ul class="circles">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</section>
✨ Check Solution and Practice

Implementing Foundational CSS Resets

Requirement:

  • Achieve a consistent look across different browsers.
  • Reset browser-default margins, padding, and box dimensions.

Functionality:

  • Nullify any browser-default styles to ensure our styling remains consistent across various browsers.

Steps:

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
✨ Check Solution and Practice

Styling the Main Section and Content Holder

Requirement:

  • A main section that occupies the entire viewport.
  • A visually appealing content holder with specific dimensions and styling.

Functionality:

  • Style the main section and content holder to make them both center-aligned and give them a cosmic-themed appearance.

Steps:

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

.content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  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%);
  z-index: 10;
}
✨ Check Solution and Practice

Designing Animated Floating Circles

Requirement:

  • A dynamic background for the main section.
  • Floating circles that move and change appearance over time.

Functionality:

  • Enrich the background with animated, gradient circles that levitate, rotate, and change opacity to enhance user engagement.

Steps:

.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: #0f75c3;
  background-image: linear-gradient(
    225deg,
    #67d0f6 0%,
    #a7ec67 50%,
    #c27ee4 100%
  );
  animation: animate 10s linear infinite;
  bottom: -150px;
}

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

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

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

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

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

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

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

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

.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: 40px;
  height: 40px;
  animation-delay: 0s;
  animation-duration: 10s;
}

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

  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 100%;
  }
}
✨ Check Solution and Practice

Requirement:

  • A user-friendly carousel structure.
  • Stylish slides and content cards that are easy to navigate.

Functionality:

  • Embellish the Swiper carousel and its components to ensure they are responsive, intuitive, and aesthetically pleasing.

Steps:

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper {
  width: 100%;
  /* Adjusted to occupy the full width of its container */
  height: 600px;
  /* Adjusted height */
  padding: 50px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-container {
  width: 90%;
  /* Adjusted to occupy most of its container's width */
  height: 80%;
  /* Adjusted to occupy most of its container's height */
}

.card {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 100%;
  /* Adjusted to occupy full width */
  height: 100%;
  /* Adjusted to occupy full height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Center the card content vertically */
}

.card h1 {
  margin-bottom: 20px;
  font-size: 1.5em;
  color: #fff;
}

.card p {
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.8);
}

.read-more {
  background-color: #6bd6ee;
  font-size: 20px;
  border: none;
  border-radius: 5px;
  color: #fff;
  padding: 15px 15px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.read-more:hover {
  background-color: #9bd92f;
}
✨ Check Solution and Practice

Requirement:

  • A carousel that responds to user input.
  • Smooth transitions between slides.
  • Functional pagination for navigation.

Functionality:

  • Utilize JavaScript to breathe life into the Swiper carousel, enabling dynamic transitions and navigation between content cards.

Steps:

const swiper = new Swiper(".swiper-container", {
  speed: 400,
  spaceBetween: 100,
  pagination: {
    el: ".swiper-pagination",
    clickable: true
  }
});
✨ Check Solution and Practice

Running the App

  • Open index.html in a web browser.
    open web
  • Test the application by adding expenses and verifying that the expense list and summary update correctly.
  • The effect of the page is as follows:
    effect
✨ Check Solution and Practice

Summary

Congratulations! You've now forged a splendid Swiper carousel from scratch. This project walked you through the steps of setting up essential files, chiseling an HTML structure, weaving in detailed CSS styles, sprinkling in JavaScript magic, and finally launching the project. Feel free to expand on this foundation by incorporating more slides, tailoring the design, or infusing additional Swiper features. Keep shining and happy coding!

Other JavaScript Tutorials you may like

Related JavaScript Courses
Quick Start with JavaScript

Quick Start with JavaScript

JavaScript
Beginner
Build an VSCode Extension With ChatGPT

Build an VSCode Extension With ChatGPT

GitJavaScriptTypeScript
Beginner
Build a Tic-Tac-Toe Web App

Build a Tic-Tac-Toe Web App

HTMLCSSJavaScript
Beginner

We use cookies for a number of reasons, such as keeping the website reliable and secure, to improve your experience on our website and to see how you interact with it. By accepting, you agree to our use of such cookies. Privacy Policy