PHP Developers Network
http://forums.devnetwork.net/

Need a left<>right gallery slider - can it be done in CSS?
http://forums.devnetwork.net/viewtopic.php?f=68&t=141379
Page 1 of 3

Author:  simonmlewis [ Tue Jun 02, 2015 10:05 am ]
Post subject:  Need a left<>right gallery slider - can it be done in CSS?

We have a slider on our homepage. You click the right or left arrows, and it loads up 5-6 images at a time.
This isn't one of the BIG IMAGE sliders, it's a bit like Netflix, where you can swipe it with your finger on tablet, or you click the arrows, and it shows a horizontal row of 5-7 at a time.

Our current incarnation of this only has clickable arrows, but causes other conflicts with a mobile gallery, so we want to change it.

Can anyone suggest some nice, perhaps even responsive, sliders.

I repeat: this is not to show one image at a time. IT's to slider across a load at a time. Maybe 150px wide per image.

Author:  Celauran [ Tue Jun 02, 2015 10:19 am ]
Post subject:  Re: Need a left<>right gallery slider - can it be done in CS

?

Author:  simonmlewis [ Tue Jun 02, 2015 10:20 am ]
Post subject:  Re: Need a left<>right gallery slider - can it be done in CS

Do you know what, I looked on that web site, and it looks perfect. But, in the Download, I see no HTML to show how to code it up.

Author:  simonmlewis [ Tue Jun 02, 2015 10:40 am ]
Post subject:  Re: Need a left<>right gallery slider - can it be done in CS

I can see CSS, JS and a gif file, but nothing to show how to actually write it.
Any clues?

Author:  Celauran [ Tue Jun 02, 2015 11:08 am ]
Post subject:  Re: Need a left<>right gallery slider - can it be done in CS

Looks like it's all in the usage section. http://kenwheeler.github.io/slick/#getting-started

Author:  simonmlewis [ Tue Jun 02, 2015 11:13 am ]
Post subject:  Re: Need a left<>right gallery slider - can it be done in CS

Oh yes I see. It's a breakdown of it all.

I'll certainly have a look at it. Could be the answer to our prayers.
Do you know if it works on ipad and phone, so can be "swiped"?

Author:  simonmlewis [ Tue Jun 09, 2015 8:52 am ]
Post subject:  Re: Need a left<>right gallery slider - can it be done in CS

I really don't get it.
This is it. All I See on screen is:
Syntax: [ Download ] [ Hide ]
// Add the new slick-theme.css if you want the default styling
your content
your content
your content
 


I expected at least the "your content" to be in sliding boxes. I must be really missing something here.

Syntax: [ Download ] [ Hide ]
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// Add the new slick-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</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>
$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

</script>

Author:  simonmlewis [ Tue Jun 09, 2015 9:14 am ]
Post subject:  Re: Need a left<>right gallery slider - can it be done in CS

Have tried this too:

Syntax: [ Download ] [ Hide ]
<html>
  <head>
  <meta charset="UTF-8">
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

  </head>
  <body>
  <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>
 
<div class="slider responsive">
                                        <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><h3>7</h3></div>
                                        <div><h3>8</h3></div>
                                </div>



  <script type="text/javascript">
  $('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});
  </script>
  </body>
</html>


Is as though there is a fundamental error entirely preventing this from working at all.

Attachments:
File comment: Here is the full file list.
slider.rar [441.03 KiB]
Downloaded 401 times

Author:  Celauran [ Tue Jun 09, 2015 9:48 am ]
Post subject:  Re: Need a left<>right gallery slider - can it be done in CS

You don't have autoplay set. This works exactly as expected:
Syntax: [ Download ] [ Hide ]
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Whatever</title>
        <link rel="stylesheet" href="/assets/js/slick/slick.css">
</head>
<body>
        <div class="wrap">
                <div class="slickety-slick">
                        <div>One</div>
                        <div>Two</div>
                        <div>Three</div>
                </div>
        </div>
        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="/assets/js/slick/slick.min.js"></script>
        <script>
        $(document).ready(function() {
                $('.slickety-slick').slick({
                        autoplay: true,
                        autoplaySpeed: 1000,
                        dots: false,
                        arrows: false
                });
        });
        </script>
</body>
</html>
 

Author:  simonmlewis [ Tue Jun 09, 2015 9:50 am ]
Post subject:  Re: Need a left<>right gallery slider - can it be done in CS

Auto what? Sorry but I have copied and pasted what they provided.
I am just so lost here. Normally things half work and you can spot the error. But literally NOTHING is happening.
Just a basic text. Not even a nice font!

Author:  simonmlewis [ Tue Jun 09, 2015 9:51 am ]
Post subject:  Re: Need a left<>right gallery slider - can it be done in CS

This is it at the moment.
But as I say, it's just very basic text on screen. No formatting what so ever.
Syntax: [ Download ] [ Hide ]
<html>
  <head>
  <meta charset="UTF-8">
  <title>My Now Amazing Webpage</title>
  <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="slider responsive">
                                        <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><h3>7</h3></div>
                                        <div><h3>8</h3></div>
                                </div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <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">
  $('.responsive').slick({
  dots: true,
  autoplay: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});
  </script>
  </body>
</html>

Author:  Celauran [ Tue Jun 09, 2015 10:02 am ]
Post subject:  Re: Need a left<>right gallery slider - can it be done in CS

This works perfectly:
Syntax: [ Download ] [ Hide ]
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Now Amazing Webpage</title>
    <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="slider responsive">
        <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><h3>7</h3></div>
        <div><h3>8</h3></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() {
            $('.responsive').slick({
                dots: true,
                autoplay: true,
                infinite: false,
                speed: 300,
                slidesToShow: 4,
                slidesToScroll: 4,
                responsive: [
                    {
                    breakpoint: 1024,
                        settings: {
                            slidesToShow: 3,
                            slidesToScroll: 3,
                            infinite: true,
                            dots: true
                        }
                    },
                    {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 2
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    }
                ]
            });
        });
    </script>
</body>
</html>

Author:  simonmlewis [ Tue Jun 09, 2015 10:06 am ]
Post subject:  Re: Need a left<>right gallery slider - can it be done in CS

How? If you see what I See, how does it work??

Attachments:
File comment: I have zipped up my files. How does this work for you then???
slick.zip [443.07 KiB]
Downloaded 358 times

Author:  Celauran [ Tue Jun 09, 2015 10:07 am ]
Post subject:  Re: Need a left<>right gallery slider - can it be done in CS

You will need to add autoplay and speed settings to the individual breakpoints, mind you. Just noticed that after playing with it in responsive design mode.

Author:  Celauran [ Tue Jun 09, 2015 10:12 am ]
Post subject:  Re: Need a left<>right gallery slider - can it be done in CS

Can you explain what specifically isn't working? Your code is missing $(document).ready(), which I've added in, and the code I posted works exactly as I would expect.

Page 1 of 3 All times are UTC - 5 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/