Slider plugin.

Squarespace 7.1

LIVE DEMO

 
slider-create.png

1. Create a section with a slider.

text-section.png
 

2. Create a section with a text content.

3. Add code below to the CUSTOM CSS. You can change text color in @slider-text-color variable.

@slider-text-color: #fff;

.page-with-slider{.page-section.gallery-section.images-for-slider{padding-top: 0px !important;.gallery-fullscreen-slideshow-bullet{border-color: #fff;&.active{background-color: #fff;}}@media only screen and (max-width: 1000px) and (orientation: landscape) {.gallery-fullscreen-slideshow{height: 160vh !important;}.text-for-slider{margin-top: 0px;}}@media only screen and (max-width: 330px){height: 100vh !important;}}.text-for-slider{position: absolute;background: transparent;z-index: 100;.section-background{background: transparent !important;}p,h1,h2,h3,h4,h5, a:not(.sqs-block-button-element--medium){color: @slider-text-color;}@media only screen and (min-width: 640px){margin-top: 5vh;}}}

4. Add code below to the code injection (FOOTER SECTION).

a) Paste code.

b) Then you have to add the URL of the page where the slider is placed to the pageUrl variable inside quotes(‘/page-with-slider').

c) Set sections order numbers to the sliderSectionNum and contnentSectionNum vars.

<script>
  var pageUrl = '/product-merge-draft'; //put tha page url

  var sliderSectionNum = 1; //the order number of the slider section
  var contentSectionNum = 2; //the order number of the text section

document.querySelectorAll('body')[0].setAttribute('data-url', window.location.pathname);if(pageUrl ==  document.querySelectorAll('body')[0].getAttribute('data-url')){sliderSectionNum -=1;contentSectionNum -=1;var bannerSlider =  document.querySelectorAll('#page .sections section')[sliderSectionNum];var sliderContent =  document.querySelectorAll('#page .sections section')[contentSectionNum];document.querySelectorAll('body')[0].classList.add('page-with-slider');bannerSlider.classList.add('images-for-slider');sliderContent.classList.add('text-for-slider');bannerSlider.appendChild(sliderContent);
}</script>

Click save and refresh the page.

PLEASE NOTE: Squarespace sometimes blocks scripts inside the admin panel. Check out your page in an incognito window (without a logged account).