Swiper.js tutorial. Practical application using Ionic framework

Today I want to show how to use Swiper.js in a practical way to create modern and user-friendly interfaces. We start with a basic structure of a regular Ionic page, including the ion-header with a toolbar, and in the content, we add the Swiper component. The HTML file would look like this:

<ion-header>
  <ion-toolbar>
    <ion-title>Profile</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <swiper-container slides-per-view="auto">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
  </swiper-container>
</ion-content>

Let’s add some styles to each Swiper slide. Setting the height and width is enough, but we can also add color, border-radius, etc.

swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 18px;
  width: 140px;
  height: 200px;
  border-radius: 20px;
  margin-left: 20px;
  background-color: #007AFD;
  box-shadow: 10px 5px 20px rgba(0, 0, 0, 0.08);
}

Now I want each slider block to have a title bar with buttons. To be able to reuse this structure later, I can enclose the component and the toolbar inside a div.

<div>
    <ion-toolbar>
      <ion-title>Latest post</ion-title>
      <ion-buttons slot="end">
        <ion-button>View All</ion-button>
      </ion-buttons>
    </ion-toolbar>
    
    <swiper-container class="posts" slides-per-view="auto">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
    </swiper-container>
  </div>

It would look like this:

So far, so good, but if I reach the last element, there is no margin with respect to the content. Let’s fix that.

div {
  padding: 10px 0 10px 0;

  swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 18px;
    width: 140px;
    height: 200px;
    border-radius: 20px;
    margin-left: 20px;
    background-color: #007AFD;
    box-shadow: 10px 5px 20px rgba(0, 0, 0, 0.08);
  }
  
  swiper-slide:last-child {
    margin-right: 20px;
  }
}

Simply add a 20px right margin to the last child, and it looks perfect.

Now I want to add another row below, and I just need to paste the div content as many times as needed. However, I want it to look different—for example, making the sliders in the bottom row larger. The HTML code would look like this:

<div>
    <ion-toolbar>
      <ion-title>Latest post</ion-title>
      <ion-buttons slot="end">
        <ion-button>View All</ion-button>
      </ion-buttons>
    </ion-toolbar>
    
    <swiper-container class="posts" slides-per-view="auto">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
    </swiper-container>
  </div>

  <div>
    <ion-toolbar>
      <ion-title>Latest videos</ion-title>
      <ion-buttons slot="end">
        <ion-button>View All</ion-button>
      </ion-buttons>
    </ion-toolbar>
    
    <swiper-container class="videos" slides-per-view="auto">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
    </swiper-container>
  </div>

I will assign each container a class as needed, and I want the child elements—in this case, sliders—to have different widths. However, the height will be the same for all, so I will set it in the parent class. The CSS code would look like this:

div {
  padding: 10px 0 10px 0;

  swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    text-align: center;
    font-size: 18px;
    border-radius: 20px;
    margin-left: 20px;
    background-color: #007AFD;
    box-shadow: 10px 5px 20px rgba(0, 0, 0, 0.08);
  }

  .posts swiper-slide {
    width: 140px;
  }

  .videos swiper-slide {
    width: 300px;
  }
  
  swiper-slide:last-child {
    margin-right: 20px;
  }
}

And the result would be like this:

If I add another row, I want it to have some space at the bottom of the page. It’s enough to add a class in the CSS file so that the last element has a margin of about 20px.

div:last-child {
  margin-bottom: 20px;
}

Done, we now have a practical example of an implementation using Swiper.js in the Ionic framework.