Jump to content

After & Before Slider

Recommended Posts

Hi there! I am trying to create an after and before image slider to showcase an before and after image of my photography works. Is there anyway that this is possible in Squarespace 7.1? If so, can anyone upload a tutorial on how to do so? Thank you very very much in advance. 🙂

 

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

You mean something like this? 

https://thung.squarespace.com/before-after?noredirect

Pass: abc

or like this?

https://codepen.io/karto/pen/QwKwLv

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 7 months later...
On 1/6/2023 at 10:39 PM, scdesign said:

I'm looking for something exactly like this. How did you do it?

Hi,

It is plugin. https://www.will-myers.com/products/p/before-/-after-image-slider

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...
On 1/24/2023 at 9:41 AM, Sebbo said:

@tuanphanWould you know where exactly to copy/paste these blocks of code into SquareSpace to get this particular before/after slider to work? Seems like the code is here, I just don't know how to add it to my site.

https://codepen.io/josephwong2004/pen/NWRGxdR

Edit page where you want to place this > Add a Code Block > Paste this code into Code BLock

<div class='container1'>
    <div class='img background-img'></div>
    <div class='img foreground-img'></div>
    <input type="range" min="1" max="100" value="50" class="slider" name='slider' id="slider">
    <div class='slider-button'></div>
  </div>
<style>
  .container1 {
  position: relative;
  width: 900px;
  height: 600px;
  border: 2px solid white;
}
.container1 .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 900px 100%;
}
.container1 .background-img {
  background-image: url("https://i.imgur.com/s08MkXC.jpg");
}
.container1 .foreground-img {
  background-image: url("https://i.imgur.com/PfIWek4.jpg");
  width: 50%;
}
.container1 .slider {
  position: absolute;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  background: rgba(242, 242, 242, 0.3);
  outline: none;
  margin: 0;
  transition: all 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container1 .slider:hover {
  background: rgba(242, 242, 242, 0.1);
}
.container1 .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 600px;
  background: white;
  cursor: pointer;
}
.container1 .slider::-moz-range-thumb {
  width: 6px;
  height: 600px;
  background: white;
  cursor: pointer;
}
.container1 .slider-button {
  pointer-events: none;
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: white;
  left: calc(50% - 18px);
  top: calc(50% - 18px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.container1 .slider-button:after {
  content: "";
  padding: 3px;
  display: inline-block;
  border: solid #5D5D5D;
  border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
}
.container1 .slider-button:before {
  content: "";
  padding: 3px;
  display: inline-block;
  border: solid #5D5D5D;
  border-width: 0 2px 2px 0;
  transform: rotate(135deg);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $("#slider").on("input change", (e)=>{
  const sliderPos = e.target.value;
  // Update the width of the foreground image
  $('.foreground-img').css('width', `${sliderPos}%`)
  // Update the position of the slider button
  $('.slider-button').css('left', `calc(${sliderPos}% - 18px)`)
});
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.