The client wanted an exact replica of their website in WordPress, to use for their New/Blog. I used a blank theme (HTML5 Blank) and took the code from the Bootstrap 3 based website and was able to add the header, footer, and all of the styling. My problem arises if you shrink the website down to mobile size (or view on your mobile phone), the bottom “menu” is a bootstrap carousel. When it first loads, the first icon is shifted to the left. After a few seconds, it resolves. I thought maybe there was a delay in loading the boostrap JS, so I tried moving that from the footer to the header, but that didn’t solve the problem.
Any suggestions?
Thank you in advance.
However recently I noticed that the Caption now displays ‘caption text’ (taken from the actual page content) under the ‘caption title’.
In the carousel settings, I don’t use any custom css, but I do have the following settings for the carousel which might be important for you to know:
Show Slide Titles / Captions? YES
HTML before title: <h4>
HTML after caption text: </h4>
HTML before caption text: <p>
HTML after caption text: </p>
So the caption title which is defined for each individual carousel image page is coded as a <h4>, which is OK.
But it is followed by a <p> tag which now appears to be pulling the page content from the page the carousel is being displayed. (Where previously it used to be blank.. ie: only the title displayed, nothing else).
This is a new development, and I haven’t changed the carousel settings or images, since the site went live. Nor have I changed anything else on the site – except to keep updating all plugins and WordPress versions to be current.
So I think something has changed in one of the updates for the CPT Bootstrap Carousel plugin which makes the caption work differently.
How can I remove the <p> ‘caption text’ that is appearing after the <h4>’ caption title’? In other words, I only want the title to display as a caption.
Thanks,
SunnyOz
<?php
$slides = array();
$args = array( 'tag' => 'slide', 'nopaging'=>true, 'posts_per_page'=>5 );
$slider_query = new WP_Query( $args );
if ( $slider_query->have_posts() ) {
while ( $slider_query->have_posts() ) {
$slider_query->the_post();
if(has_post_thumbnail()){
$temp = array();
$thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'full', true);
$thumb_url = $thumb_url_array[0];
$temp['title'] = get_the_title();
$temp['excerpt'] = get_the_excerpt();
$temp['image'] = $thumb_url;
$slides[] = $temp;
}
}
}
wp_reset_postdata();
?>
<?php if(count($slides) > 0) { ?>
<div id="carousel-example-generic" class="carousel-slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<ol class="carousel-indicators">
<?php for($i=0;$i<count($slides);$i++) { ?>
<li data-target="#carousel-example-generic" data-slide-to="<?php echo $i ?>" <?php if($i==0) { ?>class="active"<?php } ?>></li>
<?php } ?>
</ol>
<?php $i=0; foreach($slides as $slide) { extract($slide); ?>
<div class="item <?php if($i == 0) { ?>active<?php } ?>">
<img src="<?php echo $image ?>" alt="<?php echo esc_attr($title); ?>">
<div class="carousel-caption"><h3><a href="<?php the_title(); ?><?php the_permalink(); ?>"</a><?php echo $title; ?></h3><p><?php echo $excerpt; ?></p></div>
</div>
<?php $i++; } ?>
</div>
</div>
</div>
<?php } ?>
We have been using Bootstrap-Carousel for a while with no problems.
Until now. We just updated WP and other plugins (maybe Bootstrap-Carousel too? we did it without paying much attention).
So after those WP and plugins updates a glitch showed up in the gallery where the images don’t fit the gallery frame anymore (they used to fit perfectly). Now they leave a blank space to the right.
We found a similar post/support about it, but it is not our case, since we didn’t change images and before updates they fitted perfectly.
Please check to see.
Thanks developers in advance for any help and thanks for the awesome plugin.
diego
nusa
https://www.ads-software.com/plugins/cpt-bootstrap-carousel/
]]>thank you.
https://www.ads-software.com/plugins/cpt-bootstrap-carousel/
]]>My carousel loop is getting the featured image attached to four posts with the category of “frontpage.”
The Bootstrap carousel needs the first div to have the class of “active,” so I am looping through one post to get that; then I’m using “do not duplicate” to skip the first post when I loop through the others.
I have this code:
<div class="container col-xs-6 col-sm-4">
<div class="carousel slide" id="featured">
<ol class="carousel-indicators" style="bottom:-50px;">
<li style="background-color:#ccc;" data-target="#featured" data-slide-to="0" class="active"></li>
<li style="background-color:#ccc;" data-target="#featured" data-slide-to="1"></li>
<li style="background-color:#ccc;" data-target="#featured" data-slide-to="2"></li>
<li style="background-color:#ccc;" data-target="#featured" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<?php $args = array( 'category_name' => 'frontpage', 'posts_per_page' => 1 ); ?>
<?php $my_query = new WP_Query( $args );
while ( $my_query->have_posts() ) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<div class="item active">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
</div>
<?php endwhile; ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
if ( $post->ID == $do_not_duplicate ) continue; ?>
<div class="item">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
</div>
<?php endwhile; endif; ?>
</div><!-- carousel-inner -->
<a class="left carousel-control" href="#featured" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"> </span>
</a>
<a class="right carousel-control" href="#featured" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"> </span>
</a>
</div><!-- carousel -->
</div><!-- container -->The problem is the second loop is picking up posts from all categories, not just those with the frontpage category.
If I change the first line of the second loop to:
<?php if ( $my_query->have_posts() ) : while ( $my_query->have_posts() ) : $my_query->the_post();
if ( $post->ID == $do_not_duplicate ) continue; ?>… I break it. I don’t get the last three images at all.
If this is the wrong approach, I’m happy to try something else. Thank you.
]]>‘.carousel {
height:50em;
overflow:hidden;
width:cover;
z-index:-100;
}
.carousel-inner{
width:100%;
left:50%;
height:72em;
-webkit-transform: translate(-50%, -10%);
-ms-transform: translate(-50%, -10%);
transform: translate(-50%, -10%);
position:absolute;
z-index:-100;
}’
https://www.ads-software.com/plugins/cpt-bootstrap-carousel/
]]>Problem is I would like to have multiple carousels on my site but can only create 1 with my code.
How do I modify code to be able to create multiple carousels and place with shortcode like [carousel id=”xx”]?
Here is my code :
function jd_bs_theme_setup() {
add_image_size( 'jd_bs_carousel_image', 1170, 385, true);
}
add_action( 'after_setup_theme', 'jd_bs_theme_setup' );
// Creates Carousel Image Custom Post Type
add_action( 'init', 'register_jd_bs_carousel_image' );
function register_jd_bs_carousel_image() {
$labels = array(
'name' => _x( 'Carousel Images - use shortcode[carousel] to insert into page or post', 'carousel_image' ),
'singular_name' => _x( 'Carousel Image', 'carousel_image' ),
'add_new' => _x( 'Add New', 'carousel_image' ),
'add_new_item' => _x( 'Add New Carousel Image', 'carousel_image' ),
'edit_item' => _x( 'Edit Carousel Image', 'carousel_image' ),
'new_item' => _x( 'New Carousel Image', 'carousel_image' ),
'view_item' => _x( 'View Carousel Image', 'carousel_image' ),
'search_items' => _x( 'Search Carousel Images', 'carousel_image' ),
'not_found' => _x( 'No carousel images found', 'carousel_image' ),
'not_found_in_trash' => _x( 'No carousel images found in Trash', 'carousel_image' ),
'parent_item_colon' => _x( 'Parent Carousel Image:', 'carousel_image' ),
'menu_name' => _x( 'Carousel Images', 'carousel_image' ),
);
$args = array(
'labels' => $labels,
'hierarchical' => false,
'description' => 'Images for Bootsrap Carousel',
'supports' => array( 'title','thumbnail','excerpt' ),
'taxonomies' => array( 'category' ),
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'menu_position' => 20,
'menu_icon' => 'dashicons-images-alt',
'show_in_nav_menus' => true,
'publicly_queryable' => true,
'exclude_from_search' => false,
'has_archive' => true,
'query_var' => true,
'can_export' => true,
'rewrite' => true,
'capability_type' => 'post'
);
register_post_type( 'carousel-image', $args );
}
function jd_bs_carousel($atts) {
// Set Shortcode Attributes
extract(shortcode_atts(array(
'posts' => -1,
), $atts));
// Start the Return String
$return_string = '<div id="jd_bs_carousel" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner" >';
// starting a new variable for indicators!
$indicators = '<!-- Indicators -->
<ol class="carousel-indicators" >';
// The query
$the_query = new WP_Query(array(
'post_type' => 'carousel-image',
'posts_per_page' => $posts,
));
$i = 0;
// The loop
while ( $the_query->have_posts() ) :
$the_query->the_post();
if ( $i == 0 ) {
$return_string .= '<div class="item active">'.get_the_post_thumbnail($the_query->post->ID,'jd_bs_carousel_image').'<div class="carousel-caption">
<h1>'.get_the_title().'</h1>
<p>'.get_the_excerpt().'</p>
</div>
</div><!-- item active -->';
// The first indicator!!
$indicators .= '<li data-target="#jd_bs_carousel" data-slide-to="0" class="active"></li>';
}
else {
$return_string .= '<div class="item">'.get_the_post_thumbnail($the_query->post->ID,'jd_bs_carousel_image').'<div class="carousel-caption">
<h1>'.get_the_title().'</h1>
<p>'.get_the_excerpt().'</p>
</div>
</div><!-- item -->';
// Continue the indicator var
$indicators .= '<li data-target="#jd_bs_carousel" data-slide-to="'.$i.'"></li>';
}
$i++;
endwhile;
wp_reset_postdata();
// Finishing up the indicators var and add it to $return_string
$indicators .= '</ol>';
$return_string .= $indicators;
// Finish the Return String and Clean Up
$return_string .= '</div>
<!-- Controls -->
<a class="left carousel-control" href="#jd_bs_carousel" 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="#jd_bs_carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>';
return $return_string;
}
add_shortcode('carousel', 'jd_bs_carousel');Please help, I need to complete this project ASAP
]]>I’m trying to create a dynamic carousel for a Bootstrap theme without the use of a plugin so I can customize it more.
Based on the following code it should load all the posts’ attached images and put them in the slider:
The only thing I have trouble with is that the active slide should be set as ‘active’ and that the indicators should work. The static version is found here: https://getbootstrap.com/examples/carousel/
` <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”>
<?php
$argsThumb = array(
‘order’ => ‘ASC’,
‘post_type’ => ‘attachment’,
‘post_parent’ => $post->ID,
‘post_mime_type’ => ‘image’,
‘post_status’ => null
);
$attachments = get_posts($argsThumb);
if ($attachments) {
foreach ($attachments as $attachment) {
//echo apply_filters(‘the_title’, $attachment->post_title);
echo ‘<div class=”item active”>’;
echo ‘<div class=”container”>’;
echo ‘<img src=”‘.wp_get_attachment_url($attachment->ID, ‘thumbnail’, false, false).'” style=”width: 100%; height: 400px;” />’;
echo ‘</div>’;
echo ‘</div>’;
}
}
?>
</div> <!– carousel – inner –>
<a class=”left carousel-control” href=”#myCarousel” data-slide=”prev”><span class=”glyphicon glyphicon-chevron-left”></span></a>
<a class=”right carousel-control” href=”#myCarousel” data-slide=”next”><span class=”glyphicon glyphicon-chevron-right”></span></a>
</div><!– /.carousel –>`
Thanks 
I just noticed that if I insert the following code into my header.php where I want the slider and I don’t have any slides created yet, the website content on the front end goes blank:
<!-- /.slider -->
<?php if (is_front_page()) : ?>
<?php include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
if (is_plugin_active('cpt-bootstrap-carousel/cpt-bootstrap-carousel.php')) {
echo do_shortcode('[image-carousel]');
} ?>
<?php else : ?>
<?php endif; ?>
<div class="clear"></div>If I add a slide it all displays fine- is this normal or am I doing something wrong?
Thanks
https://www.ads-software.com/plugins/cpt-bootstrap-carousel/
]]>