Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
Sign in to follow this  
Guest

Can I create a slider on Squarespace?

Question

Guest

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.

Edited by Guest

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 1

Hi. Can you tell us WHERE we put that top HTML code or how to implement, and where specifically we insert the javascript, or how to implement? Thanks!

Share this post


Link to post
  • -1

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>

Edited by mordamax

Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  

×
×
  • Create New...