Instagram feed in a slider

Highlighted
Excursionist
14 0 4

Hey guys,

Yet another challenge I'm stuck on today.

I'm trying to display my instagram feed on the homepage of my shop. To do this, I'm using a plugin called instafeed.js.

You can see it in action already on my home-page: https://7rueparadis.com password: suitoo

Now, I'd like to only display 3 images at the time instead of this huge list, and i'd like those images to be displayed in a slider so that users can scroll left and right to see more. I'd like to do this with slick

Here is how I call instafeed.js on index.liquid:

<script type="text/javascript">
  var userFeed = new Instafeed({
  get: 'user',
  userId: 1428376149,
  accessToken: '1428376149.8ad179e.d1544a7b969b4e888bd3cc5c3d455abe'
});
   
userFeed.run();
   
</script>

  
<div class="grid__item one--whole text-center instafeed" id="instafeed"></div>

I think to make into a slider, I'd have to add this to the script tag:

 after: function () {
        $('.instafeed').slick();
    }

However, that doesn't work! I think it may have something to do with the theme I'm using (Brooklyn), which already uses the slick slider to display the hero image at the top of this same page, but I'm really not sure..

 

Hope someone will know how to figure it out!

Thanks :)

0 Likes
Highlighted
Shopify Partner
33 0 8

Hi Diane,

I can offer you 1 year of free subscription for our Covet.pics app. You can choose gallery style, moderate images and connect images with products - all in shopify admin.

Feel free to install the app and send me details to dom @ spacesquirrel . net

Hope that helps.

Dom

1 Like
Highlighted
New Member
2 0 0

I've been trying to figure out the Instagram feed as well, thanks for the post. The work you put up help out! Thanks

0 Likes
Highlighted
Excursionist
14 0 4

@ Dom, I've jsut sent you an email! Thanks for your reply.

@Jose, not sure if you're talking to me or Dom, either way you're very welcome!

If anyone has any idea why slick & instafeed arent working together for me, I'd love to find out. Regardless, I've switched to covet.pics because of its clean look.

0 Likes
Highlighted
New Member
2 0 0

Hi Diane ! I have the same problem: slick & instafeed arent working together for me also

Do you find some decision?

If yes, please share with me some information! 

Thanks!

0 Likes
New Member
2 0 0

Hi Diane ! I have the same problem: slick & instafeed arent working together for me also

Do you find some decision?

If yes, please share with me some information! 

Thanks!

0 Likes
Highlighted
New Member
6 0 0

$(document).ready(function(){
setInterval(function() {
$('#instafeed').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
}
}
]
});
}, 10 * 100);
});

 

Set time then it will take some time to load the script then it will be working because both scripts will not work at the same time.

0 Likes