Full Page Slider

Developer
Joseph Martucci
Size
3,696 Kb
Views
16,192
  1. Full Page Slider Previews
  2. Full Page Slider HTML Codes
  3. Full Page Slider CSS Codes
  4. Full Page Slider JS Codes

How do I make an full page slider?

What is a full page slider? How do you make a full page slider? This script and codes were developed by Joseph Martucci on 25 October 2022, Tuesday.

Full Page Slider Previews
IQ Test

Full Page Slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Full Page Slider</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></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> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="slider"> <div class="slider-control slide-left"><i class="fa fa-minus fa-2x"></i></div> <div class="slider-control slide-right"><i class="fa fa-plus fa-2x"></i></div> <div class="slide-box"> <div class="slide" style="background-image: url(https://images.unsplash.com/photo-1427435150519-42d9bcd0aa81?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1896a40b338ccfb0d8ff7e5199e5ecd2)"> <div class="slide-content"> <H1>A Full Page Slider</H1> <p>With a flex-box container inside it.</p> </div> </div> <div class="slide" style="background-image: url(https://images.unsplash.com/photo-1452800185063-6db5e12b8e2e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=2700f9770386e4c5ebc53502a9099966)"> </div> <div class="slide" style="background-image: url(https://images.unsplash.com/photo-1452274381522-521513015433?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=476b9724fcf47b51c652d66e384f9ba0)"> </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>

Full Page Slider - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato:100,900);
html, body { height: 100%; font-family: 'Lato', sans-serif; font-weight: 100;
}
h1, h2, h3, h4 { font-weight: 900;
}
.slider { overflow: hidden; position: relative; width: 100%; height: 100%; margin: 0 auto;
}
.slider .slider-control { -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; width: 48px; height: 48px; position: absolute; top: 50%; margin-top: -24px; z-index: 1; border-radius: 50%; background: #FFF; opacity: .8; cursor: pointer; line-height: 48px; text-align: center;
}
.slider .slider-control:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); background: #222;
}
.slider .slider-control.slide-left { left: 24px;
}
.slider .slider-control.slide-right { right: 24px;
}
.slider .slider-control i { color: #ccc; line-height: 48px;
}
.slider .slide-box { -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; transition: all 0.8s ease-out; height: 100%; width: 999999px;
}
.slider .slide-box img { width: 100%;
}
.slider .slide-box .slide { -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; transition: all 0.8s ease-out; background-size: cover; background-position: center center; float: left; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 20000px #000; z-index: 10;
}
.slider .slide-box .slide .slide-content { height: 40%; font-size: 22px; min-height: 200px; width: 40%; min-width: 300px; color: #FFF; background: rgba(51, 77, 153, 0.5); text-align: center;
}

Full Page Slider - Script Codes JS Codes

 var $slider = $('.slider'); var $slideBox = $slider.find('.slide-box'); var $leftControl = $slider.find('.slide-left'); var $rightControl = $slider.find('.slide-right'); var $slides = $slider.find('.slide'); var numItems = $slider.find('.slide').length; var position = 0; var windowWidth = $(window).width(); $slides.width(windowWidth); $leftControl.on('click', function(){ var width = $slider.width(); position = position - 1 >= 0 ? position - 1 : numItems - 1; if(position != numItems-1){ $slider.find('.slide').eq(position + 1).css('margin-left', 0); } else{ $slider.find('.slide:gt(0)').each(function(index){ $(this).css('margin-left', width * -1 + 'px'); }); } }); $rightControl.on('click', function(){ var width = $slider.width(); position = position + 1 < numItems ? position + 1 : 0; if(position != 0){ $slider.find('.slide').eq(position).css('margin-left', width * -1 + 'px'); } else{ $slider.find('.slide').css('margin-left', 0); } }); $(window).resize(function(){ $slides.width($(window).width()).height($(window).height); });
Full Page Slider - Script Codes
Full Page Slider - Script Codes
Home Page Home
Developer Joseph Martucci
Username jjmartucci
Uploaded October 25, 2022
Rating 4.5
Size 3,696 Kb
Views 16,192
Do you need developer help for Full Page 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!

Joseph Martucci (jjmartucci) Script Codes
Name
A Pen by Joseph Martucci
Unbreakable
Wave Menu
Full Page 3D Effect Search
AngularJS ToDo List with Animation
CSS Animated Drop Down Menus
Exploding Text
CSS Coin Box
React CSS Transition Carousel
Tyger Tyger
Create amazing captions 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!