Showing movies array with ion-slide

Ionic Framework Ionic Angular
1

I’m working with an app and I want to show an array of movies using the ion-slide component. I want to present the movies like the Netflix app so the movies are all on the same row and the user can scroll horizontal. Using the ions-lider kind of made it already but the styling it’s not working at all. The movie images are provided from an external API and are not all the same size but the same with and height proportion. The problem is:

  • The movies images doesn’t show with the same height.
  • They are too close each of each other that they overlap on the another.

I’ve tried with custom scss rules rather than the default ion-img component styling rules but the result was worse. Now I have it as it comes by default and seems that the only problem i the slider configuration.

The way I have it is that for an array of movies I create an ion-slides and inside there’s an iteration for each movie on the array I call a component binding a movie object, that component renders the movie image and the movie title.

The way I’m doing it it’s the following:

  1. I have an array where each element on this array is an object that contains a collection of movies with a name for the collection, the id of the owner of that collection and an array of id’s movies.
  2. For each element of the array I call a component called collection this component gets a collection and renders the title of the collections and iterates over the movies id’s retrieving the full information about the movie from the API.
  3. Inside the collection component, when I’ve retrieved all the movies information I render the movies image and title using a component called movie-poster that renders the movie image and movie title.

This is where I render all the collections:

    <ion-row *ngIf="reference === 'collections'">
      <ion-col size='12' *ngFor='let collection of results?.collections'>
        <app-collection [collection]='collection'></app-collection>
      </ion-col>
    </ion-row>

And the ions-slides configuration:

slideOpts = {
    slidesPerView: 3.5,
    spaceBetween: 50,
    autoHeight: true
  }

And the movie-poster component:

<ion-img [src]='movie.poster_path | posterImg' (click)='getDetails(movie)'></ion-img>

<h3>
  {{ movie.title }}
</h3>

I don’t have any scss rules on any of the components I’m using. This is what I’ trying my movies to be shown:

enter image description here

And this is how it’s showing for now:

enter image description here enter image description here

2

Simple google search on Netflix css, gives lots of people having modelled the Netflix UI using CSS

Your issue imho is purely CSS and if you stick too much to Ionic elements, you find yourself fighting shadom dom. So maybe dive into shadow parts, or use plain DIVs for the key elements

3

I checked the example you’ve posted but with that the problem is that way I don’t have the horizontal scroll functionality I’m looking for.

4

I already found why the movie posters weren’t showing properly. I was setting through scss a fixed width and height for all the posters and at the same time I was setting the ion-slider to show 2.5 movie poster at the same time so the ion slider overlap movie posters. To solve this I just removed the scss rules and now works as expected.

6

For the overlapping issue, adjusting the spacing in your slideOpts might help. Try tweaking the spaceBetween property to find that sweet spot. Also, for the height inconsistency, you might want to experiment with the autoHeight property – sometimes it plays a key role. It’s great that you’ve identified and fixed the poster display problem. CSS can be a tricky beast! You can also look at examples of articles like movies out right now, there are usually beautiful examples of text design. If spacing adjustments don’t do the trick, maybe consider playing with the image aspect ratio within your movie-poster component.