Slideshow: Add link dots at the bottom of your slideshow

If you'd like to add the link dots at the bottom of your slideshow to indicate how many images are in the slider and also to use as navigation, you can try this modification. 

Result:

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

1

Modify your theme's Javascript file

Use this link to learn which Javascript file to open for your version of Pipeline:

Where to add your Javascript code

After you've opened the correct file for your version of the theme:

Use the Find feature (1) in the right pane where the code is: Command-F on Mac or Control-F in Windows.

Search for:

dots: false

Modify the value (2) to

dots: true

Example:

Save the file. 

2

Modify the style code

Code to use:

/* -- code to add homepage slider dots -- */
.template-index .slick-slider {
  margin-bottom: -30px;
}

  .slick-dots {
    list-style: none;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
    width: 100%;
    li {
      position: relative;
      display: inline-block;
      height: 20px;
      width: 20px;
      margin: 10px 0px 0px 0px;
      padding: 0;
      cursor: pointer;
    }
  }

.slick-dots {
  li {
    button {
      border: 0;
      background: transparent;
      display: block;
      height: 20px;
      width: 20px;
      outline: none;
      line-height: 0px;
      font-size: 0px;
      color: transparent;
      padding: 5px;
      cursor: pointer;
      &:hover, &:focus {
        outline: none;
        &:before {
          opacity: $slick-opacity-on-hover;
        }
      }
      &:before {
        position: absolute;
        top: 0;
        left: 0;
        content: $slick-dot-character;
        width: 20px;
        height: 20px;
        font-size: $slick-dot-size;
        line-height: 20px;
        text-align: center;
        color: #dddddd;
        opacity: $slick-opacity-not-active;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
    }
    &.slick-active button:before {
      color: #555555;
      opacity: $slick-opacity-on-hover;
    }
  }
}

/* -- end -- */

Where do I add the CSS code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Notes:

This modification works with sectioned versions of Pipeline 2.x and higher. The slideshow dots are designed to work when there is another section below the slideshow. Move the section higher if it's at the bottom of all your sections (should not be last section before footer). 

Always make a duplicate of your theme when making code modifications before you begin.