Skip to content

Instantly share code, notes, and snippets.

@celestelayne

celestelayne/index.html

Created April 23, 2021 20:28
Show Gist options
  • Save celestelayne/630e2065a307e72ede84915e1c05f7d8 to your computer and use it in GitHub Desktop.
Save celestelayne/630e2065a307e72ede84915e1c05f7d8 to your computer and use it in GitHub Desktop.
Download ZIP
turntable_project_04
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">
<link rel="nav" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<link rel="stylesheet" href="style-sheet.css">
</head>
<body>
<div class="content">
<div class="row">
<section class="image">
<img src="https://via.placeholder.com/800x480">
</section>
<aside class="spotify">
<iframe src="https://open.spotify.com/embed/playlist/5Ps3Qi610czSInNfzJ9NP2" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
</aside>
</div>
<div class="splide">
<div class="splide__track">
<ul class="splide__list">
</ul>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
<script src="turntable.js" defer></script>
</body>
</html>
Raw
style-sheet.css
@keyframes fade{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
body {
height: 95vh;
width: 95vw;
/* background: linear-gradient(-46deg, #000000, #052868, #000,#071B40);
background-size: 400% 400%;
animation: gradient 20s ease infinite; */
}
.content {
display: flex;
flex-direction: column;
}
@keyframes gradient
{
0%
{
background-position: 0% 50%;
}
50%
{
background-position: 100% 50%;
}
100%
{
background-position: 0% 50%;
}
}
.row{
display: flex;
flex-direction: row;
}
.splide__slide > img{
width: 50%;
}
section,
aside {
flex: 0 200px;
}
section {
flex-grow: 1;
}
.spotify {
text-align: center;
}
Raw
turntable.js
const playlist = [
{
name:"Marvin Gaye",
playlistnumber: "1",
albumname: "Funky Nation: The Detroit Instrumentals",
image: "https://th.bing.com/th/id/Re9659361950e6e8330cad8017e9bf513?rik=MCts0SS%2fS616nA&pid=ImgRaw",
},
{
name:"Erykah Badu",
playlistnumber: "2",
albumname: "Worldwide Underground",
image:"https://img.discogs.com/c5Qxf7_mVtF3jXRW7y1Sgdi8kl4=/fit-in/300x300/filters:strip_icc():format(jpeg):mode_rgb():quality(40)/discogs-images/R-214916-1437272036-7059.jpeg.jpg",
},
{
name:"Moose Dawa",
playlistnumber: "3",
albumname: "The Swap",
image:"https://i0.cdn.hhv.de/catalog/475x475/00659/659335.jpg",
},
{
name:"Ol' Burger Beats",
playlistnumber: "4",
albumname: "The Swap",
image:"https://th.bing.com/th/id/Rcdd6d664bdcfaa2840709ba3883dee72?rik=6NkTO%2baNpcxHrg&pid=ImgRaw",
},
{
name:"Tommy Guerrero",
playlistnumber: "5",
albumname: "The Swap",
image:"https://i.pinimg.com/originals/b7/e0/c7/b7e0c715d2b10ca72d17bff925dbb7cf.jpg",
},
{
name:"Kokoroko",
playlistnumber: "6",
albumname: "The Swap",
image:"https://cdn2.thelineofbestfit.com/images/remote/https_cdn2.thelineofbestfit.com/media/2014/kokoroko.jpg",
},
{
name:"Kokoroko",
playlistnumber: "7",
albumname: "The Swap",
image:"https://cdn2.thelineofbestfit.com/images/remote/https_cdn2.thelineofbestfit.com/media/2014/kokoroko.jpg",
},
{
name:"Erykah Badu",
playlistnumber: "8",
albumname: "The Swap",
image:"https://i1.sndcdn.com/artworks-000181913752-b6vxk8-t500x500.jpg",
},
{
name:"Kokoroko",
playlistnumber: "9",
albumname: "The Swap",
image:"https://th.bing.com/th/id/R2779b15dccdb6401814671f5f75066f7?rik=2%2f29gGCG4Iee1w&pid=ImgRaw",
},
{
name:"Roy Ayers",
playlistnumber: "10",
albumname: "The Swap",
image:"https://lastfm.freetls.fastly.net/i/u/ar0/94c775f37bd1cb713c38ec68e6c9ba4f.jpg",
},
];
const splide_list = document.querySelector('.splide__list')
var elms = document.getElementsByClassName( 'splide' );
function addImagesToSlider(){
// create a new list item
// iterate over the playlist
for (let i = 0; i < playlist.length; i++) {
console.log(playlist[i])
let splide__slide = document.createElement('li');
let slide_img = document.createElement('img');
splide__slide.classList.add('splide__slide')
let track_image = playlist[i].image
slide_img.setAttribute('src', track_image)
splide__slide.appendChild(slide_img)
splide_list.appendChild(splide__slide)
}
}
addImagesToSlider()
// let currentSlide = 0;
// console.log(currentSlide)
// const slides = document.querySelectorAll(".secondRow")
// console.log(slides)
// const init = (n) =>{
// slides.foreEach((slide, index) =>{
// slide.style.display = "none"})
// slides[n].style.display = "block"
// };
// document.addEventListener("DOM Content Loaded", init)
// const next = () => {
// currentSlide >=slides.length -1 ?
// currentSlide = 0: currentSlide++
// Infinity(currentSlide)
// }
// setInterval(() =>
// {next()
// }, 5000 );
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '.splide', {
type : 'loop',
perPage: 3,
focus : 'center',
} ).mount();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment