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
    936
    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.
    Quality codes are optimized and tested...
    Click here for inspiration..

  2. #2
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    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?
    Quality codes are optimized and tested...
    Click here for inspiration..

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,206
    Mentioned
    456 Post(s)
    Tagged
    8 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
    936
    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...
    Quality codes are optimized and tested...
    Click here for inspiration..

  5. #5
    SitePoint Addict bronze trophy
    Join Date
    Sep 2005
    Posts
    318
    Mentioned
    5 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
    24,206
    Mentioned
    456 Post(s)
    Tagged
    8 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
    936
    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.
    Quality codes are optimized and tested...
    Click here for inspiration..


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
  •