Manish Pushkar Jha

Full Stack Web Developer
March 1, 2021
4:28 pm

How to make bootstrap 4 slider dynamic?

22 Views  •  December 24th, 2019  •  3 minutes read

Hi Manish,

I saw your quick and short answers on stack overflow, Can you please tell me how to create dynamic bootstrap 4 slider without using any plugin. I don’t want to make my website slow by using plugins, only I am using contact form 7 plugin, I am making one blog theme from scratch, please help. let me know if You need my source code.


first you have to create one custom post type as follows, add these lines in ‘functions.php’:

//first you have to create one custom post type as follows, add these lines in 'functions.php':

//add custom menus
function codex_custom_init() {
        'Slider', array(
			'labels' => array('name' => __( 'Slider' ), 'singular_name' => __( 'Slider' ) ),
			'public' => true,
			'has_archive' => true,
                        'supports' => array('title', 'editor', 'thumbnail'),
		        'menu_icon' => 'dashicons-admin-generic', // can use any icon
    add_action( 'init', 'codex_custom_init' ); 
//Here post title will be slider title and post description will be slider description, featured image will be slide image.

//now add these line in your page template, where you want slides:

				<div class="row">
					<div class="col-sm-12 p-0">
							<div id="main-slider" class="carousel slide mt-0" data-ride="carousel">

								<?php $args = array(
									'posts_per_page' => 5,
									'post_type' => 'slider',
									$slider = new WP_Query($args);
									$count = $slider->found_posts;
								<ol class="carousel-indicators">
									<?php for($i = 0; $i < $count ;  $i++) { ?>
										<li data-target="#main-slider" data-slide-to="<?php echo $i; ?>" class="<?php echo ($i == 0) ? 'active' : ''?>"></li>
									<?php } ?>
								</ol> <!--.carousel-indicators-->

								<div class="carousel-inner" role="listbox">
									<?php $i = 0; while($slider->have_posts()): $slider->the_post(); ?>
										<div class="carousel-item <?php echo ($i == 0) ? 'active' : ''?>">
											<?php the_post_thumbnail( 'slider', array(
												'class' => 'd-block img-fluid',
												'alt' => get_the_title() ) ) ; ?>
												<div class="carousel-caption d-md-block">
													<h3 class="text-uppercase"><strong>We are good at</strong>&nbsp;<?php echo get_the_title(); ?></h3>
													<p><?php echo get_the_content(); ?></p>
									<?php $i++; endwhile; ?>
								</div> <!--.carouse-inner-->

								<a href="#main-slider" class="carousel-control-prev" data-slide="prev">
									<span class="carousel-control-prev-icon" aria-hidden="true"></span>
									<span class="sr-only">Previous</span>
								<a href="#main-slider" class="carousel-control-next" data-slide="next">
									<span class="carousel-control-next-icon" aria-hidden="true"></span>
									<span class="sr-only">Next</span>

								<?php endif;  wp_reset_postdata(); ?>

//can change 'divs and classes' as per your need.