I am trying to create a page that shows a slideshow of an instagram feed, using the libraries instafeed.js and react-slick. A lot of sources writes about the ease of implementing a carousel of fotos from a feed using the jquery slick library together with instafeed.js likes this:
let imgFeed = new Instafeed({
get: 'user',
userId: '',
clientId: '',
accessToken: '',
resolution: 'standard_resolution',
template: '<img src="{{image}}" />',
sortBy: 'most-recent',
limit: 8,
links: false,
after: function () {
$('#instafeed').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4
});
}
})
Where you simply add the slick-functionality in the after() function.
When looking through the documentation for the react-version of the slick library, dynamic content should be done like this:
import React, { Component } from 'react'
import Slider from 'react-slick'
export default class DynamicSlides extends Component {
constructor(props) {
super(props)
this.state = {
slides: [1, 2, 3, 4, 5, 6]
}
this.click = this.click.bind(this)
}
click() {
const {slides} = this.state
this.setState({
slides: slides.length === 6 ? [1, 2, 3, 4, 5, 6, 7, 8, 9] : [1, 2, 3, 4, 5, 6]
})
}
render() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 3,
slidesToScroll: 3
};
return (
<div>
<h2>Dynamic slides</h2>
<button className='button' onClick={this.click}>Click to change slide count</button>
<Slider {...settings}>
{this.state.slides.map(function (slide) {
return <div key={slide}><h3>{slide}</h3></div>
})}
</Slider>
</div>
);
}
}
A lot of sources talks about how easy it is to work with the 2 libraries in making an instagram-feed-carousel without showing any solutions, so I'm kinda lost as to how to make this work, as I don't know how to get my instagram-feed dynamically added to the slider component from react-slick.