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 comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 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 comment

Create an account or sign in to comment

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

×
×
  • Create New...