Member Avatar for davy_yg

Hello,

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

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=""></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 ? '' : '') + '.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
  • 380 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by Member #1112232

Dani AI

Generated

Short version: is right that a fixed-width .container will stop the carousel from spanning the full browser width, but that alone won’t make it fill the viewport height or avoid overlap with the nav. The reliable approach is: remove fixed 1000px/absolute blocks, let the carousel sit directly under the navbar (or use container-fluid), size the carousel to the viewport minus the actual navbar height, and use background images or object-fit: cover so slides always fill the area without distortion.

Things to change in the posted markup/layout

  • Remove the absolute-positioned, fixed-width divs (the ones with width: 1000px; position: absolute;) and convert the icons/footer to normal Bootstrap rows/columns so they flow below the carousel.
  • Put the carousel outside any narrow .container so it can be full width (or wrap it in .container-fluid).
  • If the navbar is fixed, make the carousel height equal to viewport height minus the navbar height so it sits flush under the nav without hiding behind it.

Practical CSS + tiny JS you can drop in (adjust the .navbar selector if your nav uses a different class):

:root { --nav-h: 0px; }
html, body { height: 100%; margin: 0; }
.fullscreen-carousel,
.fullscreen-carousel .carousel-inner,
.fullscreen-carousel .carousel-item {
  height: calc(100vh - var(--nav-h));
}
.fullscreen-carousel .carousel-item {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* alternative: if you keep <img>, make it fill and crop */
.fullscreen-carousel .carousel-item img {
  width: 100%; height: 100%; object-fit: cover;
}
(function(){
  var nav = document.querySelector('.navbar');
  function setNavVar(){
    var h = nav ? nav.offsetHeight : 0;
    document.documentElement.style.setProperty('--nav-h', h + 'px');
  }
  setNavVar();
  window.addEventListener('resize', setNavVar);
})();

Troubleshooting notes

  • Use DevTools to check computed heights and confirm no parent has a fixed width or absolute positioning that shifts layout.
  • Use background images on .carousel-item (or object-fit) to avoid stretching; keep an accessible caption or use role="img" aria-label="..." if the image is purely decorative.
  • Optimize images and use srcset for responsive bandwidth savings.
Member Avatar for Member #1112232

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.