Help with Spotify style slides

Ionic Framework ionic-v3
1

Hey,

I’m just wondering if there is a way to re-create the Spotify music slide feature? The screenshot below shows that you can see the current track is in the middle and the previous and next tracks have their edges visible and are smaller.

I have tried modifying the slides control to allow showing multiple slides per view but can’t replicate what I see in the app. I have had some success with the coverflow but could never get it to flatten correctly and there would be an overlap.

image
Sidesync_capture_20170721135255_1.jpg1080×1920 77.8 KB

Below is an example of the code I have tried.

Logbook Select Page

<ion-content>

   <ion-slides pager>
     <ion-slide *ngFor="let slide of slidePages" (click)="select(slide)">
       {{slide.text}}
     </ion-slide>
   </ion-slides>

</ion-content>

Logbook Select Page scss

page-logbook-select {

     // This is to get content to show inside the ion-scroll 
     // ion-scroll {
     //     white-space: nowrap;
     //     // height: 250px;
     //     height: 50px;
     // }

     // .scroll-content {
     //     background-color: $toolbar-background-color;
     // }

     // .swiper-slide {
     //     height: 95%;
     //     // width: 80% !important;
     //     border: 15px solid $toolbar-background-color;
     //     border-radius: 25px;

     //     background-color: white;
     // }
 //     .swiper-slide-active {
 //         // border: 50px $toolbar-background-color;
 //         // border-style: solid none;
 //         // border: 15px solid $toolbar-background-color;
 //         // width: 80% !important;
 //     }

 //     .swiper-slide-prev {
 //         // width: 110% !important;
 //     }
 //     .swiper-slide-prev,
 //     .swiper-slide-next {
 // // position: absolute;
 //   top: 50%;
 //         // transform: translateY(50%);
 //         // height: 75%;
 //         border-top: 25px solid $toolbar-background-color;
 //         // border: 50px black;
 //         // border-style: solid none;
 //         // border-style: solid none;
 // //         border: $border-width solid crimson;
 // //   border-radius: $radius;

 // // -webkit-border-bottom-left-radius: 25px;
 // // -webkit-border-bottom-right-radius: 25px;
 //     }
 }

LogbookSelectPage

import { Component, ViewChild } from "@angular/core";
import { IonicPage, ViewController, NavController, NavParams, Slides, Segment } from "ionic-angular";
@IonicPage()
@Component({
  selector: "page-logbook-select",
  templateUrl: "logbook-select.html",
})
export class LogbookSelectPage {
  public slidePages = [
    { text: "Slide 1", color: "red" },
    { text: "Slide 2", color: "blue" },
    { text: "Slide 3", color: "green" },
    { text: "Slide 4", color: "orange" },
    { text: "Slide 5", color: "orange" },
    { text: "Slide 6", color: "orange" },
    { text: "Slide 7", color: "orange" },
  ];

  public tab;

  @ViewChild(Slides) private slides: Slides;
  @ViewChild(Segment) private segment: Segment;

  constructor(public navCtrl: NavController, public navParams: NavParams, private viewCtrl: ViewController) {
  }

  public ngAfterViewInit() {
    // this.slides.freeMode = true;

    // this.slides.freeModeMomentumBounce = false;

    // this.slides.centeredSlides = true;
    // this.slides.spaceBetween = this.spaceBetween();
    // this.slides.slidesPerView = this.slidesPerView();
    // this.slides.slidesPerView = this.slidesPerView();
    // this.slides.slidesOffsetBefore = 12;
    // this.slides.slidesOffsetAfter = 12;

    // this.slides.slidesPerView = 4;
    // this.slides.centeredSlides = true;
    // this.slides.paginationClickable = true;
    // this.slides.spaceBetween = 30;

    //  effect: 'coverflow',
    //     grabCursor: true,
    //     centeredSlides: true,
    //     slidesPerView: 'auto',
    //     coverflow: {
    //         rotate: 50,
    //         stretch: 0,
    //         depth: 100,
    //         modifier: 1,
    //         slideShadows : true
    //     }

    // this.slides.spaceBetween = 30;
    // this.slides.slidesPerView = 2;
    // this.slides.centeredSlides = true;
    // this.slides.paginationClickable = true;
    // this.slides.spaceBetween = 30;


    // this.slides.effect = "coverflow";
    // this.slides.centeredSlides = true;
    // this.slides.slidesPerView = 2;
    // this.slides.coverflow = {
    //     rotate: 50,
    //     stretch: 0,
    //     depth: 100,
    //     modifier: 1,
    //     slideShadows : true,
    // };

  }

Any help would be appreciated!

Thanks

4

I think searching for “coverflow” would be the right entry point for this.

5

Hi,

Yes I have tried coverflow but I’m not able to get the previous and next slides to display only a portion of the slide.

I have set the slides per view to 3 and made the slides centered but this just squishes all the slides together onto the same view.

6

Open a new topic where you show this code and link to the library you are using for Coverflow - maybe someone can help with that exact problem.

8

Here is an example I have in plunkr. I just can’t seem to get the spacing between the slides correct. It’s inconsistent as you will see when you slide through to the end.

I have tried a few different spacing and depth and stretch options but they don’t give me the desired affect.

https://embed.plnkr.co/p8GeoDf9jUXzm8Gtntkl/

9

I’ve also tried using the slidesOffsetBefore and slidesOffsetAfter. Before appears to work but After isn’t.

https://embed.plnkr.co/Ew9wxp5rwihuFdDgxJuB/

10

Anyone? I’m just about to give up on this I think.

11

Using your plunker just change these values:
this.slides.slidesPerView = 1.5;
this.slides.slidesOffsetBefore = 10;
this.slides.slidesOffsetAfter = 25;

gives you a central slide and a slice of the next and previous

12

This should be the solution.
Thanks!