unbounce-slider v1.1.2

Unbounce Slider

Unbounce Slider is an easy-to-use library for creating customizable sliders in Unbounce.

Installation

1. Add the styles to your Unbounce page

<link rel="stylesheet" href="https://unpkg.com/swiper@^6.0.0/swiper-bundle.min.css" />

<link rel="stylesheet" href="https://unpkg.com/unbounce-slider/dist/unbounce-slider.min.css" />

2. Add the scripts to your Unbounce page

<script src="https://unpkg.com/swiper@^6.0.0/swiper-bundle.min.js"></script>

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>

<script src="https://unpkg.com/unbounce-slider/dist/unbounce-slider.min.js"></script>

Basic usage

1. Add the slider class to the slider element.
2. Add the slide class to the slide elements inside the slider element.

You can use multiple sliders in one page.

Advanced usage

Parameters

Put the parameters to the slider element's class list. You can find the list of the parameters in this link.

You can use the parameters in this way: {parameterName}-{value}. For example: loop-true or slidesPerView-1.

You can use desktop specific parameters in this way: {parameterName}-desktop-{value}. For example: loop-desktop-false or slidesPerView-desktop-3.

Note: A few parameters can't customizable. The list of these parameters: spaceBetween, createElements, watchSlidesVisibility, autoHeight. And you can't customize the breakpoints either.

Note: There is no guarantee that all of the parameters will work as expected. The tested parameters: loop, slidesPerView, centeredSlides, pagination, navigation

Pagination

Add the pagination-true to the slider element's class list.

Navigation

1. Add the slider-prev and slider-next classes to the corresponding navigation buttons (the buttons can be any type of element)
2. Add the navigation-true class to the slider element's class list.

Note: The navigation buttons must be inside the slider element.

Customization

You can customize the selector classes in this way:

<script>
    slider({
        selector: '.custom-selector',
        slideSelector: '.custom-slide',
        navigation: {
            prev: '.custom-prev-btn',
            next: '.custom-next-btn',
        }
    });
</script>

Options:

• selector:

  • The selector of the slider element
  • Default value: .slider

• slideSelector:

  • The selector of the slide elements inside the slider element
  • Default value: .slide

• navigation:

  • prev:
    • The selector of the previous navigation button inside the slider element
    • Default value: .slider-prev
  • next:
    • The selector of the next navigation button inside the slider element
    • Default value: .slider-next