Slick Carousel Fancy Dots

For a lot of designs, you may end up wanting fancy dots as your slider dots, like these shown here:

To make this happen, simply add the class of .fancy-slick-dots to your slick slider.

Slick Carousel Pink Scroll Arrows

Slick Carousel is a slider we use on a number of pages. Check out their documentation for instructions on how to use!

For many of our sliders, we use pink arrows for the left/right scroll instead of the Slick default arrows. Example:

To make this happen, give your slick slider an additional class of .slick-pink-arrows - that's it!

Alternatively, if you don't want to add an additional HTML class, you can add the line @extend .slick-pink-arrows to your existing styles for your slick slider. I'd recommend this approach if you're already writing some custom CSS for the slider.

Additionally, adding this class will also style the dots at the bottom of your slider, if you have them. (Whether or not the dots appear is a setting you can control in the Slick js you write to initialize the slider.) Here's an example of what the styled dots look like:

Testimonials Slider using Slick

We have a fancy testimonials slider you can add to your pages! For the most part, you can accomplish this look simply by wrapping your code in the class .testimonials-slick and formatting it as demonstrated below.

Testimonials Slick Slider

.blue-page-section
  .testimonials-slick.slick-fancy-dots
    .testimonial
      .body Wow launch is super super awesome!!!!

      .author-details
        .photo
          %img(src="/dyson_sphere/dan.jpg")
        .text-info
          %p.name Dan Pickett
          %p.company Launch Academy
          %p.role Co-founder

    .testimonial
      .body Wow launch is super super awesome!!!!

      .author-details
        .photo
          %img(src="/dyson_sphere/dan.jpg")
        .text-info
          %p.name Dan Pickett
          %p.company Launch Academy
          %p.role Co-founder

Wow launch is super super awesome!!!!

Dan Pickett

Launch Academy

Co-founder

Wow launch is super super awesome!!!!

Dan Pickett

Launch Academy

Co-founder

Updating the Arrow Color

By default, the little arrow under the "body" part of the testimonial will be filled in with white. You can optionally change that - say, to match the background color like so:

To do this, you must write your own custom styling for the testimonials section that includes the mixin testimonial-colored-arrow like so:

.testimonial-slick.online-testimonials {
  @include testimonial-colored-arrow($la-blue);
}

Mobile View

As of right now, testimonials are set up to be vertically-centered in a box of an arbitrary height. If you don't want this to be the case at a certain screen size (say, if your testimonials take up the full width of the page on small screens) you'll need to write your own CSS that sets the height of the .testimonial-section to auto and gets gets rid of the

This documentation generated using Hologram