How to create a slider/carousel to display products?

Sir_Arcturua · June 8, 2014, 7:47pm

Good day,

I have a bookstore website made with HTML, PHP and CSS.
I’d like to do something like this site:
http://www.mosso.cl/catalogo/novios/

In the lower part there is a band showing products (6 different), and with an arrow in each side for showing others.
How can you do this effect of changing part of the page without reload the whole page?

I’d like to have something similar in my website for showing the last books or publishers we work with.

Thanks a lot!!

James_Hibbard · June 8, 2014, 8:43pm

Hi,

This is known as a slider or carousel.
The animation etc is acheived using JavaScript (and sometimes the jQuery library).

My favourite carousel at the moment is slick.
The multiple items demo seems to do pretty mch what you want.

HTH

Sir_Arcturua · June 8, 2014, 8:55pm

Thanks a lot for your answer. I will check your suggestion right now!

Sir_Arcturua · June 8, 2014, 10:46pm

Hi Pullo,

I have reviewed the information, my main issue is I have never used Java before. So, I am following an online course in order I can have a better understanding of this library.
In the meantime, I’d appreciate if you could help me to clarify the basic script, it is, how does it work in terms of three boxes (what each one does):

&lt;div class="your-class"&gt;

    &lt;div&gt;your content&lt;/div&gt;
    &lt;div&gt;your content&lt;/div&gt;
    &lt;div&gt;your content&lt;/div&gt;
&lt;/div&gt;

Should I define here the format of my slider or is it made by the CSS provided (slick.css)?

&lt;script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="slick/slick.min.js"&gt;&lt;/script&gt;

What is jQuery and the requested 1.7 + version? Should I do something?

&lt;script type="text/javascript"&gt;

    $(document).ready(function(){
        $('.your-class').slick({
            setting-name: setting-value
        });
    });
&lt;/script&gt;

What is the purpose of $(document).ready(function()?
Why in this case functions are starting with $?
Also, your-class here is related to the class name in the HTML code?

Thanks a lot!!

James_Hibbard · June 9, 2014, 9:40am

Hi,

So that’s a lot of questions

It’s JavaScript.
Java is a completely separate programming language which was created at Sun Microsystems (now Oracle).
See here if you want to find out more: http://stackoverflow.com/questions/245062/whats-the-difference-between-javascript-and-java

Well that’s where your products would go.
It’s not limited to three items.

Slick provides a stylesheet which you will need to include.
Other than that, you should style your slider as you require.

It’s a library, written in JavaScript.
There are various versions available - Slick requires 1.7 or higher.

Yes. Link to the library.

It fires as soon as the DOM is ready.
This way you can include your JS in your page wherever you like (between <script> tags), but it won’t execute until the page has loaded.
If you put your JavaScript at the bottom of your page, before the closing </body> tag, then it’s not necessary.

$ is just a shortcut for jQuery.
See here: http://stackoverflow.com/questions/10787342/why-does-jquery-have-dollar-signs-everywhere

The “your-class” class name, is a class name of your choosing. It can be used to style your slider.

James_Hibbard · June 9, 2014, 10:22am

So here’s how to build your slider.

Download the plugin from here: https://github.com/kenwheeler/slick/archive/master.zip

Extract the files to your computer. This should give you a folder called slick-master.
If you open this folder, you will see a second folder called “slick”.
Copy this to your desktop.

Make a new file on your Desktop. Name it index.html, then copy and paste the following code into it:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  </body>
</html>

The line at the bottom will fetch the jQuery library from Google’s CDN. Here we are loading version 1.9.1

Now we need to include the assets that come with slick.
We need to add slick.css to the <head> part of our page and add slick.js before the closing <body> tag, after the jQuery library.
This gives us:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  </head>
  <body>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>
  </body>
</html>

Ok, now for the slider.
Let’s add the suggested markup to the page and initialize the slider:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  </head>
  <body>
    <div class="your-class">
      <div>your content</div>
      <div>your content</div>
      <div>your content</div>
    </div>
        
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>
    <script>
      $(document).ready(function(){
        $('.your-class').slick({
          //setting-name: setting-value
        });
      });
    </script>
  </body>
</html>

This will give us a working slider, but one which doesn’t do much.

Let’s change “your-class” into something sensible, then add some more slides, as well as some styles:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <style>
      body{
        background-color: #3498d8;
      }
      .slider{
        background-color: white;
        margin: 50px auto;
        width: 900px;
        height: 500px;
      }
      div{
        height: 100%;
      }
      h3 {
        color: #3498d8;
        font-size: 50px;
        position: relative;
        top: 35%;
        left: 50%;
       }
    </style>
  </head>
  <body>
    <div class="slider">
      <div><h3>1</h3></div>
      <div><h3>2</h3></div>
      <div><h3>3</h3></div>
      <div><h3>4</h3></div>
      <div><h3>5</h3></div>
      <div><h3>6</h3></div>
    </div>
        
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>
    <script>
      $(document).ready(function(){
        $('.slider').slick({
          //setting-name: setting-value
        });
      });
    </script>
  </body>
</html>

If you run this, then things will be looking a lot better.
Notice the arrows on the left and right of the slider to navigate.
You can also swipe between the slides on a touch device, or drag them from left to right with your mouse.

Now, you’re wanting to make a slide show of some products, so let’s initialize the slider with some options and adjust the CSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <style>
      body{
        background-color: #3498d8;
      }
      .slider{
        margin: 50px auto;
        width: 600px;
      }
      div{
        height: 100%;
      }
      h3 {
        background-color: white;
        height: 150px;
        width: 150px;
        color: #3498d8;
        font-size: 50px;
       }
    </style>
  </head>
  <body>
    <div class="slider">
      <div><h3>1</h3></div>
      <div><h3>2</h3></div>
      <div><h3>3</h3></div>
      <div><h3>4</h3></div>
      <div><h3>5</h3></div>
      <div><h3>6</h3></div>
    </div>
        
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>
    <script>
      $(document).ready(function(){
        $('.slider').slick({
          centerMode: true,
          centerPadding: '60px',
          dots: true,
          infinite: true,
          speed: 300,
          slidesToShow: 3,
          slidesToScroll: 1
        });
      });
    </script>
  </body>
</html>

Much better!

Now the last thing would be to add some images.
I’ve borrowed one from the site you linked to:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <style>
      body{
        background-color: #3498d8;
      }
      .slider{
        margin: 50px auto;
        width: 600px;
      }
      div{
        height: 100%;
      }
      p{
        text-align: center;
        font-size: 12px;
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="slider">
      <div>
        <img src="http://www.mosso.cl/wp-content/uploads/2013/11/TRG_RELOJ_AA140000222-150x150.png" />
        <p>Caption 1</p>
      </div>
      <div>
        <img src="http://www.mosso.cl/wp-content/uploads/2013/11/TRG_RELOJ_AA140000222-150x150.png" />
        <p>Caption 2</p>
      </div>
      <div>
        <img src="http://www.mosso.cl/wp-content/uploads/2013/11/TRG_RELOJ_AA140000222-150x150.png" />
        <p>Caption 3</p>
      </div>
      <div>
        <img src="http://www.mosso.cl/wp-content/uploads/2013/11/TRG_RELOJ_AA140000222-150x150.png" />
        <p>Caption 4</p>
      </div>
      <div>
        <img src="http://www.mosso.cl/wp-content/uploads/2013/11/TRG_RELOJ_AA140000222-150x150.png" />
        <p>Caption 5</p>
      </div>
      <div>
        <img src="http://www.mosso.cl/wp-content/uploads/2013/11/TRG_RELOJ_AA140000222-150x150.png" />
        <p>Caption 6</p>
      </div>
    </div>
        
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>
    <script>
      $(document).ready(function(){
        $('.slider').slick({
          centerMode: true,
          centerPadding: '60px',
          dots: true,
          infinite: true,
          speed: 300,
          slidesToShow: 3,
          slidesToScroll: 1
        });
      });
    </script>
  </body>
</html>

Job done

Here’s a demo.

Also, bear in mind that there are plenty of other options for you to try out on slick’s homepage.

Sir_Arcturua · June 9, 2014, 9:28pm

Hi Pullo,

Thanks a lot for your answer!!
I have been working the whole day reading about jQuery and testing your code.
Here the result in a test page:
http://www.libromania.cl/spanish/home_spanish_test.shtml

I have added the slider in the middle. It is not in autoplay but static for more easier troubleshooting.
Please help me with these questions:

I wrapped all slider in a container, but the show dots indicators are located out of its own container. Each container finishes with the gray horizontal line. As you can see, the show dots indicators are within the next container area and not where they should be (the horizontal grey line should be below them).
I have replaced the numbers within the slider with pictures. As you can see, all of them are “stuck” to the upper side, and also there is not the same distance among them (first and second are close, but other are more separated). Is it any way for center then vertically and also for keeping the same distance among them?

I really appreciate your help, thanks again!!!

James_Hibbard · June 10, 2014, 8:50am

Hey, no problem

First question: do you need or want the dots?

Second question: for me, the slider doesn’t work when I click the arrow to the right. Is this intended behaviour? (you said something about static mode)

Sir_Arcturua · June 10, 2014, 1:41pm

Hi Pullo,

Yeah, I’d like to have the dots.
And yes, arrows are not working, just for testing purposes.
Regarding the second question, I’d like our pictures look like the “model” http://www.mosso.cl/catalogo/novios/

Thanks a lot!!!

Sir_Arcturua · June 13, 2014, 8:19pm

Hi Pullo,

After researching during these days, I was able to fix the dots issue and also to have the pictures pretty well:
http://www.libromania.cl/spanish/home_spanish_test.shtml

One last question please. How could I have the pictures aligned vertically in the slider? I have tried with “vertical-align: middle” but it is not working.

Thanks a lot!!

James_Hibbard · June 15, 2014, 11:27am

Hi,

The slider is looking good now. Great job

The images look pretty much vertically aligned for me.
Did you fix this in the meantime, or do you need help with anything else?

Sir_Arcturua · June 15, 2014, 3:34pm

Hi Pullo,

Yes, it is working pretty well now.
Thanks a lot for your help, your instructions have been very helpful.

In the meantime I researched about vertical alignment and added these lines to the CSS file:

.slider img{
    padding: 10%;
    width: 80%;
    vertical-align: middle;
}

.slider a{
    vertical-align: middle;
    line-height:normal;
    display: inline-block;    
}

.slider div{
    height: 161px;
    line-height: 161px;
}

Applying to elements <div>, <a> and <img> for each of the images in the slider, for instance:


                  <div>
                    <a href="http://www.echo-lit.com" target=&#8221;_blank&#8221;>    
                        <img src="../images/logo_echolit.jpg" alt="Echo-Lit">
                    </a>
                  </div>

My only concern now is the vertical alignment worked only if the division is set with a fixed height, what is not pretty desirable. I’d prefer a percentage or something related to the screen size.
But if I do not fix this parameter, vertical alignment is not working, at least with this configuration.

Do you know any other way to vertically align without fix weight?

Thanks a lot!!

James_Hibbard · June 15, 2014, 3:40pm

Thanks for taking the time to let us know what worked for you

However, this is more of a CSS/positioning question and I’m not 100% sure of the answer.
You’ll stand a better chance of getting an answer to this if you post a new thread in the CSS forum.

Sir_Arcturua · June 15, 2014, 5:01pm

I see, thanks a lot!!

system · August 28, 2014, 11:28am

Hello!!!

Is how to turn that slider in vertical mode?

James_Hibbard · August 28, 2014, 7:01pm

You can do vertical slide shows with bxslider: http://bxslider.com/examples/vertical-slideshow

system · August 29, 2014, 12:27am

Thanks for the reply but not quite what I wanted …
I wanted the slick only vertically oriented…
I think doing this would have to do almost a new coding …

James_Hibbard · August 29, 2014, 6:24am

It will need rewriting anyway, in so far as there is not an option you can pass to the slider that will have it display vertically.
If you fancy having a go at implementing this, then I am quite happy to help.

okey · November 15, 2014, 8:23pm

Hi guys.
I have some problems with slick too, so I’m not going to create a new topic.

I think I did all markup right, there’s no errors in console… but it doesn’t show my images!
prev & next buttons are on the page but my images aren’t there!

Here’s my code:
–Code is removed–

The code is in rtl language, sorry about that. And the ID corresponding to slick is “customers-carousel”.

I struggled with this for a while but couldn’t realize the problem. I appreciate if someone could help me with this.

okey · November 16, 2014, 6:52am

Hello again.
Sorry, my mistake…
The script needed a little tweak and now the problem solved.
Next time I should work more, then post into topics

Thanks…