Page 2 of 2

Re: Is there a good horizontal scroller, for images/text via

Posted: Thu Jun 19, 2014 4:39 pm
by simonmlewis
This works fine. You can set the width. you can set how many show on each 'reveal/slide'.
But is there a way on this set of code, that it can be set to 100% width of the screen (ie. smart phone), and show a full width of thumbnails in the carousel, with the Chevrons at either end.

At the moment You have to set a fixed width. I need this to work on a phone, but their screens vary a lot. Seeing as you cannot really do the math and test it for every screen width, can it be set to "stretch" ??

I've tried, but cannot see how it's possible.

Code: Select all

<style>

.carousel-inner .active.left { left: -25%; }.carousel-inner .next        { left:  25%; }.carousel-inner .prev  { left: -25%; }.carousel-control  { width:  4%; }

.carousel-control.left,.carousel-control.right {margin-left:0px;background-image:none; }

.col-xs-3 a
{
color: #000000;
}

.col-xs-3 img
{
height: 50px;
width: 110px;
}


.col-xs-3
{
width: 100px;
height: 110px;
text-align: center
padding: 3px;
BACKGROUND-COLOR: #F0F0F0;
border: 1px solid #ffffff;
}
.col-xs-3:hover
{
BACKGROUND-COLOR: #E8E8E8;
}


.col-xs-3-title
{
padding: 3px;
font-size: 11.2px;
}


.col-xs-3-title a:hover
{
text-decoration: none;
}
</style>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
        
 <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<!-- JavaScript jQuery code from Bootply.com editor  -->
     <script type='text/javascript'>
        $(document).ready(function() {
        
            $('#myCarousel').carousel({
  interval: 4000
})

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
  
  for (var i=0;i<;i++) {
    next=next.next();
    if (!next.length) {
    	next = $(this).siblings(':first');
  	}
    
    next.children(':first-child').clone().appendTo($(this));
  }
});
        });
        </script>



<div class='col-md-6 col-md-offset-3' style='margin:0px; width: 320px; background-color: #F0F0F0;padding: 0px; text-align: center; border-left: 1px solid #ffffff;'>

<div class='carousel slide' id='myCarousel'>
  <div class='carousel-inner'>";
  
    $result = mysql_query ("SELECT * FROM static WHERE section = 'carousel' AND priority = '1' ORDER BY 
priority");
while ($row = mysql_fetch_object($result))
      { 
echo "<div class='item active'>
      <div class='col-xs-3'><a href='$row->url'><img src='/images/pages/$row->image' class='img-responsive'></a><div class='col-xs-3-title'><a href='$row->url'>$row->freetext</a></div></div>
    </div>";
			}
	mysql_free_result($result);
	
	
  $result = mysql_query ("SELECT * FROM static WHERE section = 'carousel' AND priority > '1' ORDER BY 
priority");
while ($row = mysql_fetch_object($result))
      { 
echo "<div class='item'>
      <div class='col-xs-3' style='margin-left: 0px'><a href='$row->url'><img src='/images/pages/$row->image' class='img-responsive'></a><div class='col-xs-3-title'><a href='$row->url'>$row->freetext</a></div></div>
    </div>";
			}
	mysql_free_result($result);
	
	
  
  echo "</div>
  <a class='left carousel-control' href='#myCarousel' data-slide='prev'><i class='glyphicon glyphicon-chevron-left' style='font-size: 35px'></i></a>
  <a class='right carousel-control' href='#myCarousel' data-slide='next'><i class='glyphicon glyphicon-chevron-right' style='font-size: 35px'></i></a>
</div>
</div>";