<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Looping Instagram Feed Carousel</title>
<script>
const TOKEN = '50002183.78d2678.be7e3cca3e854207b885f1fbbf52d7b7'
</script>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<main>
<div class="carousel" id="instagram-feed"></div>
</main>
<p class="text-link"><a href="https://www.instagram.com/hexagoncircle/" target="_blank">instagram.com/hexagoncircle</a></p>
<!-- partial -->
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js'></script><script src="./script.js"></script>
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Dosis:600);
* {
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
font-family: "Dosis", sans-serif;
background-color: black;
color: white;
}
main {
display: flex;
align-items: center;
height: 100vh;
}
.text-link {
position: fixed;
bottom: 12px;
right: 12px;
font-size: 12px;
}
.text-link a {
color: rgba(255, 255, 255, 0.3);
text-decoration: none;
}
.text-link a:hover {
color: white;
text-decoration: underline;
}
.carousel {
margin: 0 auto;
width: 100%;
}
.slick-list {
overflow: visible;
padding: 0 4px;
}
.slick-track {
display: flex;
align-items: center;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-prev,
.slick-next {
position: fixed;
bottom: 12px;
padding: 4px 12px;
font-family: "Dosis", sans-serif;
color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.2);
border: none;
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: 2px;
outline: none;
cursor: pointer;
z-index: 999;
}
.slick-prev:active,
.slick-next:active {
-webkit-transform: translateY(1px);
transform: translateY(1px);
}
.slick-prev {
left: 12px;
}
.slick-next {
left: 90px;
}
.item {
position: relative;
margin: 4px;
opacity: 0.3;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: opacity 1.6s cubic-bezier(0, 1, 0.86, 1), -webkit-transform 0.8s cubic-bezier(0, 1, 0.86, 1);
transition: opacity 1.6s cubic-bezier(0, 1, 0.86, 1), transform 0.8s cubic-bezier(0, 1, 0.86, 1);
transition: opacity 1.6s cubic-bezier(0, 1, 0.86, 1), transform 0.8s cubic-bezier(0, 1, 0.86, 1), -webkit-transform 0.8s cubic-bezier(0, 1, 0.86, 1);
outline: none;
overflow: hidden;
z-index: -1;
}
.item img {
width: 100%;
-webkit-filter: blur(6px);
filter: blur(6px);
-webkit-transform: rotate(0) translate3d(0, 0, 0);
transform: rotate(0) translate3d(0, 0, 0);
transition: -webkit-filter 1.6s cubic-bezier(0, 1, 0.86, 1);
transition: filter 1.6s cubic-bezier(0, 1, 0.86, 1);
transition: filter 1.6s cubic-bezier(0, 1, 0.86, 1), -webkit-filter 1.6s cubic-bezier(0, 1, 0.86, 1);
}
.item.slick-animate {
opacity: 1;
z-index: 99;
transition: opacity 0.4s cubic-bezier(0, 1, 0.86, 1), -webkit-filter 1.6s cubic-bezier(0, 1, 0.86, 1), -webkit-transform 0.4s cubic-bezier(0, 1, 0.86, 1);
transition: filter 1.6s cubic-bezier(0, 1, 0.86, 1), opacity 0.4s cubic-bezier(0, 1, 0.86, 1), transform 0.4s cubic-bezier(0, 1, 0.86, 1);
transition: filter 1.6s cubic-bezier(0, 1, 0.86, 1), opacity 0.4s cubic-bezier(0, 1, 0.86, 1), transform 0.4s cubic-bezier(0, 1, 0.86, 1), -webkit-filter 1.6s cubic-bezier(0, 1, 0.86, 1), -webkit-transform 0.4s cubic-bezier(0, 1, 0.86, 1);
}
@media (min-width: 480px) {
.item.slick-animate {
-webkit-transform: translate3d(0, 0, 0) scale(3);
transform: translate3d(0, 0, 0) scale(3);
}
}
.item.slick-animate img {
-webkit-filter: blur(0);
filter: blur(0);
}
// Get Photos from Instagram using JavaScript API: https://rudrastyh.com/javascript/get-photos-from-instagram.html
// Instagram feed
var token = TOKEN,
userid = 50002183,
num_photos = 24,
slickAnimClass = 'slick-animate',
$carousel = $('.carousel'),
$blockFeed = $('#instagram-feed'),
carouselSettings, item, image, imgSource, imgAlt;
$carousel.hide();
// Carousel created with slick.js
carouselSettings = {
arrows: true,
autoplay: true,
autoplaySpeed: 3000,
centerMode: true,
infinite: true,
pauseOnHover: false,
slidesToShow: 5,
slidesToScroll: 1,
speed: 20,
responsive: [
{
breakpoint: 20,
settings: {
slidesToShow: 1,
}
}
]
};
$.ajax({
url: 'https://api.instagram.com/v1/users/' + userid + '/media/recent',
dataType: 'jsonp',
type: 'GET',
data: {
access_token: token,
count: num_photos
},
success: function(data) {
for(item in data.data) {
imgSource = data.data[item].images.standard_resolution.url;
imgAlt = '';
image = '';
item = '' + image + '';
$blockFeed.append(item);
}
// Create carousel
$carousel
.slick(carouselSettings)
.fadeIn(800);
}
});
// Carousel events to fix jump when looped
$carousel.on('init', function() {
$('.slick-current').addClass(slickAnimClass);
}).on('beforeChange', function() {
$(".item").removeClass(slickAnimClass);
}).on('afterChange', function() {
$('.slick-current').addClass(slickAnimClass);
});