This code is not working properly. It shows result in each single thumbnail instead of showing in single thumbnail and does not move.
<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">
<ul class="thumbnails">
<li class="span2">
<?php foreach ($oneimg->result() as $oneimg):?>
<div class="thumbnail">
<img src="<?php echo HTTP_IMAGES_PATH_UPLOADIMAGE; ?><?php echo $oneimg->images ?>"
alt="" class="img-responsive" style="height:180px; width:100%"/>
</div>
<?php endforeach; ?>
</li>
</ul>
</div>
</div>
</div>
<?php
foreach ($oneimg as $oneimg_new)
{
?>
<div class="thumbnail">
<img src="<?php echo HTTP_IMAGES_PATH_UPLOADIMAGE; ?><?php echo $oneimg_new['images']?>"
alt="" class="img-responsive" style="height:180px; width:100%"/>
</div>
<?php
}
?>
thank you all for answer
but i have solved it and it works perfect here is the solution
<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 $i = 1; ?>
<?php foreach ($oneimg->result_array() as $oneimg): ?>
<?php $item_class = ($i == 1) ? 'item active' : 'item'; ?>
<div class="<?php echo $item_class; ?>">
<a href="#">
<img src="<?php echo HTTP_IMAGES_PATH_UPLOADIMAGE; ?><?php echo $oneimg['images']; ?>"
alt="" class="img-responsive" style="height:400px; width:100%" />
</a>
</div>
<?php $i++; ?>
<?php endforeach; ?>
</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>
Related
Here is my Bootstrap ui that the data is fetched from the database. As you can see, the carousel is going down and cannot click next it just goes down. from the page.
1
please see the image above
data that I'm fetching are texts and not image
and here is my code
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 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>
<?php
$dataid;
$data = mysqli_query($con,"SELECT * FROM feedback");
$count = mysqli_num_rows($data);
if ($count != 0) {
echo '
<div class="row ">';
while($row = mysqli_fetch_array($data)) {
echo '
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="item carousel-item active">
<p class="testimonial">'. $row['comment'] .'</p>
<p class="overview"><b>Anonymous</b></p>
<div class="star-rating">
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-heart" ></i></li>
<li class="list-inline-item"><i class="fas fa-thumbtack" ></i></li>
<li class="list-inline-item"><i class="fas fa-archive"></i></li>
<li class="list-inline-item"><i class="fa fa-trash" ></i></li>
<li class="list-inline-item"><i class="fa fa-star-o"></i></li>
</ul>
</div>
</div>
</div>
';
}
}
?>
<!-- Carousel controls -->
<a class="carousel-control left carousel-control-prev" href="#myCarousel" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="carousel-control right carousel-control-next" href="#myCarousel" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
</div>
The carousal structure is like
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
</div>
so you need to repeat the carousel-item
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php while($row = mysqli_fetch_array($data)) { ?>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<?php } ?>
</div>
</div>
If you need to display the text in the Carousel that comes from database then just give some padding and background-color to the Image
<div class="carousel-item active">
<img src="<?php echo imageSrcFromDb; ?>" width="1100" height="500">
<div class="carousel-caption">
<h3><?php echo ; //Your Heading text ?></h3>
<p><?php echo ; //Some description ?></p>
</div>
</div>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<?php
while($row = mysqli_fetch_array($data)) {
echo '
<div class="item carousel-item">
<p class="testimonial">'. $row['comment'] .'</p>
<p class="overview"><b>Anonymous</b></p>
<div class="star-rating">
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-heart" ></i></li>
<li class="list-inline-item"><i class="fas fa-thumbtack" ></i></li>
<li class="list-inline-item"><i class="fas fa-archive"></i></li>
<li class="list-inline-item"><i class="fa fa-trash" ></i></li>
<li class="list-inline-item"><i class="fa fa-star-o"></i></li>
</ul>
</div>
</div>
';
}
?>
</div>
the while loop should be inside the class carousel-inner .
I am using the advanced custom fields Wordpress plugin to create various slides for a slider. To display the slider I am using Bootstraps Carousel.
The body of the slider if functioning fine. I don't, however, know how to loop through, count the slides and print a carousel indicator to the page for each slide.
I currently have 3 hardcoded at the top of the slider.
<ul 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>
<li class="carousel-inner">
<?php
$c = 0;
$class = '';
while ( have_rows('slide') ) : the_row();
$c++;
if ( $c == 1 ){ $class = ' active';}
else{ $class=''; } ?>
<?php
$image = get_sub_field('image'); ?>
<div class="carousel-item <?php echo $class; ?> image" style="background: url('<?php echo $image; ?>') no-repeat; background-size: cover; background-position: left center;">
</div>
<?php
endwhile; ?>
</li> <!-- end li.image -->
</ul> <!-- end ul -->
I need to find a way to open the ordered list before the slider starts and close it when it ends. At the same time, I need to echo out its li elements for each slide.
<section id="banner">
<?php if( have_rows('slides') ) { ?>
<?php
$num = 0;
$active = 'active';
?>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<?php while( have_rows('slides') ) : the_row() ; ?>
<li data-target="#carouselExampleIndicators" data-slide-to="<?php echo $num; ?>" class="<?php echo $active; ?>"></li>
<?php
$num++;
$active = '';
?>
<?php endwhile; ?>
</ol>
<div class="carousel-inner">
<?php $active = 'active'; ?>
<?php while( have_rows('slides') ) : the_row() ;
$image = get_sub_field('image');
$mainText = get_sub_field('main_text');
$subText = get_sub_field('sub_text');
?>
<div class="carousel-item <?php echo $active; ?>">
<img class="d-block w-100" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>">
<div class="carousel-caption d-none d-md-block">
<h5><?php echo $mainText; ?></h5>
<p><?php echo $subText; ?></p>
</div>
</div>
<?php $active = ''; ?>
<?php endwhile; ?>
</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>
<?php } ?>
</section>
If your HTML is like this :
<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" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="..." alt="Third slide">
</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>
Then use this php code :
<?php
$sliders = get_field('slide');
if($sliders){ ?>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<?php $isActive ='';
foreach($sliders as $key=>$slider){
if($key==0){
$isActive = 'active';
}
echo '<li data-target="#carouselExampleIndicators" data-slide-to="'.$key.'" class="'.$isActive.'"></li>';
} ?>
</ol>
<div class="carousel-inner" role="listbox">
<?php
$activeSlide ='';
foreach($sliders as $key=>$sliderimg){
if($key==0){
$activeSlide = 'active';
}
echo '<div class="carousel-item '.$activeSlide.'">';
echo '<img class="d-block img-fluid" src="'.$sliderimg['image']." alt="First slide">';
echo '</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>
<?php } ?>
So I've created a bootstrap carousel in WordPress and it works fine. My only problem is that when I click on the image it doesn't take me to the specific article. How Can I solve this? Here is my Code:
<div class="container slider-container">
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php $slider = get_posts(array('post_type' => 'post', 'posts_per_page' => 3)); ?>
<?php $count = 0; ?>
<?php foreach($slider as $slide): ?>
<div class="item <?php echo ($count == 0) ? 'active' : ''; ?>">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($slide->ID)) ?>" class="img-responsive"/>
</a>
</div>
<?php $count++; ?>
<?php endforeach; ?>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Change <?php the_permalink(); ?> to <?php echo get_permalink($slide->ID); ?>.
Why:
the_permalink() gets the current permalink for the current post in the loop. You are not in the loop, you are simply querying posts. By changing to get_permalink() and passing an ID into the function, you are getting the specific permalink for this slide.
See get_permalink() here.
here is my purposition, i used it on my websites, hope to help you !
`<?php
$args = array(
'post_type' => 'slide',
'posts_per_page' => -1,
'order' => 'ASC',
);
$slide = new WP_Query($args);?>
<?php if ($slide->have_posts()): ?>
<div id="slider">
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide carousel-fade" data-ride="carousel" data-interval=10000>
<div class="">
<ol class="carousel-indicators">
<?php $i = 0;while ($slide->have_posts()): $publicity->the_post();?>
<li data-target="#carousel-example-generic" data-slide-to="<?php echo $i ?>" class="<?php if ($i === 0): ?>active<?php endif;?>"></li>
<?php $i++; endwhile;?>
</ol>
<div class="carousel-inner">
<?php $i = 0;while ($slide->have_posts()): $slide->the_post();?
<div class="carousel-item <?php if (0 == $i) {echo ' active';}?>" style="background:url('<?php the_post_thumbnail_url('full');?>') center center no-repeat; background-size: cover; min-height: 100vh;">
<div class="carousel-caption d-none d-md-block">
<div class="row align-items-center ">
<div class="col-lg-4 title">
<span><?php the_title();?></span>
<h2><?php the_content();?></h2>
</div>
</div>
</div>
</div>
<?php $i++;endwhile;?>
</div>
</div>
</div>
</div>
</div>
<?php wp_reset_postdata();endif;?>
`
I have a custom post type that may or may not include images to display in a carousel/slideshow. How can I have the carousel display ONLY if there have been images added to the post via Advanced Custom Fields? Below is the code I have so far. It works other than if there aren't images associated with the post, the frontend still shows the carousel controls and whatnot.
To further this, it'd be great to know how to have the indicators auto populate with the number of images added. As of now I have the indicators commented out.
<!-- slideshow -->
<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 if( have_rows('timeline_images') ): ?>
<?php while( have_rows('timeline_images') ): the_row();
// vars
$image = get_sub_field('timeline_image');
?>
<div class="item">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" title="<?php echo $image['title'] ?>" />
</div>
<?php endwhile; ?>
<?php endif; ?>
</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>
<!-- /slideshow -->
You can probably do the same with your indicators as you do with your images (not tested):
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php if( have_rows('timeline_images') ): ?>
<?php
$carrousselCount = 0;
while( have_rows('timeline_images') ): the_row();
$carrousselCount++;
?>
// indicators
<li data-target="#myCarousel" data-slide-to="<?php echo $carrousselCount ?>" class="<?php echo $carrousselCount === 0 ? 'active' : '' ?>"></li>
<?php endwhile; ?>
<?php endif; ?>
<!-- end ol -->
</ol>
</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>