October 6, 2024
Hot News

How to Create Full width Responsive Background Image Slider

adminc04 mins
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.


<link href="slider.css" rel="stylesheet" type="text/css">
 

<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.

="slider" id="sliderdemo">
    -- Slides -->
    
="background-image:url(http://placeimg.com/1920/1200/animal)">
>
    
="background-image:url(http://placeimg.com/1920/1200/sport)">
>
    
="background-image:url(http://placeimg.com/1920/1200/nature)">
>
    
="background-image:url(http://placeimg.com/1920/1200/people)">
>
    
="background-image:url(http://placeimg.com/1920/1200/tech)">
>
    -- The Arrows -->
    ="left" class="arrows" style="z-index:2; position:absolute;">="0 0 100 100">="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z">>>>
    ="right" class="arrows" style="z-index:2; position:absolute;">="0 0 100 100">="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) ">>>>
    -- Title Bar -->
    ="titleBar">
        >
    >

>

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.

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Related News

Top