Responsive Adaptable Image Slider Plugin For jQuery - resize-slider

resize-slider is a fully responsive, mobile-friendly and fullscreen background image slideshow/slider plugin which allows to automatically apply the user specified CSS background properties depending on the screen size and screen orientation. Licensed under theCC BY-NC-ND 4.0 | Attribution-NonCommercial-NoDerivatives 4.0 International.

How to use it:

1. Add references to jQuery JavaScript library and the jQuery resize-slider plugin's files into your webpage.

<link rel="stylesheet" href="css/resize-slider.css">
<script src="js/jquery/2.2.2.js"></script>
<script src="js/resize-slider-min.js"></script>

2. Create a container for the fullscreen background image slideshow.

<div id="resizeSlider"></div>

3. Insert your background images to the slideshow and specify the CSS background properties for each image.

$("#resizeSlider").resizeSlider(
{
  "image":
  {
    "presentation":
    {
      "landscape":
      {
        "url"      : "url(1.jpg)",
        "size"     : "cover",
        "repeat"   : "no-repeat",
        "position" : "center top"
      },
      "portrait":
      {
        "url"      : "url(1.jpg)",
        "size"     : "cover",
        "repeat"   : "no-repeat",
        "position" : "right center"
      }
    },

    "presentation 1":
    {
      "landscape":
      {
        "url"      : "url(1.jpg)",
        "size"     : "cover",
        "repeat"   : "no-repeat",
        "position" : "center bottom"
      },
      "portrait":
      {
        "url"      : "url(1.jpg)",
        "size"     : "cover",
        "repeat"   : "no-repeat",
        "position" : "left center"
      }
    },

    "presentation 2":
    {
      "landscape":
      {
        "url"      : "url(2.jpg)",
        "size"     : "cover",
        "repeat"   : "no-repeat",
        "position" : "center bottom"
      },
      "portrait":
      {
        "url"      : "url(2.jpg)",
        "size"     : "cover",
        "repeat"   : "no-repeat",
        "position" : "right top"
      }
    },

    "presentation 3":
    {
      "landscape":
      {
        "url"      : "url(3.jpg)",
        "size"     : "cover",
        "repeat"   : "no-repeat",
        "position" : "center center"
      },
      "portrait":
      {
        "url"      : "url(3.jpg)",
        "size"     : "cover",
        "repeat"   : "no-repeat",
        "position" : "left center"
      }
    },
  }
});

4. Default configuration options.

$("#resizeSlider").resizeSlider({

  // transition speed
  "transition" : 750,

  // transition delay
  "speed"      : 3500,

  // pause on hover
  "hover"      : false,

  // If is true, show images randomly
  "aleatorio"  : false,

  // LETF | NONE | RIGHT
  "float"      : "left",

  // width/height of the slideshow
  "width"      : "",
  "height"     : ""

  // insert your images here
  "image": {}
  
});

---

This awesome jQuery plugin is developed by Abravogal. For more Advanced Usages, please check the demo page or visit the official website.