Create a Stunning Swiper Carousel Web App

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:

🎯 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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/AdvancedLayoutGroup(["`Advanced Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css(("`CSS`")) -.-> css/ResponsiveandAdaptiveDesignGroup(["`Responsive and Adaptive Design`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css(("`CSS`")) -.-> css/CSSPreprocessorsGroup(["`CSS Preprocessors`"]) css(("`CSS`")) -.-> css/CodingStandardsandBestPracticesGroup(["`Coding Standards and Best Practices`"]) html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/SecurityGroup(["`Security`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicConceptsGroup -.-> css/properties("`Properties`") css/BasicConceptsGroup -.-> css/values("`Values`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/BasicStylingGroup -.-> css/fonts("`Fonts`") css/BasicStylingGroup -.-> css/text_styling("`Text Styling`") css/CoreLayoutGroup -.-> css/box_model("`Box Model`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/borders("`Borders`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") css/CoreLayoutGroup -.-> css/positioning("`Positioning`") css/AdvancedLayoutGroup -.-> css/flexbox("`Flexbox`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") css/IntermediateStylingGroup -.-> css/lists_and_tables("`Lists and Tables`") css/ResponsiveandAdaptiveDesignGroup -.-> css/mobile_first_design("`Mobile First Design`") css/DynamicStylingGroup -.-> css/animations("`Animations`") css/DynamicStylingGroup -.-> css/transitions("`Transitions`") css/DynamicStylingGroup -.-> css/transformations("`Transformations`") css/CSSPreprocessorsGroup -.-> css/mixins("`Mixins`") css/CSSPreprocessorsGroup -.-> css/nesting("`Nesting`") css/CodingStandardsandBestPracticesGroup -.-> css/comments("`Comments`") html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/charset("`Character Encoding`") html/BasicStructureGroup -.-> html/lang_decl("`Language Declaration`") html/BasicStructureGroup -.-> html/viewport("`Viewport Declaration`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") css/IntermediateStylingGroup -.-> css/pseudo_classes("`Pseudo-classes`") css/IntermediateStylingGroup -.-> css/pseudo_elements("`Pseudo-elements`") javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`") javascript/SecurityGroup -.-> javascript/web_sec("`Web Security Basics`") subgraph Lab Skills css/selectors -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} css/properties -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} css/values -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} css/colors -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} css/fonts -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} css/text_styling -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} css/box_model -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} css/margin_and_padding -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} css/borders -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} css/width_and_height -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} css/display_property -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} css/positioning -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} css/flexbox -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} css/backgrounds -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} css/lists_and_tables -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} css/mobile_first_design -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} css/animations -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} css/transitions -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} css/transformations -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} css/mixins -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} css/nesting -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} css/comments -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} html/basic_elems -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} html/charset -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} html/lang_decl -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} html/viewport -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} html/head_elems -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} html/text_head -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} html/para_br -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} html/lists_desc -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} html/layout -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} html/doc_flow -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} html/forms -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} css/pseudo_classes -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} css/pseudo_elements -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} javascript/variables -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} javascript/data_types -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} javascript/arith_ops -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} javascript/comp_ops -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} javascript/higher_funcs -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} javascript/web_sec -.-> lab-298959{{"`Create a Swiper Carousel Web App`"}} end

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>

Embed the Swiper Carousel Into the HTML

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>

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>

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;
}

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;
}

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%;
  }
}

Styling the Swiper Carousel

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;
}

Initializing the Swiper Carousel

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
  }
});

Running the App

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

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!

Create a Swiper Carousel Web App

Introduction

🎯 Tasks

🏆 Achievements

Skills Graph

Construct the HTML Skeleton

Embed the Swiper Carousel Into the HTML

Embed the Circles Into the HTML

Implementing Foundational CSS Resets

Styling the Main Section and Content Holder

Designing Animated Floating Circles

Styling the Swiper Carousel

Initializing the Swiper Carousel

Running the App

Summary

Other JavaScript Tutorials you may like