Jump to content

Carousel Scrolling Announcement Bar

Recommended Posts

, I have been really wanting a design on my website. The only issue is that sqaurespace doesn't give you the option to do so. So, I came here to see if anyone could help me with some help sharing the code to me. I was wondering if its possible to have a carousel like scrolling announcement bar block in the header of my website. I took a screen shot so that it will give you a better idea. If you can help me please reply back. Thanks!!329946560_ScreenShot2020-09-06at6_06_37PM.thumb.png.2e1264275105a51220b79e6426257a07.png

Link to comment

First, enable Announcement Bar

next, edit Footer > Add Code Block > paste this code

<!-- Scrolling bar - Codepen -->
<div id="text-carousel" class="carousel slide" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="row">
        <div class="col-xs-offset-3 col-xs-6">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="carousel-content">
                        <div>
                            <p>Sapiente, ducimus, voluptas, mollitia voluptatibus nemo explicabo sit blanditiis laborum dolore illum fuga veniam quae expedita libero accusamus quas harum ex numquam necessitatibus provident deleniti tenetur iusto officiis recusandae corporis culpa quaerat?</p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="carousel-content">
                        <div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, sint fuga temporibus nam saepe delectus expedita vitae magnam necessitatibus dolores tempore consequatur dicta cumque repellendus eligendi ducimus placeat! </p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="carousel-content">
                        <div>                          
                            <p>Sapiente, ducimus, voluptas, mollitia voluptatibus nemo explicabo sit blanditiis laborum dolore illum fuga veniam quae expedita libero accusamus quas harum ex numquam necessitatibus provident deleniti tenetur iusto officiis recusandae corporis culpa quaerat?</p>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
    <!-- Controls --> <a class="left carousel-control" href="#text-carousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
 <a class="right carousel-control" href="#text-carousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>

</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
<style>
  .carousel-content {
    color:black;
    display:flex;
    align-items:center;
}

#text-carousel {
  width: 100%;
  height: auto;
  padding: 50px;
}
</style>

Then share site url. We will give the code to move scrolling bar into Announcement bar

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hello @tuanphan, it looks great! But there’s one problem. I’m looking for like another style to what you did. I’m trying to see if it’s possible to do what you just did but have the words stay on the center and scroll in the center like how this announcement bar does down below! If you have any idea how to do this, that would be amazing! Thanks!69CDF568-ED30-4BD8-BF38-989F0A387DF0.thumb.jpeg.635d8c0691f135ac504d104ff6c4f798.jpeg

Link to comment
  • 2 years later...
On 7/13/2023 at 4:49 AM, HelenaL said:

 

Hi @tuanphan, is this code still active? I can't seem to click on it.

I'm looking to add a carousel announcement bar to my website as well, similar to the screenshots shared above. Thanks!

Hi, I removed the code from server

We can add Summary Block, Gallery Block Slideshow...to Footer, then use code to move it into Announcement Bar. What do you think?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 7/16/2023 at 10:36 AM, HelenaL said:

@tuanphan Sorry, I'm not sure I understand what you mean by adding summary block or gallery block slideshow to footer. 

Summary Block/Gallery Block has a Slideshow layout option with left/right arrow. You can use these blocks to achieve carousel scrolling. Then we can use code to move it into Announcement Bar.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.