How to make a mutliple-items slider?

I have designed this interface in Photoshop and coded it using html and css, but I have hard time coding the slider since I’m a beginner in Javascript and jQuery. So, can you please tell me how to make the slider works using javascript or jquery from scratch?

Here is the code for the slider part in case you need it.
HTML Part

<div class="slider container clearfix">
   <div class="slider-content">
    <ul class="slider-images clearfix">
        <li class="effect2">
        <img src="img/1.jpg" alt="">
        <div class="caption"><a href="#">Mark zuckerberg and priscilla chan make 75M donation to san francisco hospital</a></div>
        </li>
        <li>
        <img src="img/2.jpg" alt="">
        <div class="caption"><a href="#">How to unlock android tablet after too many pattern attempts</a></div>
        </li>
        <li>
        <img src="img/3.jpg" alt="">
        <div class="caption"><a href="#">How to uninstall Ubuntu on dual boot Windows XP using Windows only</a></div>
        </li>
    </ul>
    <ul class="slider-counter">
        <li><a href="#" class="active-counter"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
    </div> <!-- slider-content -->
    <div class="behind-slider1"></div>
    <div class="behind-slider2"></div>
</div> <!-- slider -->

And here is the CSS Part

/*======================================================
  <.Slider> 
======================================================*/

/*====== <start> Shadow Effect (Page fold effect) =======*/
.slider-images li
{
    position: relative;
    z-index: 1;
}
.slider-images li:before, .slider-images li:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #555;
  -webkit-box-shadow: 0 15px 10px #555;
  -moz-box-shadow: 0 15px 10px #555;
  box-shadow: 0 15px 10px #555;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);

}
.slider-images li:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
/*====== < end > Shadow Effect (Page fold effect) =======*/
.slider{
    margin-bottom: 50px;
}
.slider-content{
    background: white;
    border: 1px solid #c3c3c3;
    box-sizing: border-box;
    padding: 1.404%;
}
.slider-images li{
    position: relative;
    width: 31.79%;
    height: 230px;
    margin-right: 2.24%;   
    float: left;
}
.slider-images li:last-child{
    margin: 0;
}
.slider img{
    width: 100%;
    height: 230px;
}
.caption{
    position: absolute;
    bottom: 0;
    padding: 7px 10px;
    background: rgba(0,0,0,0.5);
    color: white;
    font-size: 1.125em;
    line-height: 1.5em;
}
.slider-counter{
    text-align: center;
    margin-top: 15px;
}
.slider-counter li{
    display: inline-block;
}
.slider-counter a{
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: #AFAFAF;
    margin-right: 10px;
}
.slider-counter .active-counter{
    background: #DD2F2F;
}

/** styling the 2 boxes behind the slider **/
.behind-slider1, .behind-slider2{
    border: 1px solid #c3c3c3;
    border-top: 0;
    height:  2px;
    background: #DFDFDF;
    width: 99.3%;
    margin: 0 auto;
}
.behind-slider2{
    width: 98.8%;
}


/*======================================================
  </.Slider> 
========================================================*/

Hi,

Do you have any preference about the slider you wish to use, or do you just want a slider that works?

I just want it to work smoothly with my design.
Here is an example (check out the second slider labeled “multiple-items”): http://kenwheeler.github.io/slick/#demos

That’s exactly the slider I would have recommended. Where are you having trouble implementing it?

Ok, presuming you don’t know where to start, you need a page.
In this page you need to include the jQuery library and the files for the slider:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Slider</title>
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" />
  </head>
  <body>

    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
  </body>
</html>

I’m pulling them in from a CDN. You’ll want to download them and include them locally.

Next we need some markup:

<h2>Slider demo</h2>
<div class="slider fade">
  <div>
    <div class="image">
      <img src="http://kenwheeler.github.io/slick/img/fonz1.png"/>
    </div>
  </div>
  <div>
    <div class="image">
      <img src="http://kenwheeler.github.io/slick/img/fonz2.png"/>
    </div>
  </div>
  <div>
    <div class="image">
      <img src="http://kenwheeler.github.io/slick/img/fonz3.png"/>
    </div>
  </div>
</div>

Something like this’ll do. Yours may vary.

Finally, we need to initialize the slider with whatever options are desired:

$('.slider').slick({
  dots: true,
  autoplay: true,
  autoplaySpeed: 1000,
  infinite: true,
  speed: 500,
  slide: 'div',
  cssEase: 'linear'
});

All of this gives us:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Slider</title>
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" />
    <style>
      .slider{
        width: 560px;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <h2>Slider demo</h2>
    <div class="slider fade">
      <div>
        <div class="image">
          <img src="http://kenwheeler.github.io/slick/img/fonz1.png"/>
        </div>
      </div>
      <div>
        <div class="image">
          <img src="http://kenwheeler.github.io/slick/img/fonz2.png"/>
        </div>
      </div>
      <div>
        <div class="image">
          <img src="http://kenwheeler.github.io/slick/img/fonz3.png"/>
        </div>
      </div>
    </div>

    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
    <script>
      $('.slider').slick({
        dots: true,
        autoplay: true,
        autoplaySpeed: 1000,
        infinite: true,
        speed: 500,
        slide: 'div',
        cssEase: 'linear'
      });
    </script>
  </body>
</html>

Here’s a demo.

I hope that helps.

Thx man, but I wanted the multiple-items slider because that’s what fits my design.
can you please tell me how to build it?

What do you mean, multiple items? Can you give an example?

I already gave you an example but it looks like you didn’t notice it.

Oh yeah, so you did.
Well, if you look at this link then you can see the multiple items demo in second place.
If you read my previous relpy I have already given you enough information to implement this. Why not have a try to do it yourself and let us know if you get stuck.

I have tried but nothing works.
Here are my trials that didn’t work http://jsfiddle.net/14d6qn65/11/ , http://jsfiddle.net/14d6qn65/12/

The first one seems to be working for me (although you’ll probably want to style it differently so the pictures aren’t so squashed).

Here’s how you can do that.

HTML:

<div class="slider">
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
  </div>
</div>

JS:

$('.slider').slick({
    slidesToShow: 3,
    slidesToScroll: 3,
    dots: true,
    infinite: true,
    cssEase: 'linear'
});

CSS:

.slider {
  width: 650px;
  margin: 0 auto;
}

img {
  width: 200px;
  height: 200px;
}

New demo

You’re awesome man really don’t know how to thank you.

No problem. Happy to help : )

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.