Touch slider на javascript

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

☀ Touch enabled minimalistic slider written in vanilla JavaScript.

License

loryjs/lory

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Touch enabled minimalistic slider written in vanilla JavaScript.

lory is released under the MIT license & supports modern environments. There is also a prebundled CDN version which you can use.

Consume it as an ES2015 module:

import  lory > from 'lory.js'; document.addEventListener('DOMContentLoaded', () =>  const slider = document.querySelector('.js_slider'); lory(slider,  // options going here >); >);

Consume it as an commonJS module:

var lory = require('lory.js').lory; document.addEventListener('DOMContentLoaded', function()  var slider = document.querySelector('.js_slider'); lory(slider,  // options going here >); >);

// To install dev dependencies run: yarn // To start the development server run: yarn run dev // To lint your code run: yarn run lint // To make a full new build run: yarn run build 

// To install dev dependencies run: yarn install // To start the karma tests locally run: yarn run karma-local 

div class pl-s">slider js_slider"> div class pl-s">frame js_frame"> ul class pl-s">slides js_slides"> li class pl-s">js_slide">1li> li class pl-s">js_slide">2li> li class pl-s">js_slide">3li> li class pl-s">js_slide">4li> li class pl-s">js_slide">5li> li class pl-s">js_slide">6li> ul> div> div>

/** * (optional) define here the style definitions which should be applied on the slider container * e.g. width including further controls like arrows etc. */ .slider < >.frame < /** * (optional) wrapper width, specifies width of the slider frame. */ width: 880px; position: relative; font-size: 0; line-height: 0; overflow: hidden; white-space: nowrap; > .slides < display: inline-block; > li < position: relative; display: inline-block; /** * (optional) if the content inside the slide element has a defined size. */ width: 880px; >

script src="js/lory.min.js">/script> script> 'use strict'; document.addEventListener('DOMContentLoaded', function()  var slider = document.querySelector('.js_slider'); lory(slider,  // options going here >); >); /script>

Integration as a jQuery Plugin

script src="dist/jquery.lory.js">/script> script> 'use strict'; $(function()  $('.js_slider').lory( infinite: 1 >); >); /script>

Integration of multiple sliders on one page

script src="dist/lory.js">/script> script> 'use strict'; document.addEventListener('DOMContentLoaded', function()  Array.prototype.slice.call(document.querySelectorAll('.js_slider')).forEach(function (element, index)  lory(element, >); >); >); /script>

prev	slides to the previous slide
next	slides to the next slide
slideTo	slides to the index given as an argument: (arguments: index )
returnIndex	returns the index of the current slide element
setup	Binds eventlisteners, merging default and user options, setup the slides based on DOM (called once during initialisation). Call setup if DOM or user options have changed or eventlisteners needs to be rebinded.
reset	sets the slider back to the starting position and resets the current index (called on Resize event)
destroy	destroys the lory instance by removing all lory specific event listeners

slidesToScroll	slides scrolled at once	default: 1
infinite	like carousel, works with multiple slides. (do not combine with rewind)	default: false (number of visible slides)
enableMouseEvents	enabled mouse events	default: false
rewind	if slider reached the last slide, with next click the slider goes back to the startindex. (do not combine with infinite)	default: false
rewindPrev	if slider is on the first slide, with prev click the slider goes to the last slide. (do not combine with infinite)	default: false
slideSpeed	time in milliseconds for the animation of a valid slide attempt	default: 300
rewindSpeed	time in milliseconds for the animation of the rewind after the last slide	default: 600
snapBackSpeed	time for the snapBack of the slider if the slide attempt was not valid	default: 200
ease	cubic bezier easing functions: http://easings.net/de	default: ‘ease’
initialIndex	the slide index to show when the slider is initialized	default: 0
classNameFrame	class name for slider frame	default: ‘js_frame’
classNameSlideContainer	class name for slides container	default: ‘js_slides’
classNamePrevCtrl	class name for slider previous control	default: ‘js_prev’
classNameNextCtrl	class name for slider next control	default: ‘js_next’
classNameDisabledPrevCtrl	class name for slider previous control then disabled	default: ‘disabled’
classNameDisabledNextCtrl	class name for slider next control then disabled	default: ‘disabled’

before.lory.init	fires before initialisation (first in setup function)
after.lory.init	fires after initialisation (end of setup function)
before.lory.slide	fires before slide change | arguments: currentSlide, nextSlide
after.lory.slide	fires after slide change | arguments: currentSlide
before.lory.destroy	fires before the slider instance gets destroyed
after.lory.destroy	fires after the slider instance gets destroyed
on.lory.resize	fires on every resize event
on.lory.touchstart	fires on every slider touchstart event
on.lory.touchmove	fires on every slider touchmove event
on.lory.touchend	fires on every slider touchend event

Please, do not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests. You’ve got much better chances of getting your question answered on StackOverflow where maintainers are looking at questions tagged with loryJS .

StackOverflow is a much better place to ask questions since:

• There are hundreds of people willing to help on StackOverflow
• Questions and answers stay available for public viewing so your question / answer might help someone else
• The StackOverflow voting system assures that the best answers are prominently visible.

To enforce this rule will be systematically closing all the issues that are requests for general support and redirecting people to StackOverflow.

• Chrome
• Safari
• FireFox
• Opera
• Internet Explorer 10+
• Internet Explorer 9 (graceful, without transitions + classlistp)
  • graceful, without transitions
  • you need to polyfill classlist (https://github.com/eligrey/classList.js/)

  Copyright © 2015 Maximilian Heinz, contributors. Released under the MIT License

  About

  ☀ Touch enabled minimalistic slider written in vanilla JavaScript.

  Источник

  Saved searches

  Use saved searches to filter your results more quickly

  You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

  A very simple jQuery slider with callback support

  License

  colinrotherham/touch-slider

  This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

  Name already in use

  A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

  Sign In Required

  Please sign in to use Codespaces.

  Launching GitHub Desktop

  If nothing happens, download GitHub Desktop and try again.

  Launching GitHub Desktop

  If nothing happens, download GitHub Desktop and try again.

  Launching Xcode

  If nothing happens, download Xcode and try again.

  Launching Visual Studio Code

  Your codespace will open once ready.

  There was a problem preparing your codespace, please try again.

  Latest commit

  Git stats

  Files

  Failed to load latest commit information.

  README.md

  1. Swipe or change slide by pressing the next/previous buttons
  2. Markers below the slider show which slide is active*
  3. Fully responsive + flexible, no reliance on JavaScript to resize
  4. GPU accelerated where available (i.e. CSS Translate/Transition)
  5. Optionally provide a callback to run after each transition

  * e.g. Styled as the little dots, iOS-style

  By default, the slider has a three-second delay, then you’ll get a wait time of five seconds per slide and a 400ms transition time.

  For modern browsers (e.g. Chrome, Safari, Firefox, Opera), Touch Slider uses super smooth GPU-accelerated CSS Translate + Transition. Where support isn’t available (e.g. IE7, IE8) jQuery animations are used instead.

  Touching to move slide (either flicking or following your finger) is available in Android 2.2+, iOS 5.1+, IE10+

  Starting the slider (as shown in launcher.js):

  new TouchSlider( slider: '.slider' >).init();

  Adjusting how many slides to step by when moving next/prev

  new TouchSlider( slider: '.slider', step: 2 >).init();

  Alternatively, set a callback to run after each transition:

  new TouchSlider( slider: '.slider' >, function(event)  /* Do something */ >).init();

  Alternatively, set a callback to run before and after each transition:

  new TouchSlider( slider: '.slider' >, function(event)  /* After transition */ >, function(event)  /* Before transition */ >).init();

  Alternatively, override the default configuration:

  new TouchSlider( slider: '.slider', delay: 3000, interval: 5000, time: 600, canLoop: true, isManual: false >).init();

  …or override timings of an already-running slider:

  var slider = new TouchSlider( slider: '.slider' >); slider.init(); slider.updateConfig( delay: 3000, interval: 5000, time: 600 >);

  Instead, Touch Slider can be installed via npm install touch-slider and used as a module:

  var slider = new (require('touch-slider'))( slider: '.slider' >); slider.init(); slider.updateConfig( delay: 3000, interval: 5000, time: 600 >);

  About

  A very simple jQuery slider with callback support

  Источник

  Читайте также:  Java spring rest upload file