CODEWITHSUNDEEP
angular
Sarath Hari
Sarath Hari

Reputation: 219

Slider not Working after converting to angular

I was trying to create a portfolio on angular. But the slider part is not working in angular. It is working correctly on the normal HTML code. I am beginner and I am trying hard to learn it.

Since the code is large i. uploaded it to my git. Please find the below link.

https://github.com/sarathhari7/updatedportfolio.git

        "scripts": [
        "src/assets/js/vendor.js",
        "src/assets/js/custom.js"
      ]

enter image description here

Upvotes: 0

Views: 1001

Answers (1)

Aakash Garg
Aakash Garg

Reputation: 10979

Fixed your testimonial slider.

Couple of issues found :-

  1. With slider buttons you were using href, routerlink to be used.

  2. Install slider in you project using npm i slider --save

  3. Install @types/slider in your project using npm i @types/swiper --save-dev,

  4. your changed home.component.ts below :- 

import { Component, OnInit, AfterViewInit } from '@angular/core';
import Swiper from 'swiper/';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css','../app.component.css'],
})
export class HomeComponent implements OnInit, AfterViewInit {
  public swiper;
  name = "Sarath Hari";
  services : any;
  constructor() { 
    this.services =
      [
        {
          service_name:"Web Development",
          desc:"Working with the skill set of HTML5, CSS3, jQuery, Bootstrap, PHP & Angualr",
          image:"website.jpg"
        },
        {
          service_name:"Graphic Design",
          desc:"Creates attractive Banners, Logos and Info graphics for all kind of events and business",
          image:"logo.jpg"
        },
        {
          service_name:"Video Animations",
          desc:"Using After Effects to create beautiful Logo, App  presentations and explanatory videos",
          image:"video.jpg"
        },
        {
          service_name:"Photography",
          desc:"Captures your most beautiful evens, portraits, products etc . . .",
          image:"photography.jpg"
        },
        {
          service_name:"SEO / SEM",
          desc:"Help you boost your business through the advertising platforms like google, facebook etc",
          image:"seo-sem.jpg"
        },
        {
          service_name:"Web Hosting",
          desc:"Host your website on any top servers and never let it go down.",
          image:"hosting.jpg"
        }       
      ]

  }

  ngOnInit() {

  }

  ngAfterViewInit() {
    this.swiper = new Swiper('.swiper-testimony', {
      spaceBetween: 30,
      navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
      },
   });
  }

}
  1. HTML router link change for your reference :- 
<a [routerLink]="" class="swiper-button-next"></a>
<a [routerLink]="" class="swiper-button-prev"></a>
  1. you don't need custom.js and vendor.js anymore.

Upvotes: 1

Related Questions