Need help with CardSlider?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

IslamKhSh
215 Stars 40 Forks Apache License 2.0 40 Commits 20 Opened issues

Description

Card Slider is an android component allows you to implement carousel effect with infinite indicators and more features

Services available

!
?

Need anything else?

Contributors list

# 91,373
Dart
Kotlin
Flutter
Android
1 commit

Card Slider License Android Arsenal Jitpack.io

This is an Android library that implemnts carousel effect with many features and attrs to get exactly what you need.

preview

Demo App

Android app on Google Play

Card Slider components

  1. CardSliderViewPager: Custom ViewPager2 and uses a page transformer to apply carousel effect as shown in GIF.
    • As ViewPager2 is still a final class follow this issue, I added it as part of my package.
  2. CardSliderIndicator: Custom LinearLayout that that contain indicators as children views.
  3. CardSliderAdapter: Abstract class that must be extended and passed to CardSliderViewPager as its adapter.

Features

1- Show preview of pages in left and right (or top and bottom).

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

3- Can make pages auto swiped after specific time.

4- Add indicator and full customize it easily.

5- Infinite indicators like those in the Instagram app.

6- RTL Support.

7- Support vertical orientation.

Add to project

  1. Add it in your root build.gradle at the end of repositories:
    groovy
    allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }
    
  2. Add the dependency:
    groovy
    implementation 'com.github.IslamKhSh:CardSlider:{latest_version}'
    
    Find the latest version here

## Usage 1. Add it to your layout:

xml
    // auto sliding time in seconds
  1. Create your item (page) layout.

  2. Extend CardSliderAdapter ```kotlin class MovieAdapter(private val movies : ArrayList) : CardSliderAdapter() {

    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
    
    java public class MovieAdapter extends CardSliderAdapter {

    private ArrayList movies;

    public MovieAdapter(ArrayList movies){ this.movies = movies; }

    @Override public int getItemCount(){ return movies.getSize(); }

    @Override public MovieViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_page, parent, false); return new MovieViewHolder(view); }

    @Override public void bindVH(int position, MovieViewHolder holder) { //TODO bind item object with item layout view }

    class MovieViewHolder extends RecyclerView.ViewHolder {

    public MovieViewHolder(View view){ super(view); } } } ```

  3. Add adapter to CardSliderViewPager ```kotlin val movies = ArrayList().apply{ // add items to arraylist }

findViewById(R.id.viewPager).adapter = MoviesAdapter(movies)

or using Java
java ArrayList movies = new ArrayList(); // 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

xml
 
And then bind it with your CardSliderViewPager
xml
  

## Attributes List 1- CardSliderViewPager

| Attribute | Description | Default value | | ------------- |-------------| -----| |

cardSlider_smallScaleFactor
| The small scale of the next and previous pages. | 1 (no resizing) | |
cardSlider_smallAlphaFactor
| The small opacity factor of the next and previous pages. | 1 (no opacity) | |
cardSlider_baseShadow
| The CardView Elevation when selected. | 2dp | |
cardSlider_minShadow
| The CardView Elevation of next and previous cards. | baseShadow * smallScaleFactor | |
cardSlider_pageMargin
| The space between two pages. This must be large than baseShadow + minShadow or it will be override. | baseShadow + minShadow | |
cardSlider_otherPagesWidth
| The width of displayed parts from next and previous cards . | 0 | |
cardSlider_indicator
| The id of CardSliderIndicator to work with this view pager. | no indicator | |
auto_slide_time
| The time in seconds to auto sliding between pages in it | no sliding (
STOP_AUTO_SLIDING
) |

2- CardSliderIndicator

| Attribute | Description | Default value | | ------------- |-------------| -----| |

defaultIndicator
| The indicator drawable in case of not selected | default_dot.xml | |
selectedIndicator
| The indicator drawable in case of selected. | selected_dot.xml | |
indicatorMargin
| The space between indicators | the minimum width of
defaultIndicator
and
selectedIndicator
| |
indicatorsToShow
| The number of indicators to show and others will be hidden like Instagram app | -1 (
CardSliderIndicator.UNLIMITED_INDICATORS
) |
  Copyright [2019] [IslamKhSh]

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.