Card Slider For Android with Carousel Effect

Card Slider has been around for many years. Also, having a simple slideshow with different animations in the slider can be implemented. The UI has gotten a lot more vast than just using a simple slideshow. Although, slideshows are there for easy application of having different contents slide in a horizontal or vertical pattern as per the preference. We will help you improve your UI with this amazing card slider library that offers the Carousel effect on sliding animations.

Android development is a never-dying environment. Android has a huge market in terms of users. In addition, an open source makes it more ready for any future applications. However, a long-term environment means new competitors every day for old developers. It’s not that big of a deal but to keep up you will need to have perfect outcomes from the code you write.

Although, it might seem like a huge problem but don’t worry libraries will be there for you. The library makes your development work easier than you would’ve thought. Similarly, we have come up with a card slider library designed for android developers. This isn’t a normal slideshow implication but a slider with a carousel effect.

Also Read: Tech Tips And Tricks

Although, the carousel effect is well-known. Some of you might not be sure how it works or even what is a carousel effect. Just before starting the discussion about the library. Firstly, let’s briefly know what the carousel effect actually means. While, normal slideshow effects transition from one to another, applying the carousel effect makes the slider portion 3D. The definition might not have been enough. So, let’s get into the preview where you will notice the difference. 


Demo Application

Before getting right into implementation, you can try out the application available on the google play store. This gives a full glimpse of the potential and use of the library.


Card Slider components

  • CardSliderViewPager: Custom ViewPager2 and uses a page transformer to apply the carousel effect as shown in GIF.

  • CardSliderIndicator: Custom LinearLayout that contains indicators as children views.

  • CardSliderAdapter: Abstract class that must be extended and passed to CardSliderViewPager as its adapter.


You might be a little confused about what the library actually offers. Although, a demo application is given a feature section always makes it better. So, here are the features included in the library.

  1. Show a preview of pages on the left and right (or top and bottom).

  2. Can resize (scale) and change the opacity of the pages to make the focused page larger and more focused in height as shown in GIF (carousel effect).

  3. Can make pages auto-swiped after a specific time.

  4. Add an indicator and fully customize it easily.

  5. Infinite indicators like those in the Instagram app.

  6. RTL Support.

  7. Support vertical orientation.

Add to project

Now, let’s move on to the installation part. These steps will help you to easily add the library to your projects. So, let’s move on to the steps.

  1. Add it to your root build.gradle at the end of repositories:

allprojects {

repositories {


maven { url 'https://jitpack.io' }



  1. Add the dependency:

implementation 'com.github.IslamKhSh:CardSlider:{latest_version}'


Moving onto the usage section. The library is fairly simple to use. However, it might be a bit confusing at first. But don’t worry we will guide you until the end. Simply follow the steps provided below to use the library on your awesome project.

  1. Add it to your layout:

           app:cardSlider_smallScaleFactor="0.9" //scale factor of height of pages in left and right (1 if no resizing nedded)
           app:cardSlider_otherPagesWidth="24dp" // width of displayed parts of left and right pages
           app:cardSlider_pageMargin="12dp" // margin between pages
   	   app:auto_slide_time="3"/>  // auto sliding time in seconds
  1. Create your item (page) layout.

  2. Extend CardSliderAdapter

class MovieAdapter(private val movies : ArrayList<Movie>) : CardSliderAdapter<MovieAdapter.MovieViewHolder>() {

    override fun getItemCount() = movies.size

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MovieViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_page, parent, false)
        return MovieViewHolder(view)
    override fun bindVH(holder: MovieViewHolder, position: Int) {
      //TODO bind item object with item layout view

    class MovieViewHolder(view: View) : RecyclerView.ViewHolder(view)

or using Java

public class MovieAdapter extends CardSliderAdapter<MovieAdapter.MovieViewHolder> {
    private ArrayList<Movie> movies;
    public MovieAdapter(ArrayList<Movie> movies){
        this.movies = movies;
    public int getItemCount(){
    	return movies.getSize();
    public MovieViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_page, parent, false);
	return new MovieViewHolder(view);
    public void bindVH(int position, MovieViewHolder holder) {
      //TODO bind item object with item layout view
    class MovieViewHolder extends RecyclerView.ViewHolder {
	public MovieViewHolder(View view){
  1. Add adapter to CardSliderViewPager
val movies = ArrayList<Movie>().apply{
  // add items to arraylist
  findViewById<CardSliderViewPager>(R.id.viewPager).adapter = MoviesAdapter(movies)
or using Java
  ArrayList<Movie> movies = new ArrayList<Movie>();
    // add items to arraylist
  CardSliderViewPager cardSliderViewPager = (CardSliderViewPager) findViewById(R.id.viewPager);
  cardSliderViewPager.setAdapter(new MoviesAdapter(movies));

5- To add indicator add it to your layout

	    app:indicatorsToShow="5" />

And then bind it with your CardSliderViewPager


Attributes List

Let’s move into the attributes of the library. Undoubtedly,  having a glimpse of the usage in the above code might have raised some questions regarding the function or use of the attribute. So, in this, we have a short description of all the attributes.

1- CardSliderViewPager



Default value


The small scale of the next and previous pages.

1 (no resizing)


The small opacity factor of the next and previous pages.

1 (no opacity)


The CardView Elevation when selected.



The CardView Elevation of next and previous cards.

baseShadow * smallScaleFactor


The space between two pages. This must be large than baseShadow + minShadow or it will be overridden.

baseShadow + minShadow


The width of displayed parts from the next and previous cards.



The id of CardSliderIndicator to work with this view pager.

no indicator


The time in seconds to auto sliding between pages in it

no sliding (STOP_AUTO_SLIDING)


2- CardSliderIndicator



Default value


The indicator is drawable in case of not selected



The indicator is drawable in the case of selection.



The space between indicators

the minimum width of defaultIndicator and selectedIndicator


The number of indicators to show and others will be hidden like the Instagram app

-1 (CardSliderIndicator.UNLIMITED_INDICATORS)

Download the complete project source code from GitHub

Carousel 3120086231950876140
Home item