Carousel Scrolling Announcement Bar

, 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!!

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

@tuanphan For some reason the carousel arrows aren't working, and the code block made my header smaller. Is there a fix to this? And also how can i bring the code block to top of the header like seen in the screen shot? 

Hi @inunzi

Did you like auto scroll (Horizontal) announcement bar?
If you like it, I can make it a widget on SQSP without coding!

Please use the like button if it helps you!

Best,
Leopold

@IXStudio or @tuanphan. I can’t seem to put the scrolling announcement bar in the top of the page. Can you help me with the code to do so? And also Can you help me put in a code so that the code block doors to affect my text font size else we’re? Thanks!

My purpose is something else than you think! I said auto scroll (like news) for your announcement bar.
If you like to use it just let me know please. I'll add it to Ninja Kit for you.

Please use the like button if it helps you!

Best,
Leopold

@IXStudio Do I have to pay for it? And also can I get a preview of what it would look like? Thanks!

Please contact me via DM. I'll show you some demos.

@IXStudioI messaged you.

@IXStudio I click on your profile and then hit the message but right? Because that’s what I did and I need to know if I sent it in the right area. 

You can try this code. I tested on my demo site.

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!

Here’s a better example to go with the screen shot above ^. 

On 9/12/2020 at 10:02 AM, tuanphan said:

You can try this code. I tested on my demo site.

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!

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?

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

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.