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