Is there a good horizontal scroller, for images/text via DB?

JavaScript and client side scripting.

Moderator: General Moderators

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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>";
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply