davidcetinkaya / Hammer Slider
Licence: mit
DISCONTINUED - HammerSlider touch is a lightweight infinite carousel plugin.
Stars: ✭ 21
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Hammer Slider
Embla Carousel
A lightweight carousel library with fluid motion and great swipe precision.
Stars: ✭ 1,874 (+8823.81%)
Mutual labels: slider, carousel, touch
Swiper
Most modern mobile touch slider with hardware accelerated transitions
Stars: ✭ 29,519 (+140466.67%)
Mutual labels: slider, carousel, touch
Slider
Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap
Stars: ✭ 2,046 (+9642.86%)
Mutual labels: slider, carousel, touch
Vue Gallery
📷 Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.
Stars: ✭ 405 (+1828.57%)
Mutual labels: slider, carousel, touch
Keen Slider
The HTML touch slider carousel with the most native feeling
Stars: ✭ 3,097 (+14647.62%)
Mutual labels: slider, carousel, touch
Glide
A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more
Stars: ✭ 6,256 (+29690.48%)
Mutual labels: slider, carousel
hugo-travelify-theme
Port of Aigars Silkalns's Wordpress theme Travelify to Hugo. Demo -
Stars: ✭ 34 (+61.9%)
Mutual labels: slider, carousel
Egjs Flicking
🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.
Stars: ✭ 937 (+4361.9%)
Mutual labels: slider, carousel
Vue Flickity
A Vue Slider / Carousel Component for Flickity.js
Stars: ✭ 339 (+1514.29%)
Mutual labels: slider, carousel
react-flickity-component
A React.js component for using @desandro's Flickity
Stars: ✭ 258 (+1128.57%)
Mutual labels: slider, carousel
react-styled-carousel
React styled components carousel or slide show. No external css import is required.
Stars: ✭ 42 (+100%)
Mutual labels: slider, carousel
Angular2 Carousel
An lightweight , touchable and responsive library to create a carousel for angular 2 / 4 / 5
Stars: ✭ 26 (+23.81%)
Mutual labels: carousel, touch
react-gallery-carousel
Mobile-friendly gallery carousel 🎠 with server side rendering, lazy loading, fullscreen, thumbnails, touch, mouse emulation, RTL, keyboard navigation and customisations.
Stars: ✭ 178 (+747.62%)
Mutual labels: touch, carousel
shopify-product-image-slider
Implementation of the Slick image carousel into a Shopify store
Stars: ✭ 21 (+0%)
Mutual labels: slider, carousel
zSlider
A pure JavaScript Carousel/Slider plugin that works well at Mobile/PC
Stars: ✭ 12 (-42.86%)
Mutual labels: slider, carousel
vanilla-js-carousel
Tiny (1Kb gzipped) JavaScript carousel with all the features most of us will ever need.
Stars: ✭ 87 (+314.29%)
Mutual labels: slider, carousel
Splide
Splide is a lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.
Stars: ✭ 786 (+3642.86%)
Mutual labels: slider, carousel
Vue Slick Carousel
🚥Vue Slick Carousel with True SSR Written for ⚡Faster Luxstay
Stars: ✭ 447 (+2028.57%)
Mutual labels: slider, carousel
scroll-snap-carousel
One more carousel plugin, but using CSS Scroll Snap and for every frameworks!
Stars: ✭ 46 (+119.05%)
Mutual labels: slider, carousel
DISCONTINUED
I've decided to discontinue the development of this old library to concentrate my efforts on Embla Carousel instead. It's much better in every way possible so give it a shot!
HammerSlider touch
Yet another touch slider. Yada yada yada...
HammerSlider is a lightweight slider with infinite carousel and rewind features. Comes with customizable settings and its own API for extensibility.
- Works with Mousedrag Events, Touch Events, Pointer Events and IE10 Pointer Events.
- Only 8.6k minified. ~3.3k with Gzip.
- IE10+ compatible.
- Library agnostic. If jQuery is available, it will register itself as a plugin.
- API and callback functions for extensibility.
- Animates with CSS3 transforms and requestAnimationFrame for smooth sliding.
Install
$ npm install hammer-slider
Kit
- hammerslider.min.js - production script (requestAnimationFrame polyfill included)
- hammerslider.required.css - required styles for proper functioning
Usage
HTML markup:
<div class="c-slider" id="hammer-slider">
<div class="c-slider__container">
<div class="c-slider__slide">
...
</div>
<div class="c-slider__slide">
...
</div>
<div class="c-slider__slide">
...
</div>
</div>
</div>
JavaScript:
const slider = HammerSlider(document.getElementById('hammer-slider'));
Or JavaScript + jQuery:
$('#hammer-slider').HammerSlider();
You may place anything you want within the slides.
Settings
HammerSlider accepts an object as an optional second parameter. Default settings are:
{
//Slide transition speed, higher number for slower speed
slideSpeed: 50,
//Slide transition speed after touch interaction
touchSpeed: 50,
//Slide number to start with, zero based index
startSlide: 0,
//Auto sliding feature
slideShow: false,
//Interval for auto sliding, ms
slideInterval: 5000,
//Stop slideShow after touch, click or resize
stopAfterInteraction: true,
//Disable infinite carousel effect
rewind: false,
//Enables mouse to drag between slides
mouseDrag: false,
//Minimum drag/touch distance for slide change to occur after touch, pixels
minimumDragDistance: 30,
//Minimum distance required before preventing vertical scroll, pixels
dragThreshold: 10,
//Prefix used for generated elements such as dots and mouse-drag-enabled etc.
//Note that all added classes use the BEM naming convention.
//Change the stylesheet according to this!
cssPrefix: 'c-slider',
//Generate dots
dots: false,
//Element that will contain dots. By default it will be generated and appended to slider root element.
//Can be anywhere on the page.
dotContainer: undefined,
//Element that contain slides. First child of slider root element will be used by default.
slideContainer: undefined,
//Callback function, runs before slide transition when slide change is triggered.
//Recieves upcoming slide number as parameter.
beforeSlideChange: undefined,
//Callback function, runs after a slide transition is finished.
//Receives current slide number as parameter.
afterSlideChange: undefined,
//Callback function, runs after slider is set up.
//Receives total number of slides as parameter.
onSetup: undefined
}
API
HammerSlider exposes a set of functions upon setup that can be used to control the slider externally:
//Change to next slide
next();
//Change to previous slide
prev();
//Stop slideshow
stop();
//Start slideshow
start();
//Get current active slide number
getActiveSlideNr();
//Slide to slide number passed as the first parameter.
//Second parameter is for custom slidespeed. If not provided default slidespeed will be used.
moveTo(number, speed);
//Recalculates slider's and slides' widths and resets slider position to slide number parameter.
//Useful when slider is used in a lightbox or when container width changes.
//This is invoked on window resize and orientation change.
setupSlider(number);
Examples
JavaScript
const slider = HammerSlider(document.getElementById('hammer-slider'), {
slideSpeed: 60,
slideShow: true,
slideInterval: 4000,
dots: true,
mouseDrag: true,
beforeSlideChange: (targetSlide) => {
console.log('Changing to slide number: ' + targetSlide);
}
});
document.getElementById('next-btn').addEventListener('click', slider.next, false);
JavaScript + jQuery
const slider = $('#hammer-slider').HammerSlider({
slideSpeed: 60,
slideShow: true,
slideInterval: 4000,
dots: true,
mouseDrag: true,
beforeSlideChange: (targetSlide) => {
console.log('Changing to slide number: ' + targetSlide);
}
});
$('#next-btn').on('click', slider.data('HammerSlider').next);
License
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].