How to create the ionic slider with shows some pixels of next and previous slides in the present slide

Question

i have created the sliders like this

but i need something like this

Here is my code

user_10805479 · Answer

html code

 
    
      
      
        
          
            
          
          
            Movie Title
            
               8.5
            
          
        
      
      
      
    
    
    
      
      
        
          
            
          
          
            Movie Title
            
               8.5
            
          
        
      
      
      
    
    
    
      
      
        
          
            
          
          
            Movie Title
            
               8.5
            
          
        
      
      
      
    
    
    
      
      
        
          
            
          
          
            Movie Title
            
               8.5

ts code

options = {
    centeredSlides: true,
    loop: true,
    spaceBetween: -100,
  };

css code

.swiper-slide-prev {
  opacity: .5;
}

.swiper-slide-next {
  opacity: .5;
}

.swiper-slide {
  transition: .4s all;
}

.poster-col {
  height: 400px;
  img {
    border-radius: 40px;
  }
}

user_16549421 · Answer

Just put this in ts page

//home.page.ts

export class HomePage {
  options = {
    slidesPerview: 1.3,
    spaceBetween: 1,
    loop: true,
    centeredSlides: true,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false
    }
}

How to create the ionic slider with shows some pixels of next and previous slides in the present slide

2 Answers