Create a Full-Screen Slider Using HTML, CSS3 and jQuery

In this tutorial, we are going to create a full-screen slider using HTML, CSS3 and jQuery. You can us it for product presentations on your shop website.



In this tutorial, we use Google Fonts, specifically Montserrat and Oswald. Make sure to include them before you start.


HTML

The first step is to create an HTML structure. Here’s what we need:

  • Navigation menu

  • A wrapper div for slider with a class name css-slider-wrapper

  • Four slides; each has elements such as buttons/images/text

  • Slider pagination

Here is the markup:

<!-- 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=