Auto Switching Blocks With jQuery - SwitchingLayers

SwitchingLayers is a lightweight jQuery plugin which automatically switches between a group of block elements at a given interval.

Great for showcasing your products in a grid layout that automatically switches between product images to show as many of your products as possible in a limited space.

How to use it:

1. Download and insert the JavaScript switching-layers.js after jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="src/switching-layers.js"></script>

2. Add the data-switch="switch-parent" attribute to the top container as these:

<div class="switch-layer" 
     data-switch="switch-parent">
  <div>
    <p>First</p>
  </div>
  <div>
    <p>Second</p>
  </div>
  <div>
    <p>Third</p>
  </div>
  ...
</div>

3. Hide the block elements and show them again when activated.

.switch-layer div {
  display: none;
}

.switch-layer div.active {
  display: block;
}

4. Initialize the plugin on document ready and done.

$(function(){
  $().switchinglayers({});
});

5. Adjust the time to delay before swithing.

$(function(){
  $().switchinglayers({
    switchingTime: 5 // default 3 sconds
  });
});

6. All default CSS classes & HTML data attributes.

$(function(){
  $().switchinglayers({
    container: $("[data-switch='container']"),
    mainLayer: $("[data-switch='main-layer']"),
    parentSwitch: $("[data-switch='switch-parent']"),
    activeClassName: "active"
  });
});

Changelog:

2019-10-25

• Update switching-layers.js

---

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