Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
SteveTaber

Before-After Slider Code HTML/CSS/JS

Question

16 answers to this question

Recommended Posts

  • 0

I'm successfully using Foundation's TwentyTwenty slider on a few sites: http://zurb.com/playground/twentytwenty

I'll have a tutorial posted here sometime soon: http://squarefront.com/addons

I'll repost it here when it's ready.


  • 🚀Founder at Squarefront, the global community of Squarespace builders.
  • 🎥Documenting the process of building Squarefront on YouTube.
  • 🚗Senior Design Engineer, Design Platform at Uber.
  • 🍕Connect with me on Instagram, Twitter and Linkedin.
  • Need help with Squarespace? I've used the platform for well over 10 years and have helped thousands of businesses, both small and large. Send me an email!

Share this post


Link to post
  • 0

Thanks to jrlaughlin3 for the help. His instructions are on point! I know many including myself have struggled to get this plugin working and I for one am grateful that Jason took the time to not only figure it out, but to also note each and every step. Huge thanks!

Share this post


Link to post
  • 0

Jake - you’ve got a bit of repetition in there.

  • Step 6 is unnecessary, if you look at the screen at step 7, you will see: “Enter code that will be injected into the ‘head’ tag on every page of your site
  • Further on, on adding a Code Block you include the jQuery, jQuery eventmove and TwentyTwenty files again!

So on every page with the slider you’re including it all twice, and on one page you have it included 3 times.


The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Share this post


Link to post
  • 0

The plug in works great-but I have an issue when I link the page I created with the slider to the index page. When I go to the page now it briefly flashes then disappears. Any help would be appreciated!

Share this post


Link to post
  • 0

The problem with me is that the preview when i click view page is not of my photos instead the broken image link icon and i've doubled check all the steps and used dropbox as well like you suggested. i hope you can assist me as soon as you canalt text

Share this post


Link to post
  • 0

There's a solution for 7.1 done and being sold by Rebecca Grace for 50 CAD.

I guess it's just the 7.0 version updated to work with the new gallery item, just need to figure out what needs to be updated in the old code.

 

Share this post


Link to post
  • 0

This can be done for free with numerous scripts that are available and some code blocks.

https://github.com/kavyasukumar/imgSlider

Is a very easy one to set up and use.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...