Bootstrap Carousel Reset

carousel.md

The reset for bootstrap, so I don't have to keep recreating it every single time.

carousel.php

<?php if( !empty( $pk['projects'] ) ):  ?>
  	<div class="slider-wrap">
  		<div id="carousel-industries" class="carousel slide" data-ride="carousel">
  		  <!-- Indicators -->
  		  <ol class="carousel-indicators">
		<?php foreach( $pk['projects'] as $p => $indicator ):  ?>
  		    <li data-target="#carousel-industries" data-slide-to="<?php echo $p; ?>" <?php echo $p == 0 ? 'class="active"' : 'class=""'; ?> ></li>
		<?php endforeach; ?>
  		  </ol>

  		  <!-- Wrapper for slides -->
  		  <div class="carousel-inner" role="listbox">
  		  	<?php foreach( $pk['projects'] as $pr => $project ):  ?>
  		    <div class="item<?php echo $pr == 0 ? ' active' : ''; ?>">
  		      <h3 class="project-heading"><?php echo $project['featured_project']->post_title; ?></h3>
  		      <?php $feature = get_field('feature_image', $project['featured_project']->ID); ?>
  		      <img src="<?php echo $feature['sizes']['portfolio-750-width']; ?>" alt="<?php echo $project['featured_project']->post_title; ?>">
  		      
  		      <div class="carousel-caption">
  		        <a href="<?php echo get_permalink($project['featured_project']->ID) ?>" class="btn-blue btn"><?php echo !empty( $project['button_text'] ) ? $project['button_text'] : 'View Full Project'; ?></a>
  		      </div>
  		    </div>
  		    <?php endforeach; ?>
  		  </div>

  		  <!-- Controls -->
  		  <a class="left carousel-control" href="#carousel-industries" role="button" data-slide="prev">
  		    <span class="fa fa-chevron-left" aria-hidden="true"></span>
  		    <span class="sr-only">Previous</span>
  		  </a>
  		  <a class="right carousel-control" href="#carousel-industries" role="button" data-slide="next">
  		    <span class="fa fa-chevron-right" aria-hidden="true"></span>
  		    <span class="sr-only">Next</span>
  		  </a>
  		</div>
  	</div>
  <?php endif; ?>

styles.less

 .slider-wrap                { margin-bottom:20px; margin-top:50px; text-align: center;
    .project-heading { font-size: 30px; line-height: 36px; margin-bottom: 20px; }

    .carousel                  { .clearfix; }
    .carousel-inner            { text-align:center; margin: auto;
       .item                   { min-height:750px;
                                  @media( max-width: @screen-sm-max ){ min-height: 500px; }
                                  @media( max-width: 480px ){ min-height: 400px; }
          img                  { margin:auto; 
                                   @media( max-width: @screen-sm-max ){ max-width: 75%;}
                               }
          .recent-work-title   { color:@pk-orange; margin-bottom:20px; }
       }
    }

       .carousel-indicators    { display:inline-block; line-height:30px; margin:auto; position:absolute; width:auto; bottom: 0; left: 45%;
          li                   { background:#ddd; border-color:#ddd; margin:0 5px; vertical-align:middle;
             &.active          { background:#313131; border-color:#313131; height: 10px; width: 10px; }
          }
       }
       .control                { color:@gray-dark; display:inline-block; outline:none; margin:0 5px; 
          .fa                  { vertical-align:middle; top: 50%; text-shadow: none; color: #cecece; font-size: 24px;  }
       }
    
    .carousel-control          { background-color: transparent; background-image: none; 
       .fa                     { vertical-align: middle; position: absolute; top: 40%; text-shadow: none; color: #cecece; font-size: 24px;  }
    }
 }