changing content below slide

This is not as easy as it sounds ?? You will need some programming skill to achieve such result with JavaScript. You will have to use jQuery and Smart Slider’s API.

Here is a sample JavaScript code.
– 424 is the slider ID.
– currentSlideIndex is the index of the slide which is currently visible. Indexing starts from 0.

The following code will show alert messages with the specified text. There you should implement your logic.

n2ss.ready(424, function(slider){
  slider.sliderElement.on('mainAnimationComplete', function(e, animation, previousSlideIndex, currentSlideIndex){
      if(currentSlideIndex == 1){
          alert('Switch to 2nd slide');
      }else if(currentSlideIndex == 2){
          alert('Switch to 3rd slide');
      }else if(currentSlideIndex == 0){
          alert('Switch to 1st slide');
      }
  });
});

I think you will need something like this:

<script>
jQuery(window).ready(function() {
  var contentToSlide = $('.content-to-slide').css('display', 'none');
  contentToSlide.eq(0).css('display', 'block');

  n2ss.ready(424, function(slider) {
    slider.sliderElement.on('mainAnimationComplete', function(e, animation, previousSlideIndex, currentSlideIndex) {
      contentToSlide.css('display', 'none');
      contentToSlide.eq(currentSlideIndex).css('display', 'block');
    });
  });
});
</script>

Also under the slider, you should define your HTML blocks:

<div>
  <div class="content-to-slide">
    Displays when 1st slide active
  </div>
  <div class="content-to-slide">
    Displays when 2nd slide active
  </div>
  <div class="content-to-slide">
    Displays when 3rd slide active
  </div>
</div>

that’s awesome feedback!

I will spend some time analyzing that… ??

thank you