PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Fri Sep 25, 2020 10:34 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 40 posts ]  Go to page 1, 2, 3  Next
Author Message
PostPosted: Tue Jun 02, 2015 10:05 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Tue Jun 02, 2015 10:19 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
?

_________________


Top
 Profile  
 
PostPosted: Tue Jun 02, 2015 10:20 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Tue Jun 02, 2015 10:40 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Tue Jun 02, 2015 11:08 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
Looks like it's all in the usage section. http://kenwheeler.github.io/slick/#getting-started

_________________


Top
 Profile  
 
PostPosted: Tue Jun 02, 2015 11:13 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Tue Jun 09, 2015 8:52 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
I really don't get it.
This is it. All I See on screen is:
Syntax: [ Download ] [ Hide ]
// Add the new slick-theme.css if you want the default styling
your content
your content
your content
 


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

Syntax: [ Download ] [ Hide ]
<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.


Top
 Profile  
 
PostPosted: Tue Jun 09, 2015 9:14 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
Have tried this too:

Syntax: [ Download ] [ Hide ]
<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:
File comment: Here is the full file list.
slider.rar [441.03 KiB]
Downloaded 401 times

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Top
 Profile  
 
PostPosted: Tue Jun 09, 2015 9:48 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
You don't have autoplay set. This works exactly as expected:
Syntax: [ Download ] [ Hide ]
<!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>
 

_________________


Top
 Profile  
 
PostPosted: Tue Jun 09, 2015 9:50 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Tue Jun 09, 2015 9:51 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
This is it at the moment.
But as I say, it's just very basic text on screen. No formatting what so ever.
Syntax: [ Download ] [ Hide ]
<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.


Top
 Profile  
 
PostPosted: Tue Jun 09, 2015 10:02 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
This works perfectly:
Syntax: [ Download ] [ Hide ]
<!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>

_________________


Top
 Profile  
 
PostPosted: Tue Jun 09, 2015 10:06 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
How? If you see what I See, how does it work??


Attachments:
File comment: I have zipped up my files. How does this work for you then???
slick.zip [443.07 KiB]
Downloaded 358 times

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Top
 Profile  
 
PostPosted: Tue Jun 09, 2015 10:07 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
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.

_________________


Top
 Profile  
 
PostPosted: Tue Jun 09, 2015 10:12 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
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.

_________________


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 40 posts ]  Go to page 1, 2, 3  Next

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 7 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group