Javascript Slideshows

Hello,

I’ve been recently making a website for free, to sharpen up my skills. One of the things I need to implement on the site is a slideshow.

I understand to make a slideshow I will need to know JQuery/Javascript, and I specifically bought a book which taught both of those. It’s a brilliant book, but It will take me a long time to learn how to do it. I tried to just skip straight to the slideshow part, but none of it was making sense (as I skipped half the book) and I couldn’t alter it enough/get it to work by using the code there.

I also took the JavaScript Learnable Course, which is also brilliant but still, I’m not getting anywhere near how to make a slideshow.

Basically, I am asking on how I can quickly make a functioning full width slider, without learning JavaScript (I will learn it, but It’s really holding me back right now). Is there a way of doing it in HTML5/CSS3?

My skills are limited, I have an intermediate understanding of HTML5/CSS3, but all I know about in JavaScript is loops, if statements, how to make alerts etc.

Thank you for your time!

It’s possible, but you should consider the accessibility of doing s. Carousels already have really terrible acccessibility - http://www.sitepoint.com/unbearable-accessible-slideshow/

If you don’t want to reinvent the wheel, I recommend you using a pre-made plugin. Such as slick slider. It’s great; my work uses it. I’ve seen many members also recommend this.

Perfect, I will use this then.

Thanks!

Having some problems with setting it up, I think I may have just done something stupid but I believe I followed the tutorial right.

Basically, it looks like this (nothing much happening):

<html>

<head>
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>

<body>

    <div class="your-class">
        <div><img src="images/downloadd.jpeg" alt="plastering"></div>
        <div><img src="images/download.jpeg" alt="test"></div>
        <div><img src="images/plastering3.jpeg" alt="testtwo"></div>
    </div>

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

</html>

And in the same folder as the index.html, I have the “slick” folder from the “slick-1.5.0” folder I uncompressed.

Sorry If I just made some stupid mistake somewhere.

Any chance of getting this live? We need to ensure you are actually linking the files properly.

Did you straight up just copy/paste everything? Did you read what you were pasting? Look at this…

$(document).ready(function(){
              $('.your-class').slick({
                  setting-name: setting-value
              });
          });

setting-name:setting-value? Surely you see how that’s just an example, right? That’s an error right there. Their example demo said it should look SOMETHING like their code :slight_smile: .

THe most likely issue is that your CSS/JS files aren’t actually linking to the scripts.

1 Like

I’ll get a version online now.

I looked at the rest of it, but when I saw the JavaScript I literally just copied and pasted without looking at it. I don’t know anything about it, so I just assumed it was right.

Hi,

As Ryan says, a (non) working demo would help immensely.

Sorry for the long wait. I managed to get a version online.

http://mtrprotec.com/

As Ryan pointed out, it isn’t going to do anything until you replace
setting-name : setting-value
with something(s) from here

Here’s a demo to give you an idea of how you need to set this up.
In this case I’m requiring the Slick assets via a CDN. You can see this under the “External Resources” tab on the left.

Hi Pullo,

I used some of your code and adapted it slightly for different timings, and it’s half working. The slideshow is working, and is automatic, but the dots don’t seem to be there, and also the slideshow randomly stops and you have to leave and go back to the page to start it again, unlike the example you showed me.

http://mtrprotec.com

The slick-theme.css file was causing problems. Try this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Slick Demo</title>
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css"/>
    <style>
      ul{
        width:850px;
      }
    </style>
  </head>
  <body>

    <ul class="slider">
      <li><img src="http://mtrprotec.com/images/plastering3.jpg"></li>
      <li><img src="http://mtrprotec.com/images/plastering3.jpg"></li>
      <li><img src="http://mtrprotec.com/images/plastering3.jpg"></li>
    </ul>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="http://mtrprotec.com/slick/slick.min.js"></script>
    <script type="text/javascript">
      $('.slider').slick({
        dots: true,
        autoplay: true,
        autoplaySpeed: 1000,
        infinite: true,
        speed: 200,
        slide: 'div',
        cssEase: 'linear'
      });
    </script>
  </body>
</html>

Only two problems now. Firstly it seems to have created a random extra margin on the left (not sure why of this, probably something I did), and as soon as you hover over it, it stops completely unless your refresh the page.

Also a problem I have had for a while is that my web pages seem to have a very small margin all around them. Do you know how I could get rid of this?

Thanks

Try setting the width of the slider in the CSS. Does that help?

If you don’t want it to pause at all, set:

pauseOnHover: false

Perhaps:

body{ margin: 0; }
2 Likes

Both perfect. I don’t know why I didn’t think of the second one myself :stuck_out_tongue:

It is currently:

.slider  {
    width: 100%;
    margin: 0 auto;
    height: 400px;
}

Yeah, the width:100% is probably not perfect. Can you set that to something less drastic, like 800px?

Even more ideal than a width, what about max-width? It’ll act like width:100% but stop at a certain point.

Well, I was wanting the slideshow to extend across the whole page, with a series of wide photos so there is lots of room for text on them.

Isn’t it best to work with percentages, as they will scale up and down as the device is smaller/bigger?

I’m off to bed. I’ll leave this one to Ryan as he is far better at CSS.

1 Like