Responsive/Fullscreen Slideshow

Developer
Size
5,070 Kb
Views
16,192

How do I make an responsive/fullscreen slideshow?

Very basic, modern browser only experiment with slideshows.Uses background images and CSS3 transitions. A little jQuery just to change active slide.. What is a responsive/fullscreen slideshow? How do you make a responsive/fullscreen slideshow? This script and codes were developed by Altitude on 23 September 2022, Friday.

Responsive/Fullscreen Slideshow Previews

Responsive/Fullscreen Slideshow - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive/Fullscreen Slideshow</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .slideshow { z-index: 0; position: relative; top: 0; left: 0; width: 100%; height: 100%; display: block;
}
.slideshow .slide { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: 1; opacity: 0; transition: opacity .5s linear .5s; -webkit-backface-visibility: hidden;
}
.slide.active { z-index: 10; opacity: 1; transition: opacity .5s ease-in-out 0;
}
body { background-color: #304040; padding: 2em; color: #fff;
}
h2 { color: #fff; position: relative; margin: 0 0 1rem 0; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
p { margin: 0 0 0 1rem 0; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
small { display: block; color: #fff; background: #d66; padding: .5em 1em; font-size: .5em; position: absolute; right: 0; top: 0; border-radius: 1em;
}
.bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
}
.chrome { border-radius: .25em; background: #ccc; padding: 2em .5em .5em .5em; width: 300px; height: 200px; resize: both; overflow: auto; position: relative;
}
.chrome:after { display: block; content: ''; width: 1em; height: 1em; background: #fff; position: absolute; top: .5em; right: .5em; border-radius: 1em;
}
.chrome:before { display: block; content: 'http://browserframe/slideshow'; position: absolute; left: .5rem; top: .5rem; height: 1rem; font-size: .6em; background: #fff; padding: 0 .5rem; line-height: 1rem; width: 80%; border-radius: .5rem; color: #777;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h2> Responsive Slider Experiment<small>work in progress</small>
</h2>
<P>Try resizing the 'browser' to see the slide background adjust. Only tested on chrome.</P>
<div class="chrome"> <div class="slideshow"> <div class="slide" data-src="http://placehold.it/1024x768/399/fff&amp;text=bg+one"></div> <div class="slide" data-src="http://placehold.it/1024x768/933/fff&amp;text=bg+two"></div> <div class="slide" data-src="http://placehold.it/1024x768/d93/fff&amp;text=bg+three"></div> </div>
</div>
<div class="bg"> <div class="slideshow"> <div class="slide" data-src="http://placeimg.com/480/320/people/grayscale/1"></div> <div class="slide" data-src="http://placeimg.com/480/320/people/grayscale/3"></div> <div class="slide" data-src="http://placeimg.com/480/320/people/grayscale/4"></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive/Fullscreen Slideshow - Script Codes CSS Codes

.slideshow { z-index: 0; position: relative; top: 0; left: 0; width: 100%; height: 100%; display: block;
}
.slideshow .slide { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: 1; opacity: 0; transition: opacity .5s linear .5s; -webkit-backface-visibility: hidden;
}
.slide.active { z-index: 10; opacity: 1; transition: opacity .5s ease-in-out 0;
}
body { background-color: #304040; padding: 2em; color: #fff;
}
h2 { color: #fff; position: relative; margin: 0 0 1rem 0; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
p { margin: 0 0 0 1rem 0; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
small { display: block; color: #fff; background: #d66; padding: .5em 1em; font-size: .5em; position: absolute; right: 0; top: 0; border-radius: 1em;
}
.bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
}
.chrome { border-radius: .25em; background: #ccc; padding: 2em .5em .5em .5em; width: 300px; height: 200px; resize: both; overflow: auto; position: relative;
}
.chrome:after { display: block; content: ''; width: 1em; height: 1em; background: #fff; position: absolute; top: .5em; right: .5em; border-radius: 1em;
}
.chrome:before { display: block; content: 'http://browserframe/slideshow'; position: absolute; left: .5rem; top: .5rem; height: 1rem; font-size: .6em; background: #fff; padding: 0 .5rem; line-height: 1rem; width: 80%; border-radius: .5rem; color: #777;
}

Responsive/Fullscreen Slideshow - Script Codes JS Codes

// Whirl : Very basic JQuery/Zepto plugin, as simple as it gets. Just adds and removes acrive class. Relies on CSS3 for transitions
;(function (defaults, $, window, document, undefined) { 'use strict'; $.extend({ // Function to change the default properties of the plugin // Usage: // jQuery.whirlSetup({property:'Custom value'}); whirlSetup: function (options) { return $.extend(defaults, options); } }).fn.extend({ // Usage: // jQuery(selector).whirl({property:'value'}); whirl: function (options) { defaults = { activeSlideClass: 'active', // Class name for active slide delay: 3000, // Delay betwwen transitions autoPlay: true // Enables/disables autoplay on load }; options = $.extend({}, defaults, options); return $(this).each(function () { var $element, $slides, currentIndex, interval; $element = $(this); $slides = $element.children(); $slides.each(function () { // Assign background image to each slide from data-src attr $(this).css({ 'background-image': 'url(' + $(this).attr('data-src') + ')' }); }); // Go to slide at index (with boundary wraping) and mark it as new active slide (trigger CSS3 transition) var goToSlide = function (index) { if ($slides.length > 0) { if (index < 0) index = $slides.length - 1; if (index > $slides.length - 1) index = 0; var $previousSlide = $slides.filter('.' + options.activeSlideClass); $previousSlide.removeClass(options.activeSlideClass); var $nextSlide = $slides.eq(index); $nextSlide.addClass(options.activeSlideClass); currentIndex = index; } }; // Previous and next slide functions var next = function () { goToSlide(currentIndex + 1); }; var previous = function () { goToSlide(currentIndex - 1); }; // play/pause functions var play = function () { interval = window.setInterval(function () { next(); }, options.delay); }; var pause = function () { window.clearInterval(interval); }; // Activate first slide goToSlide(0); // Autoplay if (options.autoPlay) { play(); } }); } });
})({ property: "value", otherProperty: "value"
}, jQuery, window, document);
// Calling the plugin
$(function () { $('.slideshow').whirl();
});
Responsive/Fullscreen Slideshow - Script Codes
Responsive/Fullscreen Slideshow - Script Codes
Home Page Home
Developer Altitude
Username altitudems
Uploaded September 23, 2022
Rating 3
Size 5,070 Kb
Views 16,192
Do you need developer help for Responsive/Fullscreen Slideshow?

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!

Altitude (altitudems) Script Codes
Create amazing blog posts 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!