Jump to content

Before / After Slideshow Pinterest Code

Recommended Posts

I need to show a lot of before and afters on my 7.0 website. I can do this easily with slideshow. However, its making some of my pages load very slow on mobile devices, even after optimizing images. So is there a way I can use Pinterest or similar to store my photos, but use a code to somehow create a slideshow of before after images? I want the images to have a 2 second auto transition between slides, or arrows at the side to click through.

Ideally I don't want to use I-Frame as I find it doesnt always look right on various mobile devices.

 

 

Link to comment
  • Replies 2
  • Views 210
  • Created
  • Last Reply

Top Posters In This Topic

1 hour ago, Nealt2000 said:

I need to show a lot of before and afters on my 7.0 website. I can do this easily with slideshow. However, its making some of my pages load very slow on mobile devices, even after optimizing images. So is there a way I can use Pinterest or similar to store my photos, but use a code to somehow create a slideshow of before after images? I want the images to have a 2 second auto transition between slides, or arrows at the side to click through.

Ideally I don't want to use I-Frame as I find it doesnt always look right on various mobile devices.

 

 

Can you share your site with the protected password so we can take a look at your case?

Some screenshots could be better

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 7/16/2022 at 2:16 PM, bangank36 said:

Can you share your site with the protected password so we can take a look at your case?

Some screenshots could be better

Hey, am willing to show screenshots, but don't want to give my password out sorry.

Website is built on 7.0. Using Hayden template. Ajax is on.

Page 1 is pretty good, but, the before/ after banner does sometimes cause the page to hang on mobile. It apperas white for a few seconds while it loads.

Page 2 I need a lot more content to explain things further in detail. Its taking 5/6 seconds to load on average on mobile devices. The page again just appears white while its loading. Most images are around 250-400kb each in size, 1000 wide or less. There is a lot more on page 2 that I haven't shown, but it's in the same style, text then image, text image etc etc.

Other pages use fewer photos, and they all load super fast no problems.

Im using the Slideshow feature to show the before/ after. Ive added some code also to change the colour of the arrows. Hopefully that's enough to go on? See screenshots attached

page 1 screenshot mobile.jpg

page 2 screenshot mobile.jpg

sgwd-gwladus-mates-no-more-tourists-2.jpg

sgwd-gwladus-mates-tourists-people.jpg

Link to comment

Create an account or sign in to comment

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

×
×
  • 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.