Jump to content

Can I create a slider on Squarespace?

Recommended Posts

Hi - I need to create a website with panel sliders, such as those seen on bbc.co.uk or jamieoliver.com, whereby the user can use the left and right buttons to scroll to a new set of panels or page.

Before I start using squarespace I want to find out if it is possible with with this package.

Link to comment
  • 2 months later...
  • Replies 4
  • Views 27.3k
  • Created
  • Last Reply

The slider HTML Template (within collection in my case)


       <div class="collection-type-gallery">
           <div id="galleryWrapper">

               <div id="slideshowWrapper" style="height: 500px;" class="slideshow-ready">

                   <div id="slideshow" class="sqs-gallery-design-stacked">
                       {.repeated section items}
                       <div class="slide content-fit sqs-gallery-design-stacked-slide loaded" data-slide-id="{id}" data-type="image">
                           {.video?}{@|video-meta}{.end}
                           {.image?}<img {@|image-meta} />{.end}
                       </div>
                       {.end}
                   </div>

                   <div id="imageInfoToggle"><i></i><span>info</span></div>
               </div>

               <div id="simpleControls">
                   <span class="control prev-slide">prev</span> / <span class="control next-slide">next</span>
               </div>

               <div id="numberControls" class="gallery-controls">
                   {.repeated section items}
                   <span class="number" >{@index}</span>
                   {.end}
               </div>

               <div id="dotControls" class="gallery-controls">
                   {.repeated section items}
                   <span class="dot" >·</span>
                   {.end}
               </div>

               <div id="tinyThumbControls" class="gallery-controls">
                   {.repeated section items}
                       <span class="tiny-thumb" >
                           <img src="{assetUrl}?format=100w" height="40"/>
                       </span>
                   {.end}

               </div>

           </div>
       </div>




Then simply JS insertion



<script type="text/javascript">
Y.use( 'squarespace-gallery-stacked', function( Y ) {

   // full slideshow
   if (Y.one('#slideshow .slide')) {
       slideshow = new Y.Squarespace.Gallery2({
           container: Y.one('#slideshow'),
           elements: {
               next: '.next-slide',
               previous: '.prev-slide',
               controls: '#dotControls, #numberControls, #tinyThumbControls'
           },
           lazyLoad: true,
           loop: true,
           design: 'stacked',
           designOptions: {
               autoHeight: false,
               preloadCount: 1
           },
           loaderOptions: { mode: 'fit' }
       });
   }

});
</script>

Link to comment
  • 4 months later...
  • 2 months later...

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.