jQuery Slider (From Scratch)

JavaScript
1

Hi folks,

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

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.

2

By the way is this called Slider? or Carousel?
Correct me If I’m wrong and I called it slider?

3

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

@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…

5

Have you tried NivoSlider? It’s responsive too and comes with lots of effects. Only it displays one picture at a time though.

6

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. :slight_smile:

7

@ralph_m ;

Thanks ready made sliders/carousel will save me time.
I will check that.
Thanks again.