Page 1 of 3

Need a left<>right gallery slider - can it be done in CSS?

Posted: Tue Jun 02, 2015 10:05 am
by simonmlewis
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.

Re: Need a left<>right gallery slider - can it be done in CS

Posted: Tue Jun 02, 2015 10:19 am
by Celauran

Re: Need a left<>right gallery slider - can it be done in CS

Posted: Tue Jun 02, 2015 10:20 am
by simonmlewis
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.

Re: Need a left<>right gallery slider - can it be done in CS

Posted: Tue Jun 02, 2015 10:40 am
by simonmlewis
I can see CSS, JS and a gif file, but nothing to show how to actually write it.
Any clues?

Re: Need a left<>right gallery slider - can it be done in CS

Posted: Tue Jun 02, 2015 11:08 am
by Celauran
Looks like it's all in the usage section. http://kenwheeler.github.io/slick/#getting-started

Re: Need a left<>right gallery slider - can it be done in CS

Posted: Tue Jun 02, 2015 11:13 am
by simonmlewis
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"?

Re: Need a left<>right gallery slider - can it be done in CS

Posted: Tue Jun 09, 2015 8:52 am
by simonmlewis
I really don't get it.
This is it. All I See on screen is:
[text]// Add the new slick-theme.css if you want the default styling
your content
your content
your content
[/text]

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

Code: Select all

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

Re: Need a left<>right gallery slider - can it be done in CS

Posted: Tue Jun 09, 2015 9:14 am
by simonmlewis
Have tried this too:

Code: Select all

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

Re: Need a left<>right gallery slider - can it be done in CS

Posted: Tue Jun 09, 2015 9:48 am
by Celauran
You don't have autoplay set. This works exactly as expected:

Code: Select all

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

Re: Need a left<>right gallery slider - can it be done in CS

Posted: Tue Jun 09, 2015 9:50 am
by simonmlewis
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!

Re: Need a left<>right gallery slider - can it be done in CS

Posted: Tue Jun 09, 2015 9:51 am
by simonmlewis
This is it at the moment.
But as I say, it's just very basic text on screen. No formatting what so ever.

Code: Select all

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

Re: Need a left<>right gallery slider - can it be done in CS

Posted: Tue Jun 09, 2015 10:02 am
by Celauran
This works perfectly:

Code: Select all

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

Re: Need a left<>right gallery slider - can it be done in CS

Posted: Tue Jun 09, 2015 10:06 am
by simonmlewis
How? If you see what I See, how does it work??

Re: Need a left<>right gallery slider - can it be done in CS

Posted: Tue Jun 09, 2015 10:07 am
by Celauran
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.

Re: Need a left<>right gallery slider - can it be done in CS

Posted: Tue Jun 09, 2015 10:12 am
by Celauran
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.