Full-Screen Slider is a modern and responsive component with animated descriptions, designed for product landing pages. Created with jQuery and CSS / CSS3.
Must Read: Full-Screen Slideshow of Images and Videos In Pure JavaScript
How to make use of it:
1. Create the HTML for the product slider.
<!-- Navigation -->
<div class="navigation">
<div class="navigation-left">
<a href="#">Shoes</a>
<a href="#">Clothes</a>
<a href="#">Accessories</a>
</div>
<div class="navigation-center">
<img src="images/logo.png" alt="" />
</div>
<div class="navigation-right">
<a href="#"><img src="images/shopping-bag.png" alt="" /></a>
<button class="login-btn" href="#">Login</button>
</div>
</div>
<!-- Slider Wrapper -->
<div class="css-slider-wrapper">
<input
type="radio"
name="slider"
class="slide-radio1"
checked
id="slider_1"
/>
<input type="radio" name="slider" class="slide-radio2" id="slider_2" />
<input type="radio" name="slider" class="slide-radio3" id="slider_3" />
<input type="radio" name="slider" class="slide-radio4" id="slider_4" />
<!-- Slider Pagination -->
<div class="slider-pagination">
<label for="slider_1" class="page1"></label>
<label for="slider_2" class="page2"></label>
<label for="slider_3" class="page3"></label>
<label for="slider_4" class="page4"></label>
</div>
<!-- Slider #1 -->
<div class="slider slide-1">
<img src="images/model-1.png" alt="" />
<div class="slider-content">
<h4>New Product</h4>
<h2>Denim Longline T-Shirt Dress With Split</h2>
<button type="button" class="buy-now-btn" name="button">$130</button>
</div>
<div class="number-pagination">
<span>1</span>
</div>
</div>
<!-- Slider #2 -->
<div class="slider slide-2">
<img src="images/model-2.png" alt="" />
<div class="slider-content">
<h4>New Product</h4>
<h2>Denim Longline T-Shirt Dress With Split</h2>
<button type="button" class="buy-now-btn" name="button">$130</button>
</div>
<div class="number-pagination">
<span>2</span>
</div>
</div>
<!-- Slider #3 -->
<div class="slider slide-3">
<img src="images/model-3.png" alt="" />
<div class="slider-content">
<h4>New Product</h4>
<h2>Denim Longline T-Shirt Dress With Split</h2>
<button type="button" class="buy-now-btn" name="button">$130</button>
</div>
<div class="number-pagination">
<span>3</span>
</div>
</div>
<!-- Slider #4 -->
<div class="slider slide-4">
<img src="images/model-4.png" alt="" />
<div class="slider-content">
<h4>New Product</h4>
<h2>Denim Longline T-Shirt Dress With Split</h2>
<button type="button" class="buy-now-btn" name="button">$130</button>
</div>
<div class="number-pagination">
<span>4</span>
</div>
</div>
</div>2. The mandatory CSS styles for the product slider. Feel free to override the CSS guidelines to create your individual slider styles.
* {
box-sizing: border-box;
}
body {
overflow: hidden;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
font-family: "Montserrat", sans-serif;
}
/* Navigation */
.navigation {
position: absolute;
width: 100%;
height: 100px;
padding: 0 100px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1;
}
.navigation-left {
margin-left: -33px;
}
.navigation-left a {
text-decoration: none;
text-transform: uppercase;
color: #333745;
font-size: 12px;
font-weight: bold;
width: 107px;
height: 30px;
border: 2px solid transparent;
border-radius: 15px;
display: inline-block;
text-align: center;
line-height: 25px;
transition: all 0.2s;
}
.navigation-left a:hover,
.navigation-left a:focus {
border-color: rgb(234, 46, 73);
background-color: rgba(44, 45, 47, 0);
}
.navigation-center {
margin-right: 85px;
}
.navigation-right {
display: flex;
align-items: center;
}
.login-btn {
background-color: #b8b8b9;
width: 97px;
height: 30px;
display: inline-block;
text-align: center;
text-decoration: none;
font-size: 12px;
font-weight: bold;
border-radius: 15px;
border: none;
color: #333745;
text-transform: uppercase;
margin-left: 20px;
transition: all 0.2s;
cursor: pointer;
}
.login-btn:hover {
transform: scale(1.06);
}
/* Slider wrapper*/
.css-slider-wrapper {
display: block;
background: #fff;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/* Slider */
.slider {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 1;
z-index: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
-webkit-transition: -webkit-transform 1600ms;
transition: -webkit-transform 1600ms, transform 1600ms;
-webkit-transform: scale(1);
transform: scale(1);
}
/* Slides Background Color */
.slide-1 {
background: #fbad99;
left: 0;
}
.slide-2 {
background: #a9785c;
left: 100%;
}
.slide-3 {
background: #9ea6b3;
left: 200%;
}
.slide-4 {
background: #b1a494;
left: 300%;
}
.slider {
display: flex;
justify-content: flex-start;
}
.slider-content {
width: 635px;
padding-left: 100px;
}
/* Slider Inner Slide Effect */
.slider h2 {
color: #333333;
font-weight: 900;
text-transform: capitalize;
font-size: 60px;
font-weight: 300;
line-height: 1.2;
opacity: 0;
-webkit-transform: translateX(500px);
transform: translateX(500px);
margin-top: 0;
letter-spacing: 2px;
}
.slider h4 {
font-size: 22px;
font-family: "Oswald";
color: rgba(51, 51, 51, 0.349);
font-weight: bold;
text-transform: uppercase;
line-height: 1.2;
opacity: 0;
-webkit-transform: translateX(500px);
transform: translateX(500px);
}
.slider > img {
position: absolute;
right: 10%;
bottom: 0;
height: 100%;
opacity: 0;
-webkit-transform: translateX(500px);
transform: translateX(500px);
}
.slide-1 > img {
right: 0;
}
.buy-now-btn {
background-color: #ea2e49;
width: 220px;
height: 50px;
border-radius: 30px;
border: none;
font-family: Montserrat;
font-size: 20px;
font-weight: 100;
color: #fff;
text-align: left;
padding-left: 35px;
position: relative;
cursor: pointer;
transition: all 0.2s;
}
.buy-now-btn:hover {
box-shadow: 0px 0px 60px -17px rgba(51, 51, 51, 1);
}
.buy-now-btn:after {
content: "Buy Now";
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
position: absolute;
right: 35px;
top: 18px;
}
.slider .buy-now-btn:focus,
.navigation .login-btn:focus {
outline: none;
}
/* Animations */
.slider h2 {
-webkit-transition: opacity 800ms, -webkit-transform 800ms;
transition: transform 800ms, opacity 800ms;
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
}
.slider h4 {
-webkit-transition: opacity 800ms, -webkit-transform 800ms;
transition: transform 800ms, opacity 800ms;
-webkit-transition-delay: 1.4s; /* Safari */
transition-delay: 1.4s;
}
.slider > img {
-webkit-transition: opacity 800ms, -webkit-transform 800ms;
transition: transform 800ms, opacity 800ms;
-webkit-transition-delay: 1.2s; /* Safari */
transition-delay: 1.2s;
}
/* Number Pagination */
.number-pagination {
position: absolute;
bottom: 30px;
right: 100px;
font-family: "Oswald";
font-weight: bold;
}
.number-pagination span {
font-size: 30px;
color: #ea2e49;
letter-spacing: 4px;
}
.number-pagination span:after {
content: "/4";
font-size: 16px;
color: #fff;
}
/* Slider Pagger */
.slider-pagination {
position: absolute;
bottom: 30px;
width: 575px;
left: 100px;
z-index: 1000;
display: flex;
align-items: center;
}
.slider-pagination label {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
background: #fff;
margin: 0 10px;
cursor: pointer;
}
/* Slider Pagger Event */
.slide-radio1:checked ~ .slider-pagination .page1,
.slide-radio2:checked ~ .slider-pagination .page2,
.slide-radio3:checked ~ .slider-pagination .page3,
.slide-radio4:checked ~ .slider-pagination .page4 {
width: 14px;
height: 14px;
border: 2px solid #ea2e49;
background: transparent;
}
/* Slider Slide Effect */
.slide-radio1:checked ~ .slider {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.slide-radio2:checked ~ .slider {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-radio3:checked ~ .slider {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
.slide-radio4:checked ~ .slider {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
.slide-radio1:checked ~ .slide-1 h2,
.slide-radio2:checked ~ .slide-2 h2,
.slide-radio3:checked ~ .slide-3 h2,
.slide-radio4:checked ~ .slide-4 h2,
.slide-radio1:checked ~ .slide-1 h4,
.slide-radio2:checked ~ .slide-2 h4,
.slide-radio3:checked ~ .slide-3 h4,
.slide-radio4:checked ~ .slide-4 h4,
.slide-radio1:checked ~ .slide-1 > img,
.slide-radio2:checked ~ .slide-2 > img,
.slide-radio3:checked ~ .slide-3 > img,
.slide-radio4:checked ~ .slide-4 > img {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
/* Responsive */
@media only screen and (max-width: 768px) {
.slider h2 {
font-size: 20px;
}
.slider h4 {
font-size: 16px;
}
.slider-content {
padding: 0 2%;
}
.navigation {
padding: 0 2%;
}
.navigation-left {
display: none;
}
.number-pagination {
right: 2%;
}
.slider-pagination {
left: 2%;
}
.slider .buy-now-btn {
padding: 0 15px;
width: 175px;
height: 42px;
}
.slider .buy-now-btn:after {
top: 15px;
}
.slider > img {
right: 2%;
}
.slide-1 > img {
right: -110px;
}
}3. Include the mandatory jQuery JavaScript library.
<script src="/path/to/cdn/jquery.min.js"></script>
4. Navigate between these slides utilizing the jQuery script below:
var TIMEOUT = 6000;
var interval = setInterval(handleNext, TIMEOUT);
function handleNext() {
var $radios = $('input[class*="slide-radio"]');
var $activeRadio = $('input[class*="slide-radio"]:checked');
var currentIndex = $activeRadio.index();
var radiosLength = $radios.length;
$radios.attr("checked", false);
if (currentIndex >= radiosLength - 1) {
$radios.first().attr("checked", true);
} else {
$activeRadio.next('input[class*="slide-radio"]').attr("checked", true);
}
}See Also –
One Page Scroll Sections Plugin In JavaScript | Whole Page Slider
Modern Mobile Touch Slider With Acceleration Transitions | Swiper
Vertical Page Slider Scrolling With Parallax Effect | FullPageScroll
See Demo And Download
Official Website(rOluochKe): Click Here
This superior jQuery/javascript plugin is developed by rOluochKe. For extra Advanced Usage, please go to the official website.
