Slider function connection + back button

src/pages/signup/AdditionalQuestions.module.scss

@@ -133,4 +133,23 @@
         font-size: 18px;
         margin-left: 10px;
     }
+}
+
+.prevButton {
+    position: fixed;
+    bottom: 5%;
+    left: 7%;
+    z-index: 1;
+    width: 60px;
+    height: 60px;
+    --border-color: var(--rock);
+    --color: var(--rock);
+    --background: transparent;
+    --border-radius: 50%;
+    --border-width: 2px;
+
+    ion-icon {
+        opacity: 0.4;
+        transform: rotateY(180deg);
+    }
 }

src/pages/signup/AdditionalQuestions.tsx

@@ -1,4 +1,4 @@
-import { IonContent, IonButton, IonPage, IonSlides, IonSlide, IonIcon } from '@ionic/react';
+import { IonContent, IonButton, IonSlides, IonSlide, IonIcon } from '@ionic/react';
 import { Component } from 'react';
 import styles from './AdditionalQuestions.module.scss';
 
@@ -10,7 +10,7 @@ type OwnState = {
 };
 
 const slideOpts = {
-    initialSlide: 1,
+    initialSlide: 0,
     speed: 400,
     followFinger: false,
     draggable: false,
@@ -31,7 +31,8 @@ const jobSectors = [{
 }];
 
 
-class AdditionalQuestions extends Component<Props, OwnState> {
+
+class AdditionalQuestions extends Component<Props, OwnState> {  
     constructor(
         props: Props
     ) {
@@ -40,12 +41,26 @@ class AdditionalQuestions extends Component<Props, OwnState> {
             index: 0,
             userType: ''
         };
+
+        
     }
 
     getPadding = (digit: number)  => {
         return digit.toString().padStart(2, '0');
     }
 
+    nextSlide = async () => {
+        let slides: any = document.querySelector('#slides');
+        const swiper: any = await slides?.getSwiper();
+        swiper.slideNext();
+    }
+
+    prevSlide = async () => {
+        let slides: any = document.querySelector('#slides');
+        const swiper: any = await slides?.getSwiper();
+        swiper.slidePrev();
+    }
+
     render() {
         return <IonContent fullscreen>
             <header className={styles.slidersNavBar}>
@@ -54,7 +69,7 @@ class AdditionalQuestions extends Component<Props, OwnState> {
                 </h4>
                 <IonButton> Skip <IonIcon src='assets/images/signup/skip.svg'></IonIcon> </IonButton>
             </header>
-            <IonSlides options={slideOpts} className={styles.slides}>
+            <IonSlides options={slideOpts} className={styles.slides} id="slides">
                 <IonSlide>
                     <div className={styles.questionContainer}>
                         <p className={styles.question}> Select if you represent a <strong> company </strong> or if you're an <strong> individual </strong> </p>
@@ -66,10 +81,28 @@ class AdditionalQuestions extends Component<Props, OwnState> {
                         <button className={ this.state.userType === 'INDIVIDUAL' ? styles.active : '' }
                         onClick={e => this.setState({ userType: 'INDIVIDUAL' })}> <IonIcon src='assets/images/signup/user.svg'></IonIcon> Individual <IonIcon src='assets/images/signup/checkmark.svg'></IonIcon> </button>
                     </div>
+                </IonSlide>
+
+                <IonSlide>
+                    <div className={styles.questionContainer}>
+                        <p className={styles.question}> Select if you represent a <strong> company </strong> or if you're an <strong> individual </strong> </p>
+                        <p className={styles.hint}> Select answer below 1 </p>
+                    </div>
+                    <div className={styles.choiceContainer}>
+                        <button className={ this.state.userType === 'COMPANY' ? styles.active : '' }
+                        onClick={e => this.setState({ userType: 'COMPANY' })}> <IonIcon src='assets/images/signup/building.svg'></IonIcon> Company <IonIcon src='assets/images/signup/checkmark.svg'></IonIcon> </button>
+                        <button className={ this.state.userType === 'INDIVIDUAL' ? styles.active : '' }
+                        onClick={e => this.setState({ userType: 'INDIVIDUAL' })}> <IonIcon src='assets/images/signup/user.svg'></IonIcon> Individual <IonIcon src='assets/images/signup/checkmark.svg'></IonIcon> </button>
+                    </div>
                 </IonSlide>                    
             </IonSlides>
 
-            <IonButton className={styles.nextButton}>
+
+            <IonButton className={styles.prevButton} fill="outline" onClick={ () => this.prevSlide() }>
+                <IonIcon src='assets/images/signup/arrow-next.svg'></IonIcon>
+            </IonButton>
+
+            <IonButton className={styles.nextButton} onClick={ () => this.nextSlide() }>
                 Next <IonIcon src='assets/images/signup/arrow-next.svg'></IonIcon>
             </IonButton>