I want to show on a carousel/slider the photos related to the last 3 posts that have been made on my page.
The $last3 variable gets the last three posts:
<div class="row carousel-holder">
<div class="col-md-12">
<div id="carousel-example-generic" class="product carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
#foreach($last3 as $post)
<div class="item active">
<div class="fill" style="background-image:url('../../images/Blog/{{$post->photo}}');"></div>
<h2>{{$post->title}}</h2>
</div>
#endforeach
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
Related
So I have this bootstrap 4 carousel div
<div class="firstHalfRoomPagePart">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
#foreach($room_data as $key => $r)
<div class="carousel-item {{$key == 0 ? 'active' : '' }}">
<img src="{{ $room_data ->images[0]}}" class="d-block roomImages" alt="...">
</div>
#endforeach
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
where in carousel inner I am trying to get the images dynamically to display them in my view.
I am trying to get the json from here:
"images": [
"/img/room_img/subbuteo_1.jpg",
"/img/room_img/subbuteo_2.jpg"
],
Any idea on how to do it?
I store my pictures that are uploaded on my website in the database, then when I load them in my website, I store them in an array. My problem is I want to display the pictures in a slideshow but because sometimes the array not always is the same, I cannot display it right!
I tried to do if statement but then the function of slideshow didn't work at all!
Also, My array works fine! just having a problem with displaying
$photosarray= array(); //array to store photos names
$count=0;
while ($row2=mysqli_fetch_array($res2))
{
$image=$row2['img_name'];
$photosarray[$count]=$image;
$count=$count+1;
}
echo'
<td>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../photo/'.$photosarray[0].'" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../photo/'.$photosarray[1].'" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</td>';
echo '
<p class="font-weight-bold">click the image to view in full
size.</p>
</div>
</tbody>
';
I expect that my slideshow works depending on how many images in the array! so is the array has only 2 images then the slideshow should only have 2 slides!
You need to display in a loop, change:
<div class="carousel-item active">
<img src="../photo/'.$photosarray[0].'" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../photo/'.$photosarray[1].'" class="d-block w-100" alt="...">
</div>
to
foreach($photosarray as $photo){
print('
<div class="carousel-item">
<img src="../photo/'.$photo.'" class="d-block w-100" alt="...">
</div>
');
}
try this
<?php
$photosarray= array(); //array to store photos names
$count=0;
while ($row2=mysqli_fetch_array($res2))
{
$image=$row2['img_name'];
$photosarray[$count]=$image;
$count=$count+1;
}
echo'<td>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>';
foreach($photosarray as $photo){
echo '
<div class="carousel-item">
<img src="../photo/'.$photo.'" class="d-block w-100" alt="...">
</div>
';
}
echo '<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</td>';
echo '<p class="font-weight-bold">click the image to view in full size.</p>
</div>
</tbody>
';
or
<td>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php
$counter = 1;
while($row2 = mysql_fetch_array($res2)){
?>
<div class="carousel-item<?php if($counter <= 1){echo " active"; } ?>">
<img alt="First slide image" src="<?php echo '../photo/'.$row2['img_name']; ?>"/>
</div>
<?php
$counter++;
}
mysql_close($connection);
?>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1"></li>
<li data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol>
</div>
</div>
</td>
<p class="font-weight-bold">click the image to view in full size.</p>
</div>
How to loop the data? All image are displaying at one slide other slides are empty.
<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">
<?php foreach($banner as $data) { ?>
<div class="item active">
<img src="<?php echo base_url()?>uploads/banner/<?php echo $data['image']?>" alt="Chania" width="460" height="345">
</div>
<?php }?>
<div class="item">
<img src="<?php echo base_url()?>assets/image/c.jpg" alt="Chania" width="460" height="345">
</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>
How to loop the data? All image are displaying at one slide other slides are empty.
Use the below code.
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php
$i = 0;
foreach($banner as $data) { ?>
<div class="item <?php echo $i==0 ? 'active' : ''; $i++; ?>">
<img src="<?php echo base_url()?>uploads/banner/<?php echo $data['image']?>" alt="Chania" width="460" height="345">
</div>
<?php }?>
</div>
I've used Bootstrap carousel in my webpage but there is a problem in the slides. The first image slides with content, second is blank, then third image slides, then third image there is blank page slide.
My code:
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" ></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2" class="active"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img src="/site/img/daa.jpg" >
</div>
<div class="item">
<img src="/site/img/2.jpg" >
</div>
<div class="item active">
<img src="/site/img/grad.jpg" >
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
No margins, no padding, no .left or .right , and finally no spaces in the code..
What could the problem be?
Your code has some issues im edited your code Look at new updated and now you can understand Bootstrap Carousel Plugin
The Carousel plugin is a component for cycling through elements, like a carousel (slideshow).
Learn more about it W3SCHOOL
<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>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="http://s32.postimg.org/osirordf9/2_black_wallpaper_pattern_preview.jpg" alt="First slide">
<div class="container">
</div>
</div>
<div class="item">
<img class="second-slide" src="http://s32.postimg.org/osirordf9/2_black_wallpaper_pattern_preview.jpg" alt="Second slide">
<div class="container">
</div>
</div>
<div class="item">
<img class="third-slide" src="http://s32.postimg.org/osirordf9/2_black_wallpaper_pattern_preview.jpg" alt="Third slide">
<div class="container">
</div>
</div>
</div>
<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
Thanks for your interest. I've used fiddle and tested my carousel, it worked fine there,
so after more effort, I detected the problem. It was because I have css file with
.next,.prev{
display: none !important;
}
but I don't understand deeply why it causes blank slide, not only white sides in my slides!
thanks again
I want to create a carousel. This is my code:
<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/m1.jpg" alt="Poza 1" width="460" height="345">
</div>
<div class="item">
<img src="/images/m2.jpg" alt="Poza 2" width="460" height="345">
</div>
<div class="item">
<img src="/images/m3.jpg" alt="Poza 3" width="460" height="345">
</div>
<div class="item">
<img src="/images/m3.jpg" alt="Poza 3" width="460" height="345">
</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>
I have all the pictures in the folder images...but they don't appear. So when I go in the images folder and I want to see the pictures, appear this:
Warning:
require_once(/home/files/public_html/6/skins/shinra/google_view.template.php) [function.require-once]: failed to open stream: No such file or
directory in /home/files/public_html/6/skins/shinra/view1.template.php
on line 19
Does anyone have an idea on whats going on and how I can fix it?