SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How to create a slider/carousel to display products?

    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!!

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,097
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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

  3. #3
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for your answer. I will check your suggestion right now!

  4. #4
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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):

    <div class="your-class">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
    </div>
    Should I define here the format of my slider or is it made by the CSS provided (slick.css)?


    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>
    What is jQuery and the requested 1.7 + version? Should I do something?


    <script type="text/javascript">
    $(document).ready(function(){
    $('.your-class').slick({
    setting-name: setting-value
    });
    });
    </script>
    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!!

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,097
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    So that's a lot of questions

    Quote Originally Posted by Sir_Arcturua View Post
    I have never used Java before.
    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/2...cript-and-java

    Quote Originally Posted by Sir_Arcturua View Post
    how does it work in terms of three boxes (what each one does):
    Well that's where your products would go.
    It's not limited to three items.

    Quote Originally Posted by Sir_Arcturua View Post
    Should I define here the format of my slider or is it made by the CSS provided (slick.css)?
    Slick provides a stylesheet which you will need to include.
    Other than that, you should style your slider as you require.

    Quote Originally Posted by Sir_Arcturua View Post
    What is jQuery and the requested 1.7 + version?
    It's a library, written in JavaScript.
    There are various versions available - Slick requires 1.7 or higher.

    Quote Originally Posted by Sir_Arcturua View Post
    Should I do something?
    Yes. Link to the library.

    Quote Originally Posted by Sir_Arcturua View Post
    What is the purpose of $(document).ready(function()?
    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.

    Quote Originally Posted by Sir_Arcturua View Post
    Why in this case functions are starting with $?
    $ is just a shortcut for jQuery.
    See here: http://stackoverflow.com/questions/1...gns-everywhere

    Quote Originally Posted by Sir_Arcturua View Post
    Also, your-class here is related to the class name in the HTML code?
    The "your-class" class name, is a class name of your choosing. It can be used to style your slider.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,097
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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:

    Code:
    <!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:

    Code:
    <!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:

    Code:
    <!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:

    Code:
    <!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:

    Code:
    <!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:

    Code:
    <!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.

  7. #7
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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/hom...ish_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!!!

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,097
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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)

  9. #9
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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!!!

  10. #10
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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/hom...ish_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!!

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,097
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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?

  12. #12
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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:

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

    Code:
                      <div>
                        <a href="http://www.echo-lit.com" target=”_blank”>    
                            <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!!

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,097
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Sir_Arcturua View Post
    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 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.

  14. #14
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I see, thanks a lot!!

  15. #15
    SitePoint Member
    Join Date
    Aug 2014
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello!!!

    Is how to turn that slider in vertical mode?

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,097
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    You can do vertical slide shows with bxslider: http://bxslider.com/examples/vertical-slideshow

  17. #17
    SitePoint Member
    Join Date
    Aug 2014
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ...

  18. #18
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,097
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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.


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
  •