Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Crafting a Hero Slider with sliderPro.js

This tutorial will show you how to craft an elegant slider for your website using sliderPro.js.

A responsive jQuery slider, sliderPro.js by bqworks features touch-swipe, text thumbnails, slide loops, animated layers, and JavaScript breakpoints. sliderPro has emerged as one of the go-to jQuery sliders on the web.

Below is the HTML, CSS, and JavaScript required.

Step 1 - sliderPro.html

Add the HTML below to where you'd like your slider

<div id="example1" class="slider-pro">
  <div class="sp-slides">
    <div class="sp-slide">
      <img class="sp-image" src="../src/css/images/blank.gif" data-src="https://www.solodev.com/assets/slider-pro/slide1.jpg" data-retina="https://www.solodev.com/assets/slider-pro/slide1.jpg"/>
      <p class="sp-layer sp-white sp-padding" data-horizontal="50" data-vertical="50" data-show-transition="left" data-hide-transition="up" data-show-delay="400" data-hide-delay="200">Lorem ipsum</p>
      <p class="sp-layer sp-black sp-padding hide-small-screen" data-horizontal="180" data-vertical="50" data-show-transition="left" data-hide-transition="up" data-show-delay="600" data-hide-delay="100">dolor sit amet</p>
      <p class="sp-layer sp-white sp-padding hide-medium-screen" data-horizontal="315" data-vertical="50" data-show-transition="left" data-hide-transition="up" data-show-delay="800">consectetur adipisicing elit.</p>
    </div>
    <div class="sp-slide">
      <img class="sp-image" src="../src/css/images/blank.gif" data-src="https://www.solodev.com/assets/slider-pro/slide2.jpg" data-retina="https://www.solodev.com/assets/slider-pro/slide2.jpg"/>
      <h3 class="sp-layer sp-black sp-padding" data-horizontal="40" data-vertical="10%" data-show-transition="left" data-hide-transition="left">Lorem ipsum dolor sit amet</h3>
      <p class="sp-layer sp-white sp-padding hide-medium-screen" data-horizontal="40" data-vertical="22%" data-show-transition="left" data-show-delay="200" data-hide-transition="left" data-hide-delay="200">consectetur adipisicing elit</p>
      <p class="sp-layer sp-black sp-padding hide-small-screen" data-horizontal="40" data-vertical="34%" data-width="350" data-show-transition="left" data-show-delay="400" data-hide-transition="left" data-hide-delay="500">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="sp-slide">
      <img class="sp-image" src="../src/css/images/blank.gif" data-src="https://www.solodev.com/assets/slider-pro/slide3.jpg" data-retina="https://www.solodev.com/assets/slider-pro/slide3.jpg"/>
      <p class="sp-layer sp-white sp-padding" data-position="centerCenter" data-vertical="-50" data-show-transition="right" data-hide-transition="left" data-show-delay="500" >Lorem ipsum dolor sit amet</p>
      <p class="sp-layer sp-black sp-padding hide-small-screen" data-position="centerCenter" data-vertical="50" data-show-transition="left" data-show-delay="700" data-hide-transition="right" data-hide-delay="200">consectetur adipisicing elit</p>
    </div>
    <div class="sp-slide">
      <img class="sp-image" src="../src/css/images/blank.gif" data-src="https://www.solodev.com/assets/slider-pro/slide4.jpg" data-retina="https://www.solodev.com/assets/slider-pro/slide4.jpg"/>
      <p class="sp-layer sp-black sp-padding" data-position="bottomLeft" data-show-transition="up" data-hide-transition="down">Lorem ipsum dolor sit amet <span class="hide-small-screen">, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> <span class="hide-medium-screen">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p>
    </div>
    <div class="sp-slide">
      <img class="sp-image" src="../src/css/images/blank.gif" data-src="https://www.solodev.com/assets/slider-pro/slide5.jpg" data-retina="https://www.solodev.com/assets/slider-pro/slide5.jpg"/>
      <p class="sp-layer sp-black sp-padding" data-position="bottomLeft" data-show-transition="up" data-hide-transition="down">Lorem ipsum dolor sit amet <span class="hide-small-screen">, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> <span class="hide-medium-screen">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p>
    </div>
  </div>
  <div class="sp-thumbnails">
    <div class="sp-thumbnail">
      <div class="sp-thumbnail-title">Slide #1</div>
      <div class="sp-thumbnail-description">Dolor sit amet, consectetur adipiscing elit sed</div>
    </div>
    <div class="sp-thumbnail">
      <div class="sp-thumbnail-title">Slide #2</div>
      <div class="sp-thumbnail-description">Tempor incididunt ut labore et dolore magna aliqua</div>
    </div>
    <div class="sp-thumbnail">
      <div class="sp-thumbnail-title">Slide #3</div>
      <div class="sp-thumbnail-description">Ad minim veniam, quis nostrud exercitation</div>
    </div>
    <div class="sp-thumbnail">
      <div class="sp-thumbnail-title">Slide #4</div>
      <div class="sp-thumbnail-description">Nisi ut aliquip ex ea commodo consequat</div>
    </div>
    <div class="sp-thumbnail">
      <div class="sp-thumbnail-title">Slide #5</div>
      <div class="sp-thumbnail-description">Irure dolor in reprehenderit in voluptate velit</div>
    </div>
  </div>
</div>

Step 2 - sliderPro.css

Download the CSS below and include it in your web page

sliderPro.css

Step 3 - slider.js

Add the JavaScript below to a file called slider.js

$( document ).ready(function( $ ) {
  jQuery( '#example1' ).sliderPro({
    width: 960,
    height: 500,
    arrows: true,
    buttons: false,
    waitForLayers: true,
    thumbnailWidth: 200,
    thumbnailHeight: 100,
    thumbnailPointer: true,
    autoplay: false,
    autoScaleLayers: false,
    breakpoints: {
      500: {
        thumbnailWidth: 120,
        thumbnailHeight: 50
      }
    }
  });
});

Add the includes below to your webpage

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.solodev.com/assets/slider-pro/jquery.sliderPro.min.js"></script>
<script src="https://www.solodev.com/assets/slider-pro/sliderPro.js"></script>
<script src="slider.js"></script>
<link rel="stylesheet" href="sliderPro.css">

You can now customize your slider to meet the needs of your business by modifying the HTML, CSS and JavaScript. We recommend you begin by replacing the images and text currently in place.

Images Courtesy of LifeofPix.com

Download from Github

Share on Facebook Tweet It

Matthieu McClintock
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev