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

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post by Celauran »

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post by simonmlewis »

I can see CSS, JS and a gif file, but nothing to show how to actually write it.
Any clues?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post by Celauran »

Looks like it's all in the usage section. http://kenwheeler.github.io/slick/#getting-started
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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"?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Attachments
slider.rar
Here is the full file list.
(441.03 KiB) Downloaded 496 times
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post 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>
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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!
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post 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>
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post by simonmlewis »

How? If you see what I See, how does it work??
Attachments
slick.zip
I have zipped up my files. How does this work for you then???
(443.07 KiB) Downloaded 465 times
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post 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.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

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