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:

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

Post by simonmlewis »

No I don't think you realised what I am facing here.

NOTHING is working at all. Look at the attached. Whether I had auto play or not, I should at least have the styling and DIVs up on screen, and the dots below it.
Attachments
ss.png
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 »

Have you checked that your CSS and JavaScript is loading? Refreshed them?
The exact code I'm using here:

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: 1000,
                slidesToShow: 4,
                slidesToScroll: 4,
                responsive: [
                    {
                    breakpoint: 1024,
                        settings: {
                            autoplay: true,
                            speed: 300,
                            slidesToShow: 3,
                            slidesToScroll: 3,
                            infinite: true,
                            dots: true
                        }
                    },
                    {
                        breakpoint: 600,
                        settings: {
                            autoplay: true,
                            speed: 300,
                            slidesToShow: 2,
                            slidesToScroll: 2
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            autoplay: true,
                            speed: 300,
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    }
                ]
            });
        });
    </script>
</body>
</html>
The output:
Attachments
Screen Shot 2015-06-09 at 11.20.42 AM.png
Screen Shot 2015-06-09 at 11.20.54 AM.png
Screen Shot 2015-06-09 at 11.18.44 AM.png
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 »

The CSS is both loading, i see it in Web Developer "Edit CSS" in the footer.
And Javascript loads:
file:///C:/Users/Simon/Desktop/slider/slick/slick.min.js

You have my JS files in the ZIP I sent. I just do not get it.

I assume it's up to us to change the styling of the DIVs as they slide anyway.
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 »

If you could ZIP what you have done, and send over, I'll see what happens this end.
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 wrote:You have my JS files in the ZIP I sent.
Indeed I do, and it's working fine for me. You didn't go editing Slick itself or anything? I didn't copy those because I already had Slick. Your index file works without issue. I just fixed the indentation and added autoplay and speed for the breakpoints. Have you tried what I posted back? Is that working at all?
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 »

Yep, sure thing.
Attachments
simon.zip
(37.08 KiB) Downloaded 342 times
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 »

What I posted back as a screenshot, is how it looks when your code.
No I haven't touched CSS or JS. And I used your code. Hence why I am utterly stumped.
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'm losing the will to live here - look at the attached.
I have touched nothing. I extracted ur files to my desktop, dragged the html to FF and there you go.
How it looks with Outline Border Elements on
How it looks with Outline Border Elements on
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 »

Definitely something on your end, then, and not in the code itself. Clear cache, disable browser addons, try private mode / different browser.
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 »

ss.png
This is "In-Private Browsing", and still it does this.
I do use adblocker, but then if that blocks this, then there will be no point having it anyway.
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 »

OR there any others that are good?
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 »

Here's a question: have you actually run this from a web server rather than using file:/// ?
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 »

You mean, have I hosted it live to see it like that?
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 »

Or run it from WAMP/XAMPP/whatever. Can be on your local machine.
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 »

Good thinking. Hold on. Give me 2 mins and I'll write back after uploading to a local site.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply