The source of html http://bootsnipp.com/snippets/featured/simple-carousel
And Here is my code to display thumbnail 6 items per page carousel within php for loop.
<div id="Carousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<?php
$arr = array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15);
?>
<?php
echo "<div class='item active'>";
echo "<div class='row'>";
foreach($arr as $key=>$value)
{
//if we can divide $key by six without remainder
if ($key % 6 == 0)
{
echo "</div>";
echo "</div>";
echo "<div class='item'>";
echo "<div class='row'>";
}
echo "<div class='col-md-2'>";
echo '<img src="images/img'.$value.'.jpg" alt="Image" style="max-width:100%;">';
echo "</div>";
}
echo "</div>";
echo "</div>";?>
</div><!--.carousel-inner-->
<a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#Carousel" class="right carousel-control">›</a>
</div><!--.Carousel-->
why the first 6 items not appear, but 6 items second page come appear.
what do I missed?
Thanks
if ($key % 6 == 0 AND $key!=0)
There is no issues n items in jQuery Carousel but you can give display limitation by css.
Please refer this link you can get more idea.
http://sorgalla.com/jcarousel/docs/reference/installation.html
Related
I'm working on a carousel in which each images will come from my PHP database. However, each slide just show the same thing. Not sure what loop to include since there is already a 'while' statement.
My database structure is this.
The table name is 'items'
column 1 - id
column 2 - name
column 3 - image
What I'm trying to achieve is for every slide to show the 'image' of every 'id.
Example:
id #1 - potato.jpg
id #2 - tomtato.jpg
and so on...
The code is below.
function display_carousel(){
global $conn;
echo "<div id='myCarousel' class='carousel slide' data-ride='carousel'>
<ol class='carousel-indicators'>
<li data-target='#myCarousel' data-slide-to='0' class='active'></li>
<li data-target='#myCarousel' data-slide-to='1' class='active'></li>
</ol>
<div class='carousel-inner' role='listbox'>";
$sql = "SELECT image FROM items";
$result = mysqli_query($conn,$sql);
while($row = mysqli_fetch_assoc($result)){
extract($row);
echo "<div class='item active'>
<img src='$image' alt='Image'>
<div class='carousel-caption'>
<h3>CAPTION</h3>
</div>
</div>
<div class='item'>
<img src='$image' alt='Image'>
<div class='carousel-caption'>
<h3>CAPTION</h3>
</div>
</div>";
}
echo "</div>";
echo "<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>";
}
The first thing I would do is to make sure what you are getting out of your database is what you think it is by using a var_dump(). Just make sure you are not getting three of the same images from there.
echo '<pre>';
var_dump($result);
echo '</pre>';
How to display two item at a time in one slide of bootstrap slider using php for loop please help me for that i have written the below code for that please suggest
for ($i=0;$i<=$num_logo-1;$i++){
$result_logo = db_fetch_row($qid_logo);
if($i== 0 ) {
echo "<div class=\"item active\" >\n";
echo"<div class=\"col-lg-6 col-md-6 col-sm-12 col-xs-12\" style=\"float:left; padding-right:10px; text-align:center;\">";
echo"<img src=\"images/winner_logo/".$result_logo[3]."\" class=\"img-responsive center-block\" ><br><b>".$result_logo[1]."</b>";
if(($i+1) % 2 == 0) {
echo "</div>";
echo "</div>";
}
} else {
echo "<div class=\"item\" >\n";
echo"<div class=\"col-lg-6 col-md-6 col-sm-12 col-xs-12\" style=\"float:left; padding-right:10px; text-align:center;\">";
echo"<img src=\"images/winner_logo/".$result_logo[3]."\" class=\"img-responsive center-block\" ><br><b>".$result_logo[1]."</b>";
echo"</div>";
echo "</div>\n";
}
}
You Can use array chunk function
<?php foreach (array_chunk($array, 2, true) as $column){ ?>
<div class="row"> <!--this will be outer area-->
<?php foreach ($column as $item){ ?>
<div class="col-md-6"> <!--this will be inner item area-->
<p></p>
</div>
<?php } ?>
</div> <!--this will be outer area closing-->
<?php } ?>
replace outer area with your bootstrap divs and inner area with your per item data...:)
I'm using a php foreach loop to pull data from database to generate a header but as I know there is only one result there must be a more efficient way?
<?php
foreach ($category as $value)
{
echo "<header style='background-color:#".$value->CategoryColor."'>";
echo "<div class='container'>";
echo "<div class='row'>";
echo "<div class='col-lg-12'>";
echo "<div class='page-intro'>";
echo "<span class='title'><i class='fa ".$value->CategoryIcon."'></i> ".$value->CategoryTitle."</span>";
echo "<span class='descriptive'>".$value->CategoryDescription."</span>";
}
?>
This is using CodeIgniter MVC
<?php
foreach ($category->result() as $value): ?>
<header style="background-color:#<?= $value->CategoryColor; ?>">
<div class='container'>
<div class='row'>
<div class='col-lg-12'>
<div class='page-intro'>
<span class='title'><i class='fa <?= $value->CategoryIcon; ?>'></i> <?= $value->CategoryTitle; ?></span>
<span class='descriptive'><?= $value->CategoryDescription; ?></span>
}
<?php endforeach;?>
?>
I am trying to create an image carousel, but that requires 2 seperate divs for the scroller, one active one, and then another which is not active but can be scrolled to...
This is what I'm trying to acomplish:
//the first 4 of a foreach
<div class="item active">
<img src="<?php $images[$i]; ?>">
<img src="<?php $images[$i]; ?>">
<img src="<?php $images[$i]; ?>">
<img src="<?php $images[$i]; ?>">
</div>
//the next 4 of a foreach
<div class="item">
<img src="<?php $images[$i]; ?>">
<img src="<?php $images[$i]; ?>">
<img src="<?php $images[$i]; ?>">
<img src="<?php $images[$i]; ?>">
</div><!-- /item -->
//now after every 4 repeat the <div class="item"> with the images inside, </div>
This is my foreach
<?php $i = 1; foreach(explode(",",$this->product->images) as $images): ?>
On each 4 I don't want the 4 divs to be repeated on the img inside the div.
I'm not sure how I will accomplish this?
Thanks to the posters. but now it's showing 5 instead of 4?
<div class="item active">
<?php $i=1 ; foreach(explode( ",",$this->product->images) as $images): ?>
<div data-target="#carousel" data-slide-to="<?php echo $i; ?>" class="thumb">
<img src="<?php echo Config::get('URL') .'images/products/'.System::escape($this->product->username). '/item' .System::escape($this->product->id) .'/'. System::escape($images); ?>"></div>
<?php if ($i % 4==0 ) {
echo '</div><div class="item">';
echo '<div data-target="#carousel" data-slide-to="'.$i. '" class="thumb"><img src="'.Config::get( 'URL') . 'images/products/'.System::escape($this->product->username). '/item' .System::escape($this->product->id) .'/'. System::escape($images).'"></div>';
} $i+=1; endforeach; ?>
</div>
<!-- /item -->
You can use the modulo operation to check, if your counter variable is the multiple of 4:
if ($i % 4 == 0) {
echo '</div><div>';
}
You just need to make sure that your foreach actually increases the value of $i on every iteration.
Alternatively you could reset $i back to 0 inside of the if body, so it always counts only to 4 and never higher. But I prefer the modulo solution, because that way you have an actual counter variable, not a fake one. :)
You can use Simple approach , add at start and also closing at the end like
<?php
$i=1;
foreach($arrayItems as $single){
if($i%4 == 0){
?>
<div class="Special">
<?php
}
?>
<div class="regular">Regular content</div>
<?php
if($i%4 == 0){
?>
</div>
<?php
}
$i+=1;
}
?>
i´m trying to display multiple divs with the images of a repeater field (ACF plugins).
For example Div 1 with image 1 - Div 2 with image 2 - etc...
with this markup:
<div id="project" class="item">
<a href="#">
<img src="img/project1.jpg" alt="project1" width="240" height="173">
</a>
<div class="art_title">
<p>SWEET LIFE #1</p>
</div>
<div class="mask"></div>
</div>
So, repeating it thru the html I displayed all the images, but now i´m integratin it in the wordpress and I have the following problem:
I´m using the repeater field to get all the images, so with this code:
<?php $slides = get_field('project_thumbnails');
// Grabs the array
// Check if there is any data in the array before looping
if($slides) {
//we need to close this div
echo '<div id="project_slider" class="item">';
foreach($slides as $s) {
echo '<div class="aimagediv" >'; //adding the start tag of the div
echo '<a href="#">';
echo '<img src="'.$s['project_thumb'].'" alt="" />';
echo '</a>';
echo '</div>'; //CLOSING THE DIV JUST ADDED
}
echo '<div class="art_title">';
echo '<p>SWEET LIFE2</p>';
echo '</div>';
echo '<div class="mask">';
echo '</div>';
echo '</div>'; //closing the first div,not sure if you want this, its optional
}
?> <?php endwhile; // end of the loop. ?>
I get the images of the repeater but it displays all into the same div, it doesn´t create a new div id=¨project". So it shows like this:
And the markup created on the page it´s like all the images are into the same div.
<div id="project" class="item">
<a href="#">
<img src="img/project1.jpg" alt="project1" width="240" height="173">
<img src="img/project1.jpg" alt="project1" width="240" height="173">
</a>
<div class="art_title">
<p>SWEET LIFE #1</p>
</div>
<div class="mask"></div>
</div>
What i´m doing wrong?
<?php $slides = get_field('project_thumbnails');
// Grabs the array
// Check if there is any data in the array before looping
if($slides) {
//we need to close this div
foreach($slides as $s) {
echo '<div id="project_slider" class="item">';
echo '<div class="aimagediv" >'; //adding the start tag of the div
echo '<a href="#">';
echo '<img src="'.$s['project_thumb'].'" alt="" />';
echo '</a>';
echo '</div>'; //CLOSING THE DIV JUST ADDED
echo '<div class="art_title">';
echo '<p>SWEET LIFE2</p>';
echo '</div>';
echo '<div class="mask">';
echo '</div>';
echo '</div>'; //closing the first div,not sure if you want this, its optional
}
}
?> <?php endwhile; // end of the loop. ?>