Signup Carousel with SwiperJs

Optimize the signup process on your website with a carousel powered by Swiper.js. Learn how to implement a dynamic signup carousel to guide users through the signup journey seamlessly.

Enhance your website's signup process with a beautiful Signup Carousel using SwiperJs, HTML, CSS, and JavaScript. This tutorial will guide you through copying the code snippet, linking the necessary CSS, and customizing the carousel to fit your unique style.

Step 1: Copy the Code Snippet

  • Begin by copying the provided HTML, CSS, and JavaScript code snippet for the Signup Carousel. Highlight the code, click the copy button, and paste it into your project files.

Step 2: Link CSS

  • Ensure that you link the Swiper CSS file in your HTML document. Add the following <link> tag in the <head> section to include the Swiper styles: 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<link rel="stylesheet" href="styles.css"> <!-- Your custom CSS file -->

Step 3: Add JavaScript

  • Include the Swiper JavaScript file at the end of your HTML document, before the closing </body> tag: 
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="script.js"></script> <!-- Your custom JavaScript file -->

Step 4: Customize and Make it Yours

  • Personalize the Signup Carousel to match your website's design. Modify the CSS styles and JavaScript settings to adjust the appearance, animations, and behaviors of the carousel. Experiment with different slide effects, transition durations, and pagination styles to create a unique and engaging user experience.

By following these steps, you can easily integrate and customize a Signup Carousel with SwiperJs on your website using HTML, CSS, and JavaScript. Tailor the carousel to fit your brand's style and create a visually appealing and interactive signup experience.

Code Explanation

HTML Code

Outer Container
<div class="card">
  • This is the main container for the form. The class card likely provides some styling to give it a card-like appearance.
Swiper Container
<div class="swiper">
  • This div is the container for the Swiper carousel. It has the class swiper, which Swiper uses to initialize the carousel.
Swiper Wrapper
<div class="swiper-wrapper">
  • This is the wrapper for all the slides. Swiper requires this element to contain all slide elements.
Swiper Slides

First Slide

<div class="swiper-slide">
    <img src="https://raw.githubusercontent.com/frontend-joe/es6-carousel/28f8f65dcf701ac0558487777f033915244f37e0/carousel-1/1.svg" />
    <h2>Create Account</h2>
    <h3>Tell us who you are</h3>
    <input type="text" placeholder="Your name" />
  </div>
  • Contains an image, two headings, and a text input for the user's name.

Second Slide

<div class="swiper-slide">
    <div class="image-wrapper">
      <img src="https://raw.githubusercontent.com/frontend-joe/es6-carousel/28f8f65dcf701ac0558487777f033915244f37e0/carousel-1/2.svg" />
    </div>
    <h2>Security Info</h2>
    <h3>Enter a strong password</h3>
    <input type="password" placeholder="Your password" />
  </div>
  • Contains an image within a wrapper, two headings, and a password input.

Third Slide

<div class="swiper-slide">
    <div class="image-wrapper">
      <img src="https://raw.githubusercontent.com/frontend-joe/es6-carousel/28f8f65dcf701ac0558487777f033915244f37e0/carousel-1/3.svg" />
    </div>
    <h2>Get Started</h2>
    <h3>You're all set and ready</h3>
    <button>Let's Go</button>
  </div>
  • Contains an image within a wrapper, two headings, and a button to submit the form.
Pagination
<div class="swiper-pagination"></div>
  • This div will be used by Swiper to display pagination bullets, allowing the user to see their progress through the slides.

CSS Code

HTML and Body
html,
body {
  height: 100%;
}
  • Ensures that the HTML and body elements take up the full height of the viewport.
* {
  box-sizing: border-box;
}
  • Sets the box-sizing property to border-box for all elements, which includes padding and border in the element's total width and height.
Body
body {
  margin: 0;
  display: grid;
  place-items: center;
  background: #3b395c;
  font-family: "Euclid Circular A";
  text-align: center;
}
  • Removes default margin.
  • Uses CSS Grid to center its children both horizontally and vertically.
  • Sets a background color, font, and text alignment.
Card Styles
.card {
  width: 360px;
  padding: 0;
  border-radius: 10px;
  background: #27263c;
  box-shadow: 0px -6.8px 9.8px rgba(0, 0, 0, 0.003),
    0px -10.8px 23.5px rgba(0, 0, 0, 0.008),
    0px -10.3px 44.3px rgba(0, 0, 0, 0.016),
    0px -1.5px 79.1px rgba(0, 0, 0, 0.026),
    0px 28.5px 147.9px rgba(0, 0, 0, 0.042),
    0px 174px 354px rgba(0, 0, 0, 0.07);
  margin: 20px 0;
}
  • Sets the width, padding, and border-radius of the card.
  • Sets the background color and a complex box-shadow for a 3D effect.
  • Adds vertical margin to the card.
Headings
h2 {
  color: #f9f9f9;
  margin: 0 0 6px;
  font-weight: 500;
}
  • Styles for h2 elements, setting the text color, margin, and font weight.
h3 {
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 24px;
  font-weight: 400;
  font-size: 14px;
  align-self: stretch;
}
  • Styles for h3 elements, setting the text color, margin, font weight, font size, and alignment.
Input and Button
input,
button {
  display: block;
  width: 240px;
  height: 48px;
  margin: 0 70px;
  border-radius: 24px;
  font-size: 16px;
  font-family: inherit;
  outline-color: #3181f8;
  text-align: center;
}
  • Shared styles for input and button elements, setting display properties, dimensions, margin, border radius, font size, font family, outline color, and text alignment.
input {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  padding: 12px;
}
  • Additional styles for input elements, setting border properties, background color, and padding.
input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
  • Styles for the placeholder text in input elements, setting the text color.
button {
  background: #864dfb;
  color: #f9f9f9;
  border: 0;
  cursor: pointer;
}
  • Additional styles for button elements, setting background color, text color, border properties, and cursor style.
Swiper Styles
.swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 0 130px;
}
  • Styles for .swiper-slide elements, using flexbox to center content and adding padding.
.swiper .swiper-pagination .swiper-pagination-bullet {
  box-shadow: none;
  background: #864dfb;
  width: 16px;
  height: 16px;
}
  • Styles for Swiper pagination bullets, removing box-shadow and setting background color, width, and height.
.swiper-horizontal .swiper-pagination-bullets.swiper-pagination-horizontal {
  top: auto;
  bottom: 56px;
}
  • Positions the Swiper pagination bullets at the bottom of the container.
.swiper-slide img {
  height: 170px;
  margin-bottom: 10px;
}
  • Styles for images within .swiper-slide elements, setting the height and bottom margin.

JavaScript Code

Swiper Initialization:
const swiper = new Swiper(".swiper", {
  • new Swiper(".swiper", {...}): This initializes a new Swiper instance targeting elements with the class .swiper.
Speed Setting:
speed: 500,
  • speed: 500: Sets the speed of transition between slides to 500 milliseconds (0.5 seconds). This determines how fast the slides move when navigating through the carousel.
Pagination Configuration:
pagination: {
  el: ".swiper-pagination",
  clickable: true,
},
  • pagination: Configures pagination for the Swiper instance.
  • el: ".swiper-pagination": Specifies the element that will serve as the container for pagination bullets. In this case, it's an element with the class .swiper-pagination.
  • clickable: true: Enables clickable pagination bullets. Users can click on these bullets to navigate directly to the corresponding slide.