At some point in your front-end web development journey you might face having to build a bespoke full screen slider. From my experience, Slick and a bit of custom CSS have proven to be very invaluable resources to make the process a breeze. Off course the example below is retrained to the container of this blog post and simply shows an example of a slider design but, the code below is what you'll need to easily create that full screen slider.
Note: this method does involve jQuery and in recent times isn't the greatest solution optimisation wise. Nevertheless, despite jQuery being a dependency for Slick, this is still one of the best ways I know to create a bespoke slider.
Example
$(function () { const $hero = $('.hero');$hero.slick({
prevArrow: '',
nextArrow: ''
});
})
HTML
<head>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- Insert the CSS and JavaScript displayed below after the above script and stylesheet -->
</head>
<section class="hero">
<div class="hero__slide hero__slide--first">
<h1>"Stay hungry, stay foolish"</h1>
</div>
<div class="hero__slide hero__slide--last">
<h1>"Stay hungry, stay foolish"</h1>
<a href="#" class="btn">LEARN MORE</a>
</div>
</section>
CSS
/* base */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
font-family: "Poppins", Arial, Helvetica, sans-serif;
text-align: center;
}
h1 {
font-size: 2rem;
letter-spacing: 0.1em;
}
@media(min-width: 479px) {
h1 {
font-size: 3rem;
}
}
/* button */
.btn {
font-size: 13px;
display: inline-block;
background-color: #fff;
color: #262626;
text-decoration: none;
padding: 1rem 2rem;
margin-top: 1rem;
transition: all 0.2s ease;
letter-spacing: 0.1em;
}
.btn:hover {
background-color: #262626;
color: #fff;
}
/* hero */
.hero {
height: 100vh;
background-color: #262626;
}
.hero__slide {
display: flex !important;
justify-content: center;
align-items: center;
height: 100vh;
color: #fff;
background-position: 50%;
background-size: cover;
}
.hero__slide--first {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('
);
}
.hero__slide--last {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('
);
flex-direction: column;
}
/* slick slider */
.slick-arrow {
position: absolute;
bottom: 0;
font-size: 0;
height: 60px;
width: 60px;
background-color: #fff;
z-index: 1;
cursor: pointer;
border: none;
transition: background-color 0.2s ease;
}
@media(min-width: 479px) {
.slick-arrow {
top: 50%;
}
}
.slick-arrow:hover {
background-color: #262626;
}
.slick-arrow svg {
height: 25px;
}
.slick-arrow svg path {
fill: #262626;
transition: fill 0.2s ease;
}
.slick-arrow:hover svg path {
fill: #fff;
}
.slick-prev {
left: 0;
transform: rotate(180deg);
}
@media(min-width: 479px) {
.slick-prev {
transform: translateY(-50%) rotate(180deg);
}
}
.slick-next {
right: 0;
}
@media(min-width: 479px) {
.slick-next {
transform: translateY(-50%);
}
}
JavaScript
$(function () {
const $hero = $('.hero');
$hero.slick({
prevArrow: '<button class="slick-prev slick-arrow" aria-label="Previous" type="button" style=""><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></button>',
nextArrow: '<button class="slick-next slick-arrow" aria-label="Next" type="button" style=""><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></button>'
});
})
Original Article: https://baillieogrady.com/full-screen-responsive-slider/