Responsive Crossfading Image Slideshow - jQuery Blink Slider

The jQuery Blink Slider plugin makes it simple to create a responsive, automatic, infinitely looping slideshow from a group of images.

The slideshow plugin automatically resizes and repositions the images to make them always be center within the slideshow container on window resize.

It makes use of jQuery animate() method to animate the CSS opacity property for the crossfade effect when switching between images.

How to use it:

1. Load the jQuery Blink Slider plugin and other necessary resources in the html.

<link rel="stylesheet" href="css/blink.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/jquery.blink.js"></script>

2. Add slide images together with the control element to the Blink Slider.

<div class="blink-slider">
  <div class="blink-view" id="blink">
    <div class="viewSlide">
      <img class="fullImg" src="1.jpg" id="foto1">
    </div>

    <div class="viewSlide">
      <img class="fullImg" src="2.jpg" id="foto2">
    </div>

    <div class="viewSlide">
      <img class="fullImg" src=".jpg" id="foto3">
    </div>
  </div>
  <div class="blink-control" id="blink-control">
  </div>
</div>

3. Initialize the Blink Slider by calling the plugin on the top container.

$(document).ready(function(){
  $("#blink").blink();
});

4. Adjust the duration & transition delay in milliseconds.

$("#blink").blink({
  speedIn: 500,
  speedOut: 300,
  viewTime: 6000
});

5. Config the slider/slideshow controls.

$("#blink").blink({

  // shows pagination
  items: true,

  // shows navigation
  navigation: true,

  // prev text
  prevText: '◄ Prev',

  // next text
  nextText: 'Next ►'
  
});

---

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