Slider using html css and typescript no ionic or angular component

Ionic Framework ionic-v3
1

I am looking for a simple code to make a slider without using ionic or angular component??
anyone please help me!!!

2

Hello,

If you check the ionic documentation you will find an example of how the slides component is used, here is the link of the official documentation

1 Like
3

thanks sir…
i got complete idea

4

//html

<ion-navbar>

    <ion-title>

        Ionic Blank

    </ion-title>

</ion-navbar>

<div class="container">

    <div id="arrow-left" class="arrow"></div>

    <div id="slider">

        <div class="slide slide1">

            <div class="slide-content">

                <span>Lorem ipsum dolor</span>

            </div>

        </div>

        <div class="slide slide2">

            <div class="slide-content">

                <span>Lorem ipsum dolor</span>

            </div>

        </div>

        <div class="slide slide3">

            <div class="slide-content">

                <span>Lorem ipsum dolor</span>

            </div>

        </div>

    </div>

    <div id="arrow-right" class="arrow"></div>

</div>

////scss
page-home {

body,

#slider,

.container,

.slide-content {

    margin: 0;

    padding: 0;

    font-family: Arial, Helvetica, sans-serif;

    width: 100%;

    height: 50vh;

    overflow-x: hidden;

}

.container {

    position: relative;

}

.slide {

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}

.slide1 {

    background-image: url('https://images.pexels.com/photos/3370381/pexels-photo-3370381.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');

}

.slide2 {

    background-image: url('https://images.pexels.com/photos/6105/flowers-shoes-white-modern.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500');

}

.slide3 {

    background-image: url('https://images.pexels.com/photos/2970502/pexels-photo-2970502.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');

}

.slide-content {

    display: flex;

    justify-content: center;

    align-items: flex-end;

    text-align: center;

}

.slide-content span {

    font-size: 3rem;

    color: #fff;

}

.arrow {

    cursor: pointer;

    position: absolute;

    top: 50%;

    margin-top: -15px;

    width: 0;

    height: 0;

    border-style: solid;

}

#arrow-left {

    border-width: 10px 15px 10px 0;

    border-color: transparent #fff transparent transparent;

    left: 0;

    margin-left: 15px;

}

#arrow-right {

    border-width: 10px 0 10px 15px;

    border-color: transparent transparent transparent #fff;

    right: 0;

    margin-right: 15px;

}

}

//ts
import { Component } from ‘@angular/core’;

import { NavController } from ‘ionic-angular’;

@Component({

selector: ‘page-home’,

templateUrl: ‘home.html’

})

export class HomePage {

constructor(public navCtrl: NavController) {

}

ionViewDidLoad(){

let sliderImages:any = document.querySelectorAll(".slide");

let arrowLeft:any = document.querySelector("#arrow-left");

let arrowRight:any = document.querySelector("#arrow-right");

let current = 0;



function initial() {

  for (let i = 0; i < sliderImages.length; i++) {

    sliderImages[i].style.display = "none";

  }

}



function startSlide() {

  initial();

  sliderImages[0].style.display = "block";

}



function slideLeft() {

  initial();

  sliderImages[current - 1].style.display = "block";

  current--;

}



function slideRight() {

  initial();

  sliderImages[current + 1].style.display = "block";

  current++;

}



arrowLeft.addEventListener("click", function() {

  if (current == 0) {

    current = sliderImages.length;

  }

  slideLeft();

});



arrowRight.addEventListener("click", function() {

  if (current == sliderImages.length - 1) {

    current = -1;

  }

  slideRight();

});



startSlide();

  }

}