Responsive, Fullscreen Slider

Developer
Altitude
Size
5,472 Kb
Views
10,120
  1. Responsive, Fullscreen Slider Previews
  2. Responsive, Fullscreen Slider HTML Codes
  3. Responsive, Fullscreen Slider CSS Codes
  4. Responsive, Fullscreen Slider JS Codes

How do I make an responsive, fullscreen slider?

Based on princicples from Chris Coyer's excellent Perfect Full-Page Background Image. We just copy the src attr of each image in the slideshow and use it as the background-image for each slide. Then we can hide/remove the img tags.. What is a responsive, fullscreen slider? How do you make a responsive, fullscreen slider? This script and codes were developed by Altitude on 23 September 2022, Friday.

Responsive, Fullscreen Slider Previews
IQ Test

Responsive, Fullscreen Slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive, Fullscreen Slider</title> <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> <section id="content"> <h2>Responsive, Fullscreen Slider</h2> <p>Based on princicples from Chris Coyer's excellent <a href="https://css-tricks.com/perfect-full-page-background-image/" target="_blank">Perfect Full-Page Background Image</a>. We just copy the src attr of each image in the slideshow and use it as the background-image for each slide. Then we can hide/remove the img tags.</p> <p>This lets us do cool things like use CSS3 Transitions and easy rounded corners.</p> <ul class="slideshow"> <li><img src="http://placehold.it/500x500/80FF00/FFFFFF&text=1" alt=""></li> <li><img src="http://placehold.it/500x500/8000FF/FFFFFF&text=2" alt=""></li> <li><img src="http://placehold.it/500x500/FF8000/FFFFFF/&text=3"></li> </ul>
</section>
<ul class="slideshow fullscreen"> <li><img src="http://placehold.it/500x500/FF8000/FFFFFF/&text=1"></li> <li><img src="http://placehold.it/500x500/80FF00/FFFFFF&text=2" alt=""></li> <li><img src="http://placehold.it/500x500/8000FF/FFFFFF&text=3" alt=""></li>
</ul> <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 Slider - Script Codes CSS Codes

body { background: #333;
}
h1, h2, h3, h4, h5, h6, p { margin: 0 0 20px 0; color: #444;
}
p { color: #666; line-height: 1.25em;
}
a { color: DarkOrange;
}
#content { position: relative; z-index: 1; width: 50%; margin: 50px auto; padding: 40px; background: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
.slideshow { position: relative; display: block; width: auto; height: 400px; list-style: none; margin: 0; padding: 0;
}
.slideshow li { padding: 0; margin: 0; position: absolute; z-index: 0; display: block; width: 100%; height: 100%; left: 0; top: 0; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-repeat: no-repeat; background-attachment: inherit; background-position: center center; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}
.slideshow li img { display: none;
}
.slideshow.fullscreen { position: fixed; z-index: 0; display: block; width: 100%; height: 100%; top: 0; left: 0;
}
.slideshow.fullscreen img { display: none;
}
.slideshow.fullscreen li { background-attachment: fixed;
}

Responsive, Fullscreen Slider - Script Codes JS Codes

/** * These Days jQuery Slideshow Plugin v1.0.2 * @link http://playground.thesedays.com/tdslideshow/ * @author Keegan Street */
(function ($) {	var init, gotoSlide, stop, start, doTransition, publicMethods;	// If you have already included Modernizr with a test for CSS Transitions, you can delete this line	var Modernizr=function(a,b,c){function A(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+n.join(c+" ")+c).split(" ");return z(d,b)}function z(a,b){for(var d in a)if(k[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function y(a,b){return!!~(""+a).indexOf(b)}function x(a,b){return typeof a===b}function w(a,b){return v(prefixes.join(a+";")+(b||""))}function v(a){k.cssText=a}var d="2.0.6",e={},f=!0,g=b.documentElement,h=b.head||b.getElementsByTagName("head")[0],i="modernizr",j=b.createElement(i),k=j.style,l,m=Object.prototype.toString,n="Webkit Moz O ms Khtml".split(" "),o={},p={},q={},r=[],s,t={}.hasOwnProperty,u;!x(t,c)&&!x(t.call,c)?u=function(a,b){return t.call(a,b)}:u=function(a,b){return b in a&&x(a.constructor.prototype[b],c)},o.csstransitions=function(){return A("transitionProperty")};for(var B in o)u(o,B)&&(s=B.toLowerCase(),e[s]=o[B](),r.push((e[s]?"":"no-")+s));v(""),j=l=null,e._version=d,e._domPrefixes=n,e.testProp=function(a){return z([a])},e.testAllProps=A,g.className=g.className.replace(/\bno-js\b/,"")+(f?" js "+r.join(" "):"");return e}(this,this.document);	// Initialise plugin	init = function (options) {	var defaults = {	timeout: 2000,	speed: 1000,	fastSpeed: 100,	beforeTransition: null,	currentClass: 'current'	};	return this.each(function () {	var $el = $(this), data = $el.data('tdslideshow');	if (!data) {	data = {};	data.animating = false;	data.stopped = false;	data.options = $.extend(defaults, options);	data.$children = $el.children();	data.currentIndex = 0;	data.$current = data.$children.eq(0).addClass(data.options.currentClass);	data.timeoutId = setTimeout(function () {	doTransition($el);	}, data.options.timeout);	// Hide all images except first	if (Modernizr.csstransitions) {	data.$current.siblings().css({'opacity': 0});	} else {	data.$current.siblings().hide();	}	// Attach the plugin data to the element	$el.data('tdslideshow', data);	}	});	};	// Go directly to a slide	gotoSlide = function (index) {	return this.each(function () {	doTransition($(this), index);	});	};	// Stop the slideshow	stop = function () {	return this.each(function () {	var $el = $(this), data = $el.data('tdslideshow');	if (!data || !data.timeoutId) {	return;	}	data.stopped = true;	clearTimeout(data.timeoutId);	$el.data('tdslideshow', data);	});	};	// Restart the slideshow	start = function () {	return this.each(function () {	var $el = $(this), data = $el.data('tdslideshow');	if (!data || !data.stopped) {	return;	}	data.stopped = false;	data.timeoutId = setTimeout(function () {	doTransition($el);	}, data.options.timeout);	$el.data('tdslideshow', data);	});	};	// Show the next slide	doTransition = function ($el, nextIndex) {	var data = $el.data('tdslideshow'), $next, speed, animationComplete;	if (!data) { // Exit because element is removed from DOM	return;	}	if (data.animating) { // Do not play two animations at the same time	return;	}	data.animating = true;	// Get next item	if (typeof nextIndex === 'number') {	if (data.currentIndex === nextIndex) { // Do not allow transitions from a slide to the same slide	data.animating = false;	return;	}	data.currentIndex = nextIndex;	speed = data.options.fastSpeed;	$el.addClass('fastSpeed');	} else {	data.currentIndex = data.$current.index() + 1;	speed = data.options.speed;	$el.removeClass('fastSpeed');	}	if (data.currentIndex >= data.$children.length) {	data.currentIndex = 0;	}	$next = data.$children.eq(data.currentIndex);	// Stop any tdslideshow timers that are currently running on this element	clearTimeout(data.timeoutId);	// Call optional callback before doing the animation	if (typeof data.options.beforeTransition === 'function') {	data.options.beforeTransition.apply(this, [data.currentIndex]);	}	// Do animation	data.$current.removeClass(data.options.currentClass);	$next.addClass(data.options.currentClass);	if (Modernizr.csstransitions) { // Use CSS transitions if available	$next.bind('transitionend oTransitionEnd webkitTransitionEnd', function () {	$next.unbind('transitionend oTransitionEnd webkitTransitionEnd');	animationComplete();	});	$next.css({opacity: 1});	} else {	$next.fadeIn(speed, function () {	animationComplete();	});	}	// Callback for animation completion	animationComplete = function () {	if (Modernizr.csstransitions) {	data.$current.css({'opacity': 0});	} else {	data.$current.hide();	}	data.$current = $next;	if (data.stopped) {	delete data.timeoutId;	} else {	data.timeoutId = setTimeout(function () {	doTransition($el);	}, data.options.timeout);	}	data.animating = false;	$el.data('tdslideshow', data);	};	};	publicMethods = {	init: init,	gotoSlide: gotoSlide,	stop: stop,	start: start	};	$.fn.tdslideshow = function (method) {	if (publicMethods[method]) {	return publicMethods[method].apply(this, Array.prototype.slice.call(arguments, 1));	} else if (typeof method === 'object' || !method) {	return publicMethods.init.apply(this, arguments);	} else {	$.error('Method ' + method + ' does not exist on jQuery.tdslideshow');	}	};
}(jQuery));
$(function() { $('.slideshow').children().each(function(){ var $img = $('img',this); if ($img.length) { $(this).css({'background-image':'url('+$img.attr('src')+')'}); $img.remove(); } }); $('.slideshow').tdslideshow({timeout: 5000});
});
Responsive, Fullscreen Slider - Script Codes
Responsive, Fullscreen Slider - Script Codes
Home Page Home
Developer Altitude
Username altitudems
Uploaded September 23, 2022
Rating 3.5
Size 5,472 Kb
Views 10,120
Do you need developer help for Responsive, Fullscreen Slider?

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
Name
Simple Grid System
Expanding Breadcrumb Nav
CSS3 Buttons
Semantic Tableless Calendar
CSS3 Buttons Flat
Simple Tile Map with easel.js
Off-Canvas Menu
VueJS Calendar Component
Pricing Table v2
A Pen by Altitude
Create amazing sales emails 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!