Git Product home page Git Product logo

heartcode / 360-image-slider Goto Github PK

View Code? Open in Web Editor NEW
225.0 225.0 107.0 14.94 MB

The 360 Image Slider was a experimental project, which I worked on when I was writing a javascript tutorial for .net Magazine issue 224.The tutorial was pretty well received, so I decided to make it open source, and create a git repository to allow others to collaborate and help to make it awesome :)

Home Page: http://heartcode.robertpataki.com/360-image-slider/

CSS 24.18% JavaScript 75.82%

360-image-slider's People

Contributors

heartcode avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

360-image-slider's Issues

Swipe Up/Down On Mobile

Thank you for building this great tool. I love it.

How do I go about getting the user to swipe up/down to scroll on mobile?

Right now when I swipe up/down, it rotates the image the same as swiping left/right.

I appreciate it.

A bit clunky on right to left drag with few images

Hello, I was trying to use this great script with a lower number of images (15-20) and noticed that dragging from right to left was a bit clunky (while left to right worked beautifully.

I realized the problem was the Math.ceil used in the trackPointer function, with negative numbers it doesn't produce the expected output (this doesn't occur when you're using many more images, of course).

A simple if using Math.floor for negative numbers does the trick and everything works just fine now.

if (pointerDistance > 0) {
endFrame = currentFrame + Math.ceil((totalFrames - 1) * speedMultiplier * (pointerDistance / $container.width()));
} else {
endFrame = currentFrame + Math.floor((totalFrames - 1) * speedMultiplier * (pointerDistance / $container.width()));
}

IE Issue - Browser refresh

I noticed that in IE8, if you click the browser refresh once the slider has initially loaded, the slider stalls at the preloader and is unable to reload the images. I've only noticed this issue in Internet Explorer.

This image slider is awesome! Thank you so much for sharing!

Rotation without click but mousehover

Hello! Very good code!!!!!
Only a question! Is it possible to active the images movements without mouse click but with mouse hover?

Thank you so much!

Mark

Left Right Arrows

Hello it's a nice plugin for 360 view but I need some buttons left and right and When you click on it it do same when you drag how can I add buttons. Thank you for your helping :)

Use for anmition without loop possible?

Is it possibble to prevent the loop to use the script for animation?
So you have to swipe forward and backward without any loop, but a swipe which ends at the endFrame or startFrame.
How to change the Source?

Multi instance mode

At the moment the code handles only one instance of the 360 slider. It would be nice if users could create multiple instances on the same page.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.