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

Carousel Scrolling Announcement Bar


inunzi

Question

, 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 post
  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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="c

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

Posted Images

12 answers to this question

Recommended Posts

  • 0

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

@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? 

Screen Shot 2020-09-06 at 6.06.37 PM.png

Link to post
  • 0

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

Link to post
  • 0

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

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to post
  • 0

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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 post

Create an account or sign in to comment

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


×
×
  • Create New...