Articles in this section

See more

Custom Gallery Slider

  • Updated

We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this workaround.

In this article, you will learn how to create sliders with any content in them. For example, you can create a testimony slider.

Follow these steps:

Step 1. Give the class name to the Gallery Slider module

In your page editor add a "Gallery Slider" module. Add any image to it under "Options" > "Upload Images" (the slider won't work if it's empty). Then add the "sp-slider" class name under "Styles" > "Classes".

Step 2. Give the class name to the custom section

Now you will need to create a separate section for each slide that you want to show in the "Gallery Slider". Each section should have the "sp-slide" class added to it under "Section" > "Styles" > "Classes".

Each section can contain any content that you would like to be shown in the slider. For example, it could be a few paragraphs, images, buttons, and even multi-column layouts. As long as everything is contained in the single section with the "sp-slider" class.

Step 3. Add the custom JavaScript

Add a "Code" module as the first element on the page (or at least before the "Gallery Slider"). In "Options" > "Edit Code" paste the following JavaScript:

<script>
  (function($) {
    $(document).ready(function() {
      var $slides = $('.sp-slide');
      var $slider = $('.sp-slider .semplice-gallery-slider');

      if ($slider.length && $slides.length) {
        var content = [];

        $slides.each(function(index, slide) {
          var $slide = $(slide).find('.container').clone();
          $slide.addClass('sgs-slide sp-slide-container');
          content.push($slide);
        });

        $slider.empty().append(content);
      }
    });
  })(jQuery);
</script>

Step 4. Add the custom CSS

Go back to Semplice dashboard and in the "Customize" > "Advanced" > "Custom CSS" add the following CSS:

/* SP Gallery Slider - Start */
.sp-slide {
 display: none !important;
}

.sp-slide-container {
 line-height: inherit;
 text-align: inherit;
 padding: 0;
}

.sp-slider .flickity-slider .sgs-slide {
 pointer-events: none !important;
}

.sp-slider .flickity-slider .sgs-slide.is-selected {
 pointer-events: auto !important;
}
/* SP Gallery Slider - End */

Related articles