3 Replies Latest reply on Nov 12, 2015 8:22 AM by Nancy OShea

    How do I center my slideshow?

    blueboy90780 Level 1

      I'm rushing here, so this will be quite a brief question. How do I center my slideshow? Here are the codes you need to find out:


      My Slideshow Code


      This goes in <head></head>

      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


        .carousel-inner > .item > img,

        .carousel-inner > .item > a > img {

            width: 100%;






      This goes in <body></body>

      <div class="container">


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

          <!-- Indicators -->

          <ol class="carousel-indicators">

            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

            <li data-target="#myCarousel" data-slide-to="1"></li>

            <li data-target="#myCarousel" data-slide-to="2"></li>

            <li data-target="#myCarousel" data-slide-to="3"></li>




          <!-- Wrapper for slides -->

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



            <div class="item active">

              <img src="Fallout 4 Slideshow.jpg" alt="Fallout 4" width="460" height="345">

              <div class="carousel-caption">

                <h3>Fallout 4 Release</h3>

                <p>November 10th</p>





            <div class="item">

              <img src="Rainbow Six Siege Slideshow.jpg" alt="Rainbow Six Siege" width="460" height="345">

              <div class="carousel-caption">


                <p>The atmosphere in Chania has a touch of Florence and Venice.</p>




            <div class="item">

              <img src="Fallout_PIP-Boy_2000.jpg" alt="Flower" width="460" height="345">

              <div class="carousel-caption">


                <p>Beatiful flowers in Kolymbari, Crete.</p>





            <div class="item">

              <img src="img_flower2.jpg" alt="Flower" width="460" height="345">

              <div class="carousel-caption">


                <p>Beatiful flowers in Kolymbari, Crete.</p>







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





      My CSS:

      margin-left: auto;
      margin-right: auto;
      width: 92%;
      max-width: 1200px;
      padding-left: 3.275%;
      padding-right: 3.275%;


      My Iframe CSS (The slideshow is in an iframe)

      iframe {

          width: 768px;

          height: 450px;

          margin: 0px;

          padding: 0px;

          background: blue;

          border: 0px;

          display: block;



      My Iframe in source code:

      <iframe src="Home Page Slideshow Iframe.html"

      frameborder="0" scrolling="no" >

      Your browser does not support IFrames.



      I hope that is all you need, thank you:D


      I would like to thank Nancy O for helping me on the slideshow and the timeline, I'll credit you in my website