Ionic Slides Tutorial

Learn how to display Slide/carousel in ionic with step by step tutorial.

Download Source code:

Download

home.page.html

<span class="hljs-tag"><<span class="hljs-name">ion-content</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">ion-slides</span> <span class="hljs-attr">pager</span>=<span class="hljs-string">"true"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">ion-slide</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://placehold.it/120x120"</span> /></span>
            <span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Welcome<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
        <span class="hljs-tag"></<span class="hljs-name">ion-slide</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">ion-slide</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://placehold.it/120x120"</span> /></span>
            <span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Slice 2<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
        <span class="hljs-tag"></<span class="hljs-name">ion-slide</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">ion-slide</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://placehold.it/120x120"</span> /></span>
            <span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Slice 3<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">ion-button</span>></span>Getting Started<span class="hljs-tag"></<span class="hljs-name">ion-button</span>></span>
        <span class="hljs-tag"></<span class="hljs-name">ion-slide</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">ion-slides</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ion-content</span>></span>

Download