Get slider data with the Fetch API

Developer
Arden
Size
7,015 Kb
Views
18,216
  1. Get slider data with the Fetch API Previews
  2. Get slider data with the Fetch API HTML Codes
  3. Get slider data with the Fetch API CSS Codes
  4. Get slider data with the Fetch API JS Codes

How do I make an get slider data with the fetch api?

The fetch API is pretty damn awesome! It enables easy 'ajax' calls in vanilla Javascript and uses promises instead of callbacks. The browser support isn't quite there yet, but with the window.fetch polyfill from github you can happily run it with support up to IE9. Oh, and you'll also need an ES6 promises polyfill. What is a get slider data with the fetch api? How do you make a get slider data with the fetch api? This script and codes were developed by Arden on 19 November 2022, Saturday.

Get slider data with the Fetch API Previews
IQ Test

Get slider data with the Fetch API - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Get slider data with the Fetch API</title> <script src="https://use.typekit.net/vms5sey.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="slider"> <div class="slider__loader"></div> <ul class="slider__list"></ul> <div class="slider__nav slider__nav--prev"><svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M30.83 32.67l-9.17-9.17 9.17-9.17-2.83-2.83-12 12 12 12z"/></svg> </div> <div class="slider__nav slider__nav--next"> <svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M17.17 32.92l9.17-9.17-9.17-9.17 2.83-2.83 12 12-12 12z"/></svg> </div>
</div>
<script id="template" type="text/x-handlebars-template">{{#.}} <li class="slider__card"> <div class="slider__cardHeader" style="background-image:url({{backgroundImage}})"><img class="slider__cardHeaderImage" src="{{picture}}"/> <h1 class="slider__cardHeaderTitle">{{name.first}} {{name.last}}</h1> </div> <div class="slider__cardContent"> <p>{{about}}</p> <div class="slider__cardMeta">{{registered}}</div> </div> </li>{{/.}}
</script> <script src='http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/22914/fetch.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/22914/es6-promise.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Get slider data with the Fetch API - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { background: -webkit-linear-gradient(top, #020111 10%, #3a3a52 100%); background: linear-gradient(to bottom, #020111 10%, #3a3a52 100%); color: #333; height: auto; overflow-x: hidden; min-height: 100vh;
}
@media (min-width: 750px) { body { overflow: hidden; height: 100vh; }
}
@-webkit-keyframes rotate { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes rotate { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
.slider { position: relative; width: 80%; margin: 3em auto 0; min-height: 400px;
}
@media (min-width: 750px) { .slider { width: 450px; height: 500px; }
}
.slider.is-loading .slider__loader { display: block;
}
.slider__loader { display: none; width: 40px; height: 40px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; z-index: 20; border: solid 3px; border-color: #FFF transparent; border-radius: 50%; -webkit-animation: rotate 0.8s ease-in-out infinite; animation: rotate 0.8s ease-in-out infinite;
}
.slider__list { list-style: none; margin: 0; padding: 0; height: 100%; overflow: hidden;
}
.slider__card { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-radius: 3px; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); margin-bottom: 2em; -webkit-transition: all .6s ease; transition: all .6s ease; background-color: #fff; visibility: hidden; opacity: 0;
}
.slider__card.is-active { visibility: visible; opacity: 1;
}
.slider__card.is-loading { opacity: 0;
}
.slider__cardHeader { height: 140px; background-color: #ec008c; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 1.25em; background-size: cover; background-position: center; border-top-left-radius: 3px; border-top-right-radius: 3px; position: relative;
}
@media (min-width: 750px) { .slider__cardHeader { height: 240px; }
}
.slider__cardHeader::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: -webkit-linear-gradient(225deg, transparent 0%, #000000 100%); background-image: linear-gradient(-135deg, transparent 0%, #000000 100%); z-index: 1;
}
.slider__cardHeaderImage { margin-right: 1em; width: 60px; height: auto; display: block; border-radius: 60px; border: 0.125em solid #fff; z-index: 10;
}
@media (min-width: 750px) { .slider__cardHeaderImage { width: 100px; border-radius: 100px; border: .25em solid #fff; }
}
.slider__cardHeaderTitle { font-family: 'industry'; color: #fff; margin: 0; line-height: 1.125; font-size: 1.25em; font-weight: 300; z-index: 10;
}
@media (min-width: 750px) { .slider__cardHeaderTitle { font-size: 2.25em; }
}
.slider__cardContent { padding: 1.25em; font-size: 0.875em; line-height: 1.45; position: relative; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1;
}
.slider__cardContent p { margin-top: 0; padding-bottom: 1.5em;
}
.slider__cardMeta { position: absolute; bottom: 1.25em; left: 1.25m; color: #999;
}
.slider__nav { position: absolute; top: 50%; width: 3em; height: 3em; cursor: pointer; color: #fff; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease;
}
.slider__nav.is-active { opacity: 1;
}
.slider__nav.is-inActive { opacity: 0.5; cursor: default;
}
.slider__nav svg { display: block; width: 100%; height: auto;
}
.slider__nav--prev { left: 0; -webkit-transform: translateY(-50%) translateX(-100%); transform: translateY(-50%) translateX(-100%);
}
.slider__nav--next { right: 0; -webkit-transform: translateY(-50%) translateX(100%); transform: translateY(-50%) translateX(100%);
}

Get slider data with the Fetch API - Script Codes JS Codes

'use strict';
var DataHandler = function () { var rawTemplate = undefined, template = undefined, clickCount = undefined, next = undefined, prev = undefined, slider = undefined, slideList = undefined, dataLength = undefined; var _init = function _init() { rawTemplate = document.getElementById('template').innerHTML; template = Handlebars.compile(rawTemplate); slider = document.querySelector('.slider'); slideList = document.querySelector('.slider__list'); next = document.querySelector('.slider__nav--next'); prev = document.querySelector('.slider__nav--prev'); clickCount = 0; dataLength = 0; slider.classList.add('is-loading'); _addEventHandlers(); _setActiveNav(); _getData(); }; var _addEventHandlers = function _addEventHandlers() { next.addEventListener('click', _getNext, false); prev.addEventListener('click', _getPrev, false); window.addEventListener('fetch', function () { console.log('fetch'); }, false); }; var _getData = function _getData() { fetch('https://s3-us-west-2.amazonaws.com/s.cdpn.io/22914/randomData.json').then(function (response) { return response.json(); }).then(function (json) { dataLength = json.length; _populateTemplate(json); _setActiveNav(); }).catch(function (ex) { console.log('parsing failed', ex); }); }; var _setActiveNav = function _setActiveNav() { if (clickCount > 0) { prev.classList.add('is-active'); prev.classList.remove('is-inActive'); } else { prev.classList.remove('is-active'); prev.classList.add('is-inActive'); } }; var _getNext = function _getNext() { clickCount++; if (clickCount >= dataLength) { clickCount = 0; } _isLoading(); setTimeout(function () { _getData(); }, 300); }; var _getPrev = function _getPrev() { if (clickCount > 0) { clickCount--; _isLoading(); setTimeout(function () { _getData(); }, 300); } }; var _populateTemplate = function _populateTemplate(data) { var html = template(data[clickCount]); slideList.innerHTML = ''; slideList.innerHTML += html; setTimeout(function () { slider.classList.remove('is-loading'); var currentCard = document.querySelectorAll('.slider__card')[0]; currentCard.classList.add('is-active'); }, 300); }; var _isLoading = function _isLoading() { slider.classList.add('is-loading'); var currentCard = document.querySelectorAll('.slider__card')[0]; currentCard.classList.remove('is-active'); currentCard.classList.add('is-loading'); }; return { init: _init };
}();
DataHandler.init();
Get slider data with the Fetch API - Script Codes
Get slider data with the Fetch API - Script Codes
Home Page Home
Developer Arden
Username aderaaij
Uploaded November 19, 2022
Rating 4.5
Size 7,015 Kb
Views 18,216
Do you need developer help for Get slider data with the Fetch API?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Arden (aderaaij) Script Codes
Name
Full screen menu animation
Vanilla JS Lightbox Slideshow
CSS Animated Background Gradient
Share icons with counter
CFYE Profile Card
Animated SVG logo Super Interactive
Frontpage prototype with TheaterJS
Mapbox Map with Animated Marker Icons
Vertical off-screen push menu
Intersection Observer API fun
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!