Need a left<>right gallery slider - can it be done in CSS?
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?
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.
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.
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
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.
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
I can see CSS, JS and a gif file, but nothing to show how to actually write it.
Any clues?
Any clues?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
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
-
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
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"?
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.
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
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.
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.
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
Have tried this too:
Is as though there is a fundamental error entirely preventing this from working at all.
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>- 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.
All the best from the United Kingdom.
Re: Need a left<>right gallery slider - can it be done in CS
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
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!
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.
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
This is it at the moment.
But as I say, it's just very basic text on screen. No formatting what so ever.
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.
All the best from the United Kingdom.
Re: Need a left<>right gallery slider - can it be done in CS
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
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.
All the best from the United Kingdom.
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.
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.