Jump to content



Photo

I need a specific jQuery slider


  • Please log in to reply
3 replies to this topic

#1 Mr.XXIV

Mr.XXIV

    Shine bright like Iron Man.

  • Tech Issues Solved: 1
  • Joined: 30-April 11
  • Location: Durham, North Carolina
  • OS: OS X Yosemite
  • Phone: iPhone 5s

Posted 29 April 2014 - 23:33

Does anyone know where I can this? The circles are animated to time the next slide.

Attached Images

  • Screen Shot 2014-04-27 at 1.37.26 PM.png



#2 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 20
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 03 May 2014 - 13:05

I do remember this slider plugin but can't seem to find it either, it's not wowslider neither nivo slider :/

 

Of course this could be done with nivo slider or any other slider with svg icon animated dots or css animated dots(more complex with before and after elements or more children).



#3 +chorpeac

chorpeac

    NeoRequest Engineer

  • Joined: 21-March 02
  • Location: Northern Virginia
  • OS: Windows, Windows RT, Windows Phone, & iOS

Posted 03 May 2014 - 13:10

Also check into Twitter Bootstraps slider. It is very useful as well. TB uses jQuery, and you can include only what you want.



#4 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 20
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 03 May 2014 - 15:26

Since I was bored I made a css3 dot:

http://jsfiddle.net/n5k37/11/

 

Click on it to animate, it's animated clockwise and filling the dot, lemme create one too that makes the dot empty.

 

Change true/false to change the animation:

http://jsfiddle.net/n5k37/19/

 

This dot is resizable, just a matter of changing the size of .dot, and styleable, you can use background fills and rgba fills.

The dot has nice fallback support, the fill of it will just be invisible on older browsers and the dot will be a square instead. Though you can change the dot background to a rounded png file to fix that for older browsers.

 

 

Just made this because I was bored and needed something like this myself :p

 

And I added pause/resume stuff too: http://jsfiddle.net/n5k37/25/

 

Edit for clockwise/counterclockwise: http://jsfiddle.net/n5k37/28/

 

Edit: Cleaned up code: http://jsfiddle.net/n5k37/41/