Skip to main content
D
dandybox
Inspiring
January 12, 2018
Answered

News section and slides with text and links

  • January 12, 2018
  • 3 replies
  • 260 views

Hi All

I have two things I could do with helpon if you are able

1) How do I create a slide show with text  and hover button/links on each slide

2) How do I add a news section, hosting is with 1&1 so I assume I need a third party? Any recommendations? Also if I do use a third party how do I get the latest news to appear on the home page, styled as I want it

Many Thanks

    This topic has been closed for replies.
    Correct answer dandybox

    HI, thaks all and sorry but I posted in teh wrong place! I'm using Muse. I will open a new post in there.

    3 replies

    D
    dandyboxAuthorCorrect answer
    Inspiring
    January 15, 2018

    HI, thaks all and sorry but I posted in teh wrong place! I'm using Muse. I will open a new post in there.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 12, 2018

    #1  If you're looking for something like this, it's easily created with Bootstrap and the built-in Carousel component.

    Copy & paste the following code into a new, blank document.

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap 3.3.7 Starter</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!--Bootstrap CSS-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>

    .center-block {float:none}

    </style>

    </head>

    <body>

    <div class="container">

    <div class="row">

    <h1>Bootstrap Carousel</h1>

    <!--begin Bootstrap Carousel-->

    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5200">

    <!-- Wrapper for slides -->

    <div class="carousel-inner" role="listbox">

    <!--Slide items-->

    <div class="item active">

    <img src="https://placeimg.com/1200/400/nature" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <a href="https://example.com" class="btn btn-lg btn-info">MORE INFO</a>

    </div>

    </div>

    <div class="item">

    <img src="https://placeimg.com/1200/400/tech" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <a href="https://example.com" class="btn btn-lg btn-info">MORE INFO</a>

    </div>

    </div>

    <div class="item">

    <img src="https://placeimg.com/1200/400/arch" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <a href="https://example.com" class="btn btn-lg btn-info">MORE INFO</a>

    </div>

    </div>

    </div>

    <!-- Left and right controls -->

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

    <span class="sr-only">Previous</span></a>

    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

    <span class="sr-only">Next</span></a>

    <!--end carousel-->

    </div>

    </div>

    <div class="row">

    <div class="col-sm-4">

    <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam obcaecati quia magni dolores sunt. Voluptates, accusantium, officia? Molestiae amet quaerat veniam. Dolorum at sit expedita repudiandae voluptas tenetur ducimus ratione.</P>

    </div>

    <div class="col-sm-4">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam illo non libero architecto. Tempora nesciunt et, sed incidunt, eaque reprehenderit harum, blanditiis vero aperiam nam pariatur maxime vitae. Placeat, quidem.</p>

    </div>

    <div class="col-sm-4">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam illo non libero architecto. Tempora nesciunt et, sed incidunt, eaque reprehenderit harum, blanditiis vero aperiam nam pariatur maxime vitae. Placeat, quidem.</p>

    </div>

    <!--/row--></div>

    <!--container--></div>

    <!--latest jQuery 3-->

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <!--Bootstrap JS-->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </body>

    </html>

    Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 12, 2018

    #2 What exactly do you mean by News?  Are you looking for an RSS feed from a major news network (BBC, Reuters, ESPN...)  or do you mean some "news" about your band and their upcoming play dates?

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices