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.


Answer:

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':

<?php
//add custom menus
function codex_custom_init() {
register_post_type(
        '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',
									'order'=>'ASC'
									);
									$slider = new WP_Query($args);
									if($slider->have_posts()):
									$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>
												</div>
										</div><!--.carousel-item-->
									<?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>
								<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>
								</a>

								<?php endif;  wp_reset_postdata(); ?>
							</div>
						
					</div>
				</div>

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