Ionic 4 Slider With Options

Ionic 4 Slides components contain pages that can be changed by swiping or dragging in the content screen. It is a multi-section container. It can include any number of Slide components. It is very useful in creating galleries, tutorials, and page-based layouts.

Ion-slide: It is a child component of Ionic slides. You can write the templates as <ion-slide>. The slide content should be written inside this component which should be used in conjunction with Slides.

The following example explains how you can use slides components with the Ionic app.

Ionic Slider HTML

• If you need pager then ad attribute pager with true
• if you need more options like slides per view, space between then follows the below method.

   <ion-slides pager="true" [options]="slideOpts">

      <ion-slide>
        <div>
          <h2>Welcome</h2>
          <p>The <b>ionic conference app</b> is a practical preview of the ionic framework in action, and a
            demonstration of proper code use.</p>
        </div>
      </ion-slide>

      <ion-slide>
        <h2>What is Ionic?</h2>
        <p><b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps with
          web technologies like HTML, CSS, and JavaScript.</p>
      </ion-slide>


    </ion-slides>

TS Files

  slideOpts = {
    spaceBetween: 15,
    centeredSlides: true,
    slidesPerView: 1.7

  }