How to Create Full width Responsive Background Image Slider

In this tutorial I am going to show you How to Create Full width Responsive Background Image Slider/carousel/slideshow with autoPlay, navigation arrows and title bar feature. This is a very tiny image slider with almost all needed features for any banner slider. In default feature it 100% container width, 500px height. Pauses slideshow on hover.Images are Background-images. Filling the container div regardless of the image size.



Notable features:
* Auto rotation.
* Auto pause on hover.
* Zoom on hover.
* Configurable animation speed & transition delay.
background-image-slider

Integrate Full width Responsive Background Image Slider

Follow below simple steps to Integrate Full width Responsive Background Image Slider on your website as header banner of portfolio slideshow.

Libraries

Include all the required (JS+CSS) libraries on page.

<!--CSS-->
<link href="slider.css" rel="stylesheet" type="text/css">
 
<!--JS-->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="slider.js"></script>

HTML

Markup html container with custom background images together with caption bar and pagination arrows to the slider.

<div class="slider" id="sliderdemo">
    <!-- Slides -->
    <div style="background-image:url(http://placeimg.com/1920/1200/animal)"></div>
    <div style="background-image:url(http://placeimg.com/1920/1200/sport)"></div>
    <div style="background-image:url(http://placeimg.com/1920/1200/nature)"></div>
    <div style="background-image:url(http://placeimg.com/1920/1200/people)"></div>
    <div style="background-image:url(http://placeimg.com/1920/1200/tech)"></div>
    <!-- The Arrows -->
    <i class="left" class="arrows" style="z-index:2; position:absolute;"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z"></path></svg></i>
    <i class="right" class="arrows" style="z-index:2; position:absolute;"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" transform="translate(100, 100) rotate(180) "></path></svg></i>
    <!-- Title Bar -->
    <span class="titleBar">
        <h1>This Slider has all default settings.</h1>
    </span>
</div>



JS

Call the slider function to generate a basic slider with default settings.

$(function() { 
  $("#sliderdemo").sliderResponsive();
});

Create slider with custom option with more controls.

$(function() { 
   $("#sliderdemo").sliderResponsive({
      slidePause: 5000,
      fadeSpeed: 800,
      autoPlay: "on",
      showArrows: "off", 
      hideDots: "off", 
      hoverZoom: "on", 
      titleBarTop: "off"
  });
});

See demo and download source code.

DEMO | DOWNLOAD

See official repository for more information and follow for future updates.