0

Hello,

I am trying to create carousel that would fits the whole screen up to touching the navigation bar and the whole horizontal screen.

http://www.innovation.web.id/One/One/

This is my code (it does not fits my expectation):

index.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<script src="js/jquery.min.js" type="text/javascript"></script>
<!--
<script src="js/chili-1.7.pack.js"></script>
<script src="js/jquery.cycle.all.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript" ></script> -->
<link href= "css/style.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/styledrop.css" rel="stylesheet" type="text/css" media="screen" >
<!-- <link href= "css/banner.css" rel="stylesheet" type="text/css" media="screen"> -->


<script type="text/javascript">
$('#slideshow').cycle({ 
    fx:     'fade', 
    speed:   900, 
    timeout: 10000, 
    pager:  '#nav1', 
    pagerAnchorBuilder: function(idx, slide) { 
        // return selector string for existing anchor 
        return '#nav1 li:eq(' + idx + ') a'; 
    } 
});
</script>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-35837400-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

<!--
<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: auto;
  }
  </style>
</head>

<?php   include('nav.php');  ?>

<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="Images/banner1.jpg" alt="Chania" width="1000" height="500">
        <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="Images/banner2.jpg" alt="Chania" width="1000" height="500">
        <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="Images/banner3.jpg" alt="Flower" width="1000" height="500">
        <div class="carousel-caption">
          <h3>Flowers</h3>
          <p>Beatiful flowers in Kolymbari, Crete.</p>
        </div>
      </div>

      <div class="item">
        <img src="Images/banner3.jpg" alt="Flower" width="1000" height="500">
        <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>

</div>
</body>

<div style="margin: 50px 0 0 0; width: 1000px; position: absolute;">

<!-- ICONS -->
<center>
<div class="container-fluid">
<div id="icons">
<table border="0">
    <tr>
    <td>
    <div style="padding-left: 30px;"><img src="Images/Home/icon1.jpg"></div>   
    </td>
    <td>
    <img src="Images/Home/icon2.jpg">
    </td>
    <td>
    <div style="padding-left: 30px;"><img src="Images/Home/icon3.jpg"></div>
    </td>
    <td>
    <img src="Images/Home/icon4.jpg">
    </td>
    </tr>
    <tr style="color:#f9e062;">
    <td style="width:200px; text-align:center;">BRANDING</td>
    <td style="width:200px; text-align:center;">WEB DESIGN</td>
    <td style="width:200px; text-align:center;">PACKAGING</td>
    <td style="width:200px; text-align:center;">ILLUSTRATION</td>
    </tr>
</table>
</div>
</div>
</center>
<!-- END ICONS -->

</div>


<div style="margin: 280px 0 0 0; width: 1000px; position: absolute;"> 

<?php include('footer.php'); ?>



</html> 
2
Contributors
1
Reply
11
Views
2 Years
Discussion Span
Last Post by janetriever
0

If you want it to be fullscreen than you should not place it in a container because the container is narrower. Instead you could use container-fluid which is full width

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.