Modern E-commerce Web Template - Aria Bootstrap

Aria Bootstrap is a modern, responsive, professional web template created for E-commerce websites and online stores.

Features:

• Based on jQuery and Bootstrap.
• Photo (Product) gallery with fancy hover effects.
• Parallax scrolling effect.
• Smooth scroll & scrollspy.
• And much more...

Installation:

1. Include jQuery, Bootstrap, and other required resources on the page.

<!-- Bootstrap -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

<!-- Font Awesome -->
<link href="/path/to/fontawesome/all.css" rel="stylesheet" />

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Montserrat|Raleway|Roboto|Pacifico" rel="stylesheet" />

<!-- Custom CSS -->
<link href="assets/css/style.css" rel="stylesheet" />

<!-- jQuery Easing -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

2. Custom scripts for this template.

(function ($) {
  "use strict"; // Start of use strict

  // Smooth scrolling using jQuery easing
  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function () {
      if (
          location.pathname.replace(/^\//, "") ==
          this.pathname.replace(/^\//, "") &&
          location.hostname == this.hostname
      ) {
          var target = $(this.hash);
          target = target.length
              ? target
              : $("[name=" + this.hash.slice(1) + "]");
          if (target.length) {
              $("html, body").animate(
                  {
                      scrollTop: target.offset().top - 70,
                  },
                  1000,
                  "easeInOutExpo"
              );
              return false;
          }
      }
  });

  // Activate scrollspy to add active class to navbar items on scroll
  $("body").scrollspy({
      target: "#mainNav",
      offset: 100,
  });

  // Collapse Navbar
  var navbarCollapse = function () {
      if ($("#mainNav").offset().top > 100) {
          $("#mainNav").addClass("navbar-shrink");
      } else {
          $("#mainNav").removeClass("navbar-shrink");
      }
  };

  // Collapse now if page is not at top
  navbarCollapse();

  // Collapse the navbar when page is scrolled
  $(window).scroll(navbarCollapse);
  
})(jQuery); // End of use strict

More Previews:

---

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