How to Add a Home Page Slider? (WYSIWYG)

While Pulse Commerce has mobile-responsive sliders built into the system, you can create custom homepage sliders for enhanced visual presentation on your storefront.

What You'll Need:

• Basic HTML and JavaScript knowledge
• Image files for your slider
• A slider library or framework (we provide a free example below)

Finding Slider Solutions:

A quick web search will reveal numerous free and paid slider options. The example below uses jQuery FlexSlider v2.1, which is free under the GPLv2 license.

This section provides a complete working example using jQuery FlexSlider v2.1, a popular and reliable slider solution.

Step 1: Understanding the Components

A complete slider implementation requires two files:

• HTML Structure: Defines the slider layout and content
• JavaScript Library: Powers the slider functionality (jquery.flexslider.js)

Step 2: Customizing the HTML

The sample code below includes placeholder elements you'll need to customize for your store:

Sample HTML Structure

Here's the complete HTML for a 4-slide homepage slider:

<div class="Main">
  <div class="hp-inner">
    <div class="slide-show slide-show-render slide-show-render-full flexslider Panel" 
         data-swap-frequency="10" id="HomeSlideShow" style="width: 100%;">
      <div class="flex-viewport" style="overflow: hidden; position: relative;">
        <ol class="slides" style="width: 1200%; transition-duration: 0.6s; transform: translate3d(-2000px, 0px, 0px);">
          
          <!-- Slide 1 -->
          <li class="slide" style="width: 1000px; float: left; display: block;">
            <a href="http://www.domainname.com/element1.asp">
              <div class="slide-content">
                <div class="slide-overlay">
                  <div class="slide-button" style="display:none;">
                    <span class="btn" style="color: #ffffff"></span>
                  </div>
                </div>
                <span class="slide-image-wrapper">
                  <img class="slide-image" src="images/products/slider1.jpg" alt="" />
                </span>
              </div>
            </a>
            <div class="slider-nav">
              <a href="http://www.domainname.com/element1.asp">
                <span class="underline"></span>
              </a>
              <ul>
                <li class="element1"><a target="_blank" href="http://www.domainname.com/element1.asp">element1</a></li>
                <li class="element2"><a target="_blank" href="http://www.domainname.com/element2.asp">element2</a></li>
                <li class="element3"><a target="_blank" href="http://www.domainname.com/element3.asp">element3</a></li>
                <li class="element4"><a target="_blank" href="http://www.domainname.com/element4.asp">element4</a></li>
              </ul>
            </div>
            <img class="slide-image slider-over-icon" src="images/products/element1.png" alt="" />
            <h1 class="slider-h1"><span class="slider1-caption">element1</span></h1>
            <h2 class="slider-h2"><span class="slider1-caption2"><a href="http://www.domainname.com/element2.asp">element2 >>></a></span></h2>
          </li>
          
          <!-- Repeat structure for Slides 2-4 with different content -->
          
        </ol>
      </div>
      <ul class="flex-direction-nav">
        <li class="flex-prev" href="#"></li>
        <li class="flex-next" href="#"></li>
      </ul>
    </div>
  </div>
</div>

<script type="text/javascript" src="/CustomPages/js/jquery.flexslider.js"></script>
<script type="text/javascript">
  $(window).load(function() { 
    $('.slide-show').flexslider({ 
      slideshowSpeed: $('.slide-show').attr('data-swap-frequency') * 1000, 
      animation: "slide", 
      pauseOnHover: true, 
      controlNav: true, 
      directionNav: true 
    }); 
  });
</script>
              

The FlexSlider library powers the slider functionality. You'll need to save this code as jquery.flexslider.js and reference it in your HTML.

Key Configuration Options

The FlexSlider library includes numerous customizable options:

• Animation: Choose "fade" or "slide" transitions
• Slideshow Speed: Set timing between automatic transitions (default: 7000ms)
• Direction: Horizontal or vertical sliding
• Control Navigation: Enable/disable pagination dots
• Direction Navigation: Enable/disable prev/next arrows
• Keyboard Support: Allow arrow key navigation
• Touch Support: Enable swipe gestures on mobile devices
• Pause on Hover: Stop autoplay when user hovers over slider

JavaScript Library Code

Due to the length of the complete JavaScript library (approximately 800 lines), we recommend:

1. Download the official FlexSlider library from the WooThemes GitHub repository
2. Or download the complete jquery.flexslider.js file attached to this KB article
3. Upload the file to your /CustomPages/js/ directory

Follow these steps to implement your custom homepage slider:

1Prepare your slider images and save them to your images/products/ directory.

2Download or obtain the jquery.flexslider.js library file.

3Upload the JavaScript file to /CustomPages/js/jquery.flexslider.js.

4Copy the HTML structure and customize all variable elements:

• Replace domain name references
• Update image paths
• Modify link destinations
• Change element labels and captions

5Add the customized HTML to your homepage template or content area.

6Test the slider on both desktop and mobile devices to ensure proper functionality.

Does Pulse Commerce provide slider setup assistance?

No, Pulse Commerce Support does not provide HTML or CSS coding assistance. For technical implementation help, you can either use your own development resources or contact Pulse Support about Professional Services.

Can I use a different slider library?

Yes! The example provided uses FlexSlider, but you can implement any slider library that works with your site. A web search will reveal many free and paid alternatives.

How many slides can I include?

While the example shows 4 slides, you can add as many as needed. Keep in mind that too many slides may impact page load times and user experience.

Will the slider work on mobile devices?

Yes, FlexSlider includes built-in touch support for mobile devices. Users can swipe left/right to navigate slides.

Can I customize the slider appearance?

Yes, you can modify the slider's appearance using CSS. However, remember that Pulse Commerce Support cannot assist with custom CSS development.

Where should I upload the JavaScript files?

Upload JavaScript library files to the /CustomPages/js/ directory in your Pulse Commerce installation.