All Projects → seyedjafariy → slider

seyedjafariy / slider

Licence: MIT License
Infinite Slider library built on top of epoxy

Programming Languages

kotlin
9241 projects

Projects that are alternatives of or similar to slider

scroll-snap-carousel
One more carousel plugin, but using CSS Scroll Snap and for every frameworks!
Stars: ✭ 46 (+31.43%)
Mutual labels:  slider
slider-button-card
A button card with integrated slider
Stars: ✭ 319 (+811.43%)
Mutual labels:  slider
react-native-big-slider
🎚️ Yet another, big one, pure JS easily customisable and hackable react-native slider component
Stars: ✭ 86 (+145.71%)
Mutual labels:  slider
RN-intro-screen
Usage of intro / welcome screen in react-native as onboarding slider swiper
Stars: ✭ 15 (-57.14%)
Mutual labels:  slider
react-flickity-component
A React.js component for using @desandro's Flickity
Stars: ✭ 258 (+637.14%)
Mutual labels:  slider
TW-Tamasha
Presentation and slideshow app using web technology based onTiddlywiki
Stars: ✭ 28 (-20%)
Mutual labels:  slider
AutoImageFlipper
Auto Scrolling Image Pager with Pager Indicator and Text
Stars: ✭ 106 (+202.86%)
Mutual labels:  slider
radiaSlider
circular/linear knob-style slider
Stars: ✭ 18 (-48.57%)
Mutual labels:  slider
eros-plugin-ios-TencentCaptcha
腾讯防水墙、滑动验证、类似bilibili滑动验证码
Stars: ✭ 21 (-40%)
Mutual labels:  slider
height-slider
A customisable height slider for Flutter.
Stars: ✭ 15 (-57.14%)
Mutual labels:  slider
grav-plugin-lightslider
Grav LightSlider Plugin
Stars: ✭ 14 (-60%)
Mutual labels:  slider
Pathslider
Numerical slider that follows a Bezier path
Stars: ✭ 15 (-57.14%)
Mutual labels:  slider
shopify-product-image-slider
Implementation of the Slick image carousel into a Shopify store
Stars: ✭ 21 (-40%)
Mutual labels:  slider
react-carousel-minimal
React.js Responsive Minimal Carousel
Stars: ✭ 76 (+117.14%)
Mutual labels:  slider
hugo-travelify-theme
Port of Aigars Silkalns's Wordpress theme Travelify to Hugo. Demo -
Stars: ✭ 34 (-2.86%)
Mutual labels:  slider
LimitlessUI
Awesome C# UI library that highly reduced limits of your application looks
Stars: ✭ 41 (+17.14%)
Mutual labels:  slider
vanilla-js-carousel
Tiny (1Kb gzipped) JavaScript carousel with all the features most of us will ever need.
Stars: ✭ 87 (+148.57%)
Mutual labels:  slider
Slider Captcha Crack
🌈Slider_Captcha_Crack某教育网站滑动验证码破解(识别率100%)
Stars: ✭ 49 (+40%)
Mutual labels:  slider
basicSlider
A slider in its purest form.
Stars: ✭ 27 (-22.86%)
Mutual labels:  slider
MTCircularSlider
A feature-rich circular slider control written in Swift.
Stars: ✭ 118 (+237.14%)
Mutual labels:  slider

Slider

This is an infinite auto sliding Slider library for Android built on top of Epoxy. You have all the benefits of Epoxy plus automatic and infinite sliding on top. Completely in Kotlin. Thanks to Epoxy you can use the power of Kotlin DSLs with this library too.

Slider is not bound to any particular view so you can use any type of view as long as it's a EpoxyModel.

Demo

Usage

Step 1

Add dependency to your build.gradles

Inside root level build.gradle

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

Inside App build.gradle

dependencies {
            implementation 'com.github.worldsnas:slider:{latest_version}'
}

Step 2

Add Slider to your epoxy models:

yourEpoxyView.withModels {
            slider {
                id("your slider id")
                
                //delay before every cycle if user is not scrolling
                cycleDelay(5_000)
                
                //controll the indicator visibility
                indicatorVisible(true)
                //Front/Selected indicator dot color (if indicator visible)
                indicatorSelectedDotColor(Color.YELLOW)
                //rest of indicator dot color (if indicator visible)
                indicatorDotColor(Color.BLACK)
                
                
                models(
                         // list of all the sliding models 
                         // don't forget to add Id for them
                )
            }
        }

To add infinite sliding you can use infinite(true). The only limitation for infinite scrolling is you need to add a copier function to the builder.

The complete slider builder with infinite scrolling will look like this:

yourEpoxyView.withModels {
            slider {
                id("your slider id")
                cycleDelay(5_000)
                
                indicatorVisible(true)
                indicatorSelectedDotColor(Color.YELLOW)
                indicatorDotColor(Color.BLACK)
                
                models(
                         banners.mapIndexed { index, s ->
                            BannerViewModel_().apply {
                                id(index.toLong())
                                bindImage(s)
                                listener {
                                    showImageUrl(it)
                                }
                            }
                        }
                )
                
                infinite(true)
                copier { oldModel ->
                    oldModel as BannerViewModel_
                    //you have to create a new object and return here
                    BannerViewModel_().apply {
                        id(oldModel.id())
                        bindImage(banners[oldModel.id().toInt()])
                        listener { imageUrl ->
                            showImageUrl(imageUrl)
                        }
                    }
                }
            }
        }

Now run your application!

For further usage please checkout SampleApp

Thanks

Next Steps

  • Add sliding animation
  • Support more indicator customization

Contribution

There are a lot to be done here and I'm more than happy to discuss so:

  • Create issues
  • Send PRs

Any contribution is more than wellcome

License

Slider is MIT-licensed.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].