Add slider in wordpress without any plugin

Question

I have a slider and I have added it in my wordpress project and its working fine as per my expectation.

How I did add slider without plugin

I have entered following code in the following files..

/*.........HEADER.PHP......*/
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">        
#myCarousel .nav a small {
display:block;
}
#myCarousel .nav {
background:#eee;
}
#myCarousel .nav a {
border-radius:0px;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js">    </script>

/*...............    FOOTER.PHP       ...........*/

<script type="text/javascript">
$(document).ready( function() {
$('#myCarousel').carousel({
    interval:   400000
});
    var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
        clickEvent = true;
        $('.nav li').removeClass('active');
        $(this).parent().addClass('active');        
}).on('slid.bs.carousel', function(e) {
    if(!clickEvent) {
        var count = $('.nav').children().length -1;
        var current = $('.nav li.active');
        current.removeClass('active').next().addClass('active');
        var id = parseInt(current.data('slide-to'));
        if(count == id) {
            $('.nav li').first().addClass('active');    
        }
    }
    clickEvent = false;
});
});
</script>

/*....................  INDEX.PHP    ........................*/

<div class="wrapper">
<div class="cont col-12 col-m-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">    
  <!-- Wrapper for slides -->
  <div class="carousel-inner">      
    <div class="item active  col-12">
      <img src="<?php bloginfo('stylesheet_directory')?    >/images/demo/slider/sdslider-1.jpg" width="100%">
       <div class="carousel-caption">
        <h2>Headline</h2>
        <p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac  morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.  </p>
      </div>
    </div><!-- End Item -->
     <div class="item col-12">
      <img src="<?php bloginfo('stylesheet_directory')?>/images/demo/slider/pic3.jpg" width="100%">
       <div class="carousel-caption">
        <h2>Headline</h2>
        <p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
      </div>
    </div><!-- End Item -->        
    <div class="item col-12">
      <img src="<?php bloginfo('stylesheet_directory')?>/images/demo/slider/pic2.jpg" width="100%">
       <div class="carousel-caption">
        <h2>Headline</h2>
        <p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
      </div>
    </div><!-- End Item -->        
    <div class="item col-12">
      <img src="<?php bloginfo('stylesheet_directory')?>/images/demo/slider/pic1.jpg" width="100%">
       <div class="carousel-caption">
        <h2>Headline</h2>
        <p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
      </div>
    </div><!-- End Item -->
<div class="item col-12">
      <img src="<?php bloginfo('stylesheet_directory')?>/images/demo/slider/pic4.jpg" width="100%">
       <div class="carousel-caption">
        <h2>Headline</h2>
        <p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
      </div>
    </div><!-- End Item -->                 
  </div><!-- End Carousel Inner -->
    <ul class="nav nav-pills nav-justified col-12">
      <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">College Overview</a></li>
      <li data-target="#myCarousel" data-slide-to="1"><a href="#">Our Collaborators</a></li>
      <li data-target="#myCarousel" data-slide-to="2"><a href="#">Workshops</a></li>
      <li data-target="#myCarousel" data-slide-to="3"><a href="#">Guest Lectures</a></li>
  <li data-target="#myCarousel" data-slide-to="4"><a href="#">Industrial Visits</a></li>
    </ul>
</div><!-- End Carousel -->
</div>
</div>

So by adding these code in php files slider is working fine.

So whats the problem?

Problem is that code which I have entered in index.php that code I wants to add in wordpress page. Because if I leave my code in index.php then In future I have to use filezila to upload new images, So I wants to add html in wordpress page instead of index.php.

I tried to add code of index.php into wordpress page But that method is not working, don't know what's the reason. I tried to find solution but didn't get sufficient answer.

Answer 1

This is because you can't use php code directly in Wordpress. Simple way to do this is to place your javascript and css code in header.php or footer.php file of your Wordpress theme.

Best is to keep all your css files and code in header.php and javascript files and code in footer.php.

/*....WP-Content/Themes/Selected-Theme/header.php ...*/
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">        
#myCarousel .nav a small {
display:block;
}
#myCarousel .nav {
background:#eee;
}
#myCarousel .nav a {
border-radius:0px;
}
</style>


/*....WP-Content/Themes/Selected-Theme/footer.php ...*/

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js">    </script>

<script type="text/javascript">
$(document).ready( function() {
$('#myCarousel').carousel({
    interval:   400000
});
    var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
        clickEvent = true;
        $('.nav li').removeClass('active');
        $(this).parent().addClass('active');        
}).on('slid.bs.carousel', function(e) {
    if(!clickEvent) {
        var count = $('.nav').children().length -1;
        var current = $('.nav li.active');
        current.removeClass('active').next().addClass('active');
        var id = parseInt(current.data('slide-to'));
        if(count == id) {
            $('.nav li').first().addClass('active');    
        }
    }
    clickEvent = false;
});
});
</script>

Then in your carousel code update slider [image src=""] with full url according to your live website like this:

<img src="http://YOUR-WP-WEBSITE/wp-content/themes/YOUR-THEME-DIRECTORY/images/demo/slider/sdslider-1.jpg" width="100%">

After updating your images path in carousel code you can paste it in any page through WP-Admin.

Note: Wordpress also adds paragraph "p" tags automatically this can produce an issue for bootstrap slider. If this happens then you need to place below code in functions.php file of your theme. Taken from here

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );