Slider Content similar with goodhousekeeping.com?

support
1

Hey guys! I’m new to Hugo and SSG world (was spoiled too much by Wordpress CMS). Never knew static site could run so fast and Hugo is even faster than Jekyll in building page. Totally love it!

Currently I’m playing with Casper two theme, and I wonder if Hugo can insert content slider similar to goodhousekeeping.com posts?

I tried many sliders including slick, royalslider and woothemes flexslider, but none of them working well with “blind” insertion. What I mean with blind is: I followed their guide blindly and insert to Hugo HTML page.

I know hugo is a different platform, but considered I just learned this few days ago, I’m totally confused with how should I make slider to work with hugo.

Is there anyone here with experience in this area and willing to share? I’ll really appreciate your help!

what I’m trying to achieve is a content slider (in desktop view) that will automatically turn into a “list post” in mobile viewport.

example:

This is the common slider, but it will turn immediately into a list in mobile view:

2018-12-22_10-45-41
2018-12-22_10-45-41.jpg540×6852 514 KB

Is this possible to do it with Hugo? perhaps with combination of shortcodes inside MD file? Thanks in advance guys!

2

It is definitely possible, but Hugo doesn’t come with many “off-the-shelf” components that plug into any site the way WordPress has plugins. So you’ll need to build the HTML, CSS and JavaScript, or have someone do it for you.

If you search the forums folks have commented on slider components they’ve used.

1 Like
3

Dear Maiki, Thank you so much for helping! Yes I should build my own HTML CSS and JS. I could do it in plain HTML page, but strangely it’s not working with Hugo MD posts.

I have searched many solutions offered in the forum but none work well (or not what I want). I even tried to used the free js carousel/slider script from cssscript.com, and all result inside a single post view is broken.

I recreate them using very basic HTML + CSS + JS and it’s working. Perhaps I still haven’t tap into the Hugo environment yet. :slight_smile: It would be great if someone can point me to a link or resource for this specific matter. I can try to learn it and craft the code myself.

I tried to read the documentation and seriously honest it’s pretty confusing :stuck_out_tongue: :blush:

4

Hi there. Can you show us a code example of what you’ve tried?

1 Like
5

Hi!!

Let’s see… I will use slick as the example.

I placed the css inside header:

<link rel="stylesheet" type="text/css" href="//localhost:1313/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//localhost:1313/slick/slick-theme.css"/>

and the js before the body close:

<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="//localhost:1313/slick/slick.min.js"></script>

Then, inside my markdown file, I put this:

<script type="text/javascript">
$(document).ready(function(){
  $('.slickslide').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
  });

</script>

<div class="slickslide">
      <div><img src="/img/slide/test1.jpg"/></div>
      <div><img src="/img/slide/test2.jpg"/></div>
      <div><img src="/img/slide/test3.jpg"/></div>
      <div><img src="/img/slide/test4.jpg"/></div>
</div>

The result is a page with vertical images aligning together. I’ve tried with other slider scripts, some did give a different result (working but have strange location/placement). None of them give the same result shown in their examples or demos.

Perhaps I’m missing something very important here. But sadly I don’t know what it is.

6

Where are your CSS and JS files located?

Assuming you have them under the static folder, when you link to them, don’t include localhost:

<link rel="stylesheet" type="text/css" href="/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/slick/slick-theme.css"/>
<script type="text/javascript" src="/slick/slick.min.js"></script>
1 Like
7

thanks for the tips, but sadly it’s not working in my test. I’ll try to spot the problem after new year :slight_smile:
Merry Christmas and Happy New Year!!

8

Update: Yes it working well now! thank you, zwbetz!!

Okay, so I’ve figured out how to make slider work with hugo template, but now I’m searching for slider script that will work similar to that Housekeeping site. Anyone know what slider script is it?

The slider is smart enough to serve two type of contents in different viewport. In desktop view, we will see the slider “packed” into one and we can play with the slides with next/prev button.

while in the mobile view, the script somehow will disable the slider and “unpack” the html content slide and serve it as a lengthy list (no more slider).

Will greatly appreciate your input on this, and if possible please kindly point me to a link for it (if it’s available to download or purchase).

Thanks in advance guys!! :blush: have a greaaat New Year 2019! :tada::tada:

9

:+1:

Another option is to make it yourself using CSS media queries.

10

haha, that’s soo true! But if only I have that skill set :sweat_smile: sadly I’m a beginner in coding.

since I don’t have that skill, I was trying to find a ready-made script for this purpose. I can do light modification but not building it from scratch.

But thanks for your suggestion, that’s indeed a good option to explore. I’ll try to dig further about how to build custom css media queries for ready-made slider. :+1: