SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    jQuery Slider (From Scratch)

    Hi folks,

    I needed to create a slider from scratch.
    It looks like this,

    slider.jpg

    The picture is self explanatory.

    Do you know a good tutorial (URL) that does this?
    How about tips?

    Or how about a ready made plugin that already does this, and also responsive?
    If you know one can you point me to that plugin?

    Any help is appreciated.

    Thanks in advance.
    I Love coding...
    Don't click this link.

  2. #2
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    By the way is this called Slider? or Carousel?
    Correct me If I'm wrong and I called it slider?
    I Love coding...
    Don't click this link.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    It's called either. But the image isn't self explanatory. You haven't said what happens when an arrow is clicked. There are various possibilities.

  4. #4
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @ralph.m ;

    1. The two boxes are will contain images.
    2. When left arrow is click the two boxes will move to the left.
    3. When right arrow is click the two boxes will move to the right.
    4. Images must be no limit, because it's fetching the images from Database.
    5. Responsive, when I minimize the Internet browser, it should fit the page and remove one box to fit the page.

    Actually the original idea is, it suppose to have 8 boxes and when minimize reduces to 4 boxes and then 2 boxes.
    But to make it simple, I want to start with two boxes only.

    Okay I will start coding the CSS for boxes and arrow heads...
    I Love coding...
    Don't click this link.

  5. #5
    SitePoint Addict
    Join Date
    Sep 2005
    Posts
    267
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Have you tried NivoSlider? It's responsive too and comes with lots of effects. Only it displays one picture at a time though.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    The reason I asked was that, if you will always just have two boxes showing, and that two new boxes will appear each time you click an arrow, then there are lots of sliders ready made for that. May favorite is bxSlider, which has a lot of great features, including swiping on tablets/phones and responsiveness built in.

  7. #7
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @ralph.m ;

    Thanks ready made sliders/carousel will save me time.
    I will check that.
    Thanks again.
    I Love coding...
    Don't click this link.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •