Fancy Responsive Image Carousel Plugin - jQuery startVal

startVal is a simple, flexible, 100% customizable and fully responsive image carousel/slider plugin built with jQuery and CSS/CSS3.

Main features:

• Multiple instances.
• 4 transition effects: rotation, translation, vibration, zoom.
• 9 image filters: white, black, green, blue, red, magenta, yellow, cyan, gray.
• Autoplay with countdown bar.
• Custom pagination and navigation controls.
• Custom image captions.
• And much more.

How to use it:

1. Import jQuery JavaScript library and the jQuery startVal plugin's files into the document.

<link href="css/sv-slider.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
        integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" 
        crossorigin="anonymous">
</script>
<script src="js/sv-slider.js"></script>

2. Insert your images into a container named 'sv-slider'.

<div class="sv-slider">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
  <img src="4.jpg">
  <img src="5.jpg">
  ...
</div>

3. The plugin will automatically extract and display images captions from the 'data-caption' attribute:

<div class="sv-slider">
  <img src="1.jpg" data-caption="Image Alt 1">
  <img src="2.jpg" data-caption="Image Alt 2">
  <img src="3.jpg" data-caption="Image Alt 3">
  <img src="4.jpg" data-caption="Image Alt 4">
  <img src="5.jpg" data-caption="Image Alt 5">
  ...
</div>

4. Initialize the carousel with default settings.

$(document).ready(function() {
  $('.sv-slider').SVSlider();
});

5. That's it. There are a number of useful options that you can pass through to customize your carousel.

$('.sv-slider').SVSlider({

  width: "100%", // string :: px or %
  randomFront: false, // bool
  timeEffect: 300, // int :: milliseconds
  animation: 'rotation', // string :: options { rotation, translation, vibration, zoom }
  overflowHidden: true, // bool
  borderSize: 1, // int :: px
  borderColor: "#999", // string :: html, rgb, rgba or text color
  borderRadius: 0, // int :: px
  paddingSize: 6, // int:: max 50
  paddingColor: "#EEE", // string :: html, rgb, rgba or text color
  boomerang: true, // bool
  filter: "off", // string :: options { white, black, green, blue, red, magenta, yellow, cyan, gray }
  showPager: true, // boolean
  autoplay: true, // boolean
  autoplayInterval: 6000, // int :: milliseconds
  shadowSize: 0, // int :: px
  shadowColor: "#666", // string :: html, rgb or rgba color

  buttons: {
    type: "big", // string :: options  {small, big }
    hiddenEffect: true, // bool
    borderRadius: 2, // int
    position: "center", // string :: options { top, bottom, center }
    dark: false, // bool
    noMargin: false // bool
  },

  caption: {

    animation: "slide", // string :: options { slide, fade }
    float: "left", // string :: options { left, right }
    position: "bottom", // string :: options { top, bottom }
    backgroundColor: "rgba(0, 5, 10, 0.6)", // string :: html, rgb, rgba or text color
    borderSize: 0, // int
    borderColor: "#FFF", // string :: html, rgb, rgba or text color
    borderRadius: 0, // int
    fontColor: "#FFF", // string :: html, rgb, rgba or text color
    fontSize: 25, // int
    fontBold: false, // bool
    fontItalic: false, // bool
    shadowSize: 0, // int :: px
    shadowColor: "#666" // string :: html, rgb or rgba color

  },

  pager: {
    dark: false, // bool
    transitionHidden: true, // bool
    float: "right", // string :: options { left, right, center }
    position: "bottom", // string :: options { top, bottom }
    background: "off" // string :: options { white, dark, off }
  },

  timer: {
    intervals: [] // private!
  }

});

Change log:

2018-02-27

• Update timer

---

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