liquid coroesel bootstrap

Question

davy_yg 2 Posting Whiz

9 Years Ago

Hello,

I am trying to create carousel that is liquid (with bootstrap):

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>

</head>

<body>

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

<!-- BANNERS -->

<div id="demos">
    <div id="slideshow" class="pics">

            <div class="item active">
                <img src="Images/banner1.jpg" width="1000" height="500" class="hidden-phone"/>                       
            </div>
            <div class="item">
                <img src="Images/banner2.jpg" width="1000" height="500" class="hidden-phone"/>                       
            </div>
            <div class="item">
                <img src="Images/banner3.jpg" width="1000" height="500" class="hidden-phone"/>                   
            </div>              

    <ul id="nav1">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>          
    </ul>
</div>

<!-- END BANNERS -->

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

<!-- ICONS -->
<center>
<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>
</table>
</div>
</center>
<!-- END ICONS -->

</div>
</body>

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

<br><br><br><br><br>

<script src="js/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script><!-- Bootstrap -->

        <script type="text/javascript" charset="utf-8"> 
            $(document).ready(function(){

                $('#mySlide1').carousel();

            });
        </script>


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



</html>

I am wishing that the banner will be liquid that adjust to it's environment but this is not the case. The banner does not adjust to its environment.

How to fix it so that the banner turn into a liquid banner?

web-design

4 Contributors
5 Replies
161 Views
1 Week Discussion Span
Latest Post 9 Years Ago Latest Post by diafol

diafol

9 Years Ago

Bootstrap offers fluidity via this class:

<div class="container-fluid">

Edited 9 Years Ago by diafol

tobyITguy 24 Junior Poster

9 Years Ago

Try adding the class img-responsive to the images in the slideshow class.

Reply to this topic

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.

davy_yg 2 Posting Whiz · Answer 1 · 2015-06-26T05:31:42+00:00

Thanks for advice.

This part has not work as it suppose to.

index.php

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

style.css

#icons { height: 180px; width: auto; background-color: #8a8a8a; }

I wonder how to make that icons background adjust to the internet browser.

gentlemedia 803 Master Poster · Answer 2 · 2015-06-26T15:19:40+00:00

div #icons can never reach the full width of the browser window, because it's placed in a div that has a width of 1000px, so div #icons will also get a maximun width of 1000px.

You use bootstrap, so stick with the way bootstrap advices you how to handle the grid. Don't just do whatever comes up in your mind if you don't know what you're doing.

diafol · Answer 3 · 2015-06-26T15:41:18+00:00

Hold up, you're not using tables for layout are you?