Creating a Responsive and Flexible Slideshow in JavaScript
In this JavaScript tutorial, we'll learn how to build a flexible and dynamic slideshow. Software required: Sublime Text 3, Google Chrome, Live Reload 2.3.65, VirtualHostX 6.0.4.
What you'll learn
In this JavaScript tutorial, we'll learn how to build a flexible and dynamic slideshow. We'll look at the steps required to build a slideshow from scratch. We'll also implement efficient programming techniques, get the maximum performance on all devices, and learn tips and workarounds to deal with browser/device incompatibilities. By the end of this JavaScript training, you'll be able to build your own stunning slideshows with the help of JavaScript. Software required: Sublime Text 3, Google Chrome, Live Reload 2.3.65, VirtualHostX 6.0.4.
Table of contents
- Creating a Multimedia Gallery 9m
- Creating a Multimedia Gallery, Continued 11m
- Reviewing Improvements and Scalability 13m
- Completing the Layout for Slideshow 11m
- Creating Breakpoints 11m
- Building the Functionality 10m
- Building Click and Keyboard Events 11m
- Populating Slides Dynamically 7m
- Implementing Lazy Loading and Image Cuts 12m
- Building the Thumbnails Component 13m
- Adding Description Component 5m
- Adding Touch Events and Gestures 11m
- Adding History Events for URL Changes 12m
- Creating a Multimedia Gallery 6m
- Reviewing Improvements and Scalability 14m
About the author
Alfredo is an engineer with a decade of experience in web-based software development. He has been involved in the re-launch of Cosmopolitan, Elle, Esquire, and more, supported by a CMS built from scratch. He spends his days building HTML, CSS, JavaScript and PHP for one of the world's largest magazine publishers.