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>

      <style>

        .carousel-inner > .item > img,

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

            width: 100%;

         margin-left:20px;

         margin-right:20px;

        }

        </style>

       

      This goes in <body></body>

      <div class="container">

        <br>

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

          </ol>

       

       

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

            </div>

       

       

            <div class="item">

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

              <div class="carousel-caption">

                <h3>Chania</h3>

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

              </div>

            </div>

         

            <div class="item">

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

              <div class="carousel-caption">

                <h3>Flowers</h3>

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

              </div>

            </div>

       

       

            <div class="item">

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

              <div class="carousel-caption">

                <h3>Flowers</h3>

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

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

        </div>

      </div>

       

      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.

      </iframe>

       

      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