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

Search the Community

Showing results for tags 'slider'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location


Badges


Expert ID

Found 19 results

  1. Site URL: https://bluebird-porcupine-yzdg.squarespace.com/shop/p/block-hoodie Hello, I was wondering if I could get some help improve my image gallery slider? The transition seems to be a little delayed / "sticky" as per my attached video. Here is my current page: https://bluebird-porcupine-yzdg.squarespace.com/shop/p/block-hoodie pword = squarespace I contacted Squarespace and they said that perhaps code will help. Also, is there any way to tap on the image on my Product Page and allow the user to have the image as full screen on mobile device? Similar to this site if you view on mobile. Many thanks! Best, Faiz image slider delay.mp4 image zoom on click.mp4
  2. Site URL: http://www.maryalices.com Hi I included the link of the current website but the website I'm working on right now is here: https://plane-mayflower-pn38.squarespace.com/config/ Is it possible (especially the second image on the slider) to make it look like the balloons are floating and not cut off like the original site? I feel limited in the slider settings but maybe I am doing something wrong!
  3. hi all, I'm using 7.1 and I need to create a slider (gallery section) that's contents is two blocks in each slide: an image and text, side by side. Each time the user moves to the next slide, it shows new a new text block and image, side by side. I've seen lots of request for overlays but not a slider containing two elements. is this possible? thanks!
  4. Site URL: https://www.eye4designavl.com/web-design-asheville-nc So I am trying to make a slider, I know the using blog post and carosuel way but I am trying to use gallery slider. I loaded blank white boxes, and typed the content. I'm curious if there is code out there to bump that text so that it is centered on the image? Any ideas? Thanks!
  5. Site URL: https://moxieespresso.squarespace.com My client wants one of image blocks to a slider of the image with others. They want it to autoplay. However, it seems that the carousel gallery block is not available in the latest update. Anyone have a workaround or some CSS/plugin that will do this?
  6. So I've been trying to create a simple before/after slider for my website and after a while i managed to do some copy pasting that eventually gave me this code. The code works fine when simply put in a text document and launched as a html file but when added into a code block on squarespace the before picture streches with the slider rather than being cropped by it. I'm really not good at coding and any help will be appreciated. <div id="page"> <div class="wrapper"> <div class="before"> <img class="content-image" src="https://static1.squarespace.com/static/5ef72eea964b6e3a6fece508/t/5f11f277df199179a75be322/1595011709533/after.jpg" draggable="false"/> </div> <div class="after"> <img class="content-image" src="https://static1.squarespace.com/static/5ef72eea964b6e3a6fece508/t/5f11f26a402f1548b9366293/1595011696334/before.jpg " draggable="false"/> </div> <div class="scroller"> <svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#fff"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"/></svg> </div> </div> </div> <script>// I hope this over-commenting helps. Let's do this! // Let's use the 'active' variable to let us know when we're using it let active = false; // First we'll have to set up our event listeners // We want to watch for clicks on our scroller document.querySelector('.scroller').addEventListener('mousedown',function(){ active = true; // Add our scrolling class so the scroller has full opacity while active document.querySelector('.scroller').classList.add('scrolling'); }); // We also want to watch the body for changes to the state, // like moving around and releasing the click // so let's set up our event listeners document.body.addEventListener('mouseup',function(){ active = false; document.querySelector('.scroller').classList.remove('scrolling'); }); document.body.addEventListener('mouseleave',function(){ active = false; document.querySelector('.scroller').classList.remove('scrolling'); }); // Let's figure out where their mouse is at document.body.addEventListener('mousemove',function(e){ if (!active) return; // Their mouse is here... let x = e.pageX; // but we want it relative to our wrapper x -= document.querySelector('.wrapper').getBoundingClientRect().left; // Okay let's change our state scrollIt(x); }); // Let's use this function function scrollIt(x){ let transform = Math.max(0,(Math.min(x,document.querySelector('.wrapper').offsetWidth))); document.querySelector('.after').style.width = transform+"px"; document.querySelector('.scroller').style.left = transform-25+"px"; } // Let's set our opening state based off the width, // we want to show a bit of both images so the user can see what's going on scrollIt(450); // And finally let's repeat the process for touch events // first our middle scroller... document.querySelector('.scroller').addEventListener('touchstart',function(){ active = true; document.querySelector('.scroller').classList.add('scrolling'); }); document.body.addEventListener('touchend',function(){ active = false; document.querySelector('.scroller').classList.remove('scrolling'); }); document.body.addEventListener('touchcancel',function(){ active = false; document.querySelector('.scroller').classList.remove('scrolling'); });</script> <style>/* You can remove this page div in your website */ #page{ width:100%; height:100%; position:absolute; } /* Our normalize css */ *{ margin:0; box-sizing: border-box; } /* Our wrapper */ .wrapper{ width: 900px; height: 600px; position: absolute; left:50%; top:50%; transform:translate3d(-50%,-50%,0); overflow:hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } /* Our image information */ .before, .after { width:100%; height:100%; max-width: 100%; background-repeat:no-repeat; background-color: white; background-size: cover; background-position: center; position: absolute; top:0; left:0; pointer-events:none; overflow: hidden; } .content-image{ height:100%; width:relative; } .after{ width:30%; } .scroller{ width: 50px; height:50px; position: absolute; left:100px; top:50%; transform:translateY(-50%); border-radius:50%; background-color: transparent; opacity:0.9; pointer-events:auto; cursor: pointer; } .scroller:hover{ opacity:1; } .scrolling{ pointer-events:none; opacity:1; // z-index: 1; } .scroller__thumb{ width:100%; height:100%; padding:2px; } .scroller:before, .scroller:after{ content:" "; display: block; width: 3px; height: 9999px; position: absolute; left: 50%; margin-left: -1.5px; z-index: 40; transition:0.1s; Background-size: cover; } .scroller:before{ top:100%; } .scroller:after{ bottom:100%; } /* If you want to cahnge the colors, make sure you change the fill in the svgs to match */ .scroller{ border: 5px solid #fff; } .scroller:before, .scroller:after{ background: #fff; }</style>
  7. I just want to add a section that is three pictures, with a small description under each that swipes left and right. These are the only options I am getting:
  8. Site URL: http://studioalvarez.com.au Hi there, I'm wanting to add a text only slider to my home page. Is there an easy way to do this? I have only found how to add a gallery and a gallery slideshow but not a slider without images. Version 7.1 Any help would be greatly appreciated! Thank you 🙂
  9. Site URL: https://www.rebeccagracedesigns.com/blog/before-after-image-slider-squarespace-website Looking at code for before/after image sliders, I see how info on how to set it up but I cant find much documentation on its limits. Am I limited to just one image slider per page, or can I use the slider for multiple instances? I'm evaluating if squarespace is the route I want to use and haven't upgraded to premium, which means I can't test out the code. So I'm hoping some one here has experience with this sort of thing.
  10. Site URL: http://www.jamtype.com Hi there, I am trying to create sliders which alter the size, leading and tracking of a collection of typefaces similar to this site: https://www.nikolastype.com/typefaces/cosi-azure Does anyone know how I can achieve this in Squarspace?
  11. Site URL: https://www.shopmaisaguam.com/shop Any workarounds or code to change the default navigation on my shop page from it being laid out on top to a drop-down style on mobile view? On desktop it looks fine because the screen is wide an all product categories are laid out nicely but on mobile you have to swipe left to see the other categories and a lot of people don't know this feature leaving them to have to scroll through the entire product page to find the items they're looking for.
  12. Site URL: http://badger-indigo-86z4.squarespace.com Hello, I would like to add a sliding banner at the top of my homepage. I'd like to have the same image background, and have the text automatically change over the top - ideally a button as well. (I have set this up as a flat banner with how I want it to look) The theme I'm using is Bergen. I have added a gallery block but can't work out if theres a way to add the copy and format it. It would be great to get this sorted as I can use the same functionality for my testimonials - seems like it should be standard functionality... unless i'm missing something! Thank you!
  13. Site URL: https://www.acnedestruction.com/ Hi I want to have a testimonial slider on my website, however i cannot for the life of my get it to work. So far i have tried the blog function to make a slider but i cannot make it work. Can anyone help me please
  14. I have an Ishimoto carousel gallery as my home page. Is there a way to add a text block above or below this? I haven't figured out how (other than in the footer) and would like to add a little explanatory text so the visitor has some idea what they are looking at. Thanks!
  15. How do I add padding between images in a slider gallery?
  16. I usually work in WP and I am working on my first SS site and started it after all things moved to 7.1 . I see so much info on creating using 7.0 and many people suggesting using Brine for most sites. I need roll over states on my navigation and a banner image on each page to function as a slider. I can see how to create a gallery with images in slideshow, but I do not see any way to have copy or a button on top. Is there a hack to do this? IF not, I think have to start over basically and use 7.0 instead to do what I want to do but that seems like a waste of time! Any suggestions?
  17. Hello, Wondering if someone could help me create a similar slider/menu effect as this website : https://valgeir.net/#works I don't need the transition effect of when you switch between options, but I'd like to recreate the multiple categorial button that sorts depending on which subhead link you click. Or if this is even possible within Squarespace? I'm currently using the Horizon template. Thank you.
  18. Hi all! I recently came across what I consider to be an absolutely perfect quote/text/testimonials slider on this website: https://kaffeine.co.uk/ I’ve recreated something fairly similar using just CSS and HTML, but it’s very finnicky and I can’t get the scrolling arrows or bubbles to work. I’d also love for it to be click-and-draggable on desktop and swipeable on mobile/tablet. Does anyone have any pointers on how to build something like this? Much grattiude! — Jeeves
  19. In regards to Gallery Blocks: Images contained within Slideshow Gallery Blocks can have an image’s Title be made visible. …But Slider, Stacked and Grid Galleries cannot. Does anyone know how to code Gallery Blocks so an image’s Title will appear with pics contained in these other Gallery-types? Thanks!
×
×
  • Create New...