jQuery Image slider on blogger blog spot individual post

Want jQuery image slider for blogger in individual post then add some code in blogger temples .

Demo slider  

first back blogger temples  then copy below code and paste before</head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css" type="text/css" />

 <script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<script>
    $(document).ready(function() {
        $('.bxslider').bxSlider({
            auto: true,
            autoControls: true,
            captions: true
        });
    });
</script>
The add below css code right before ]]></b:skin>

.bxslider img{
width:100%;
height:500px;
}
.bx-wrapper img {
display: inline !important;
}

you can change the width and height of the slider in that code if you need to

Now create new post or insert below code into blogger post

<ul class="bxslider">
<li><img src="ImageURL1" title='CaptionGoesHere' /></li>
<li><img src="ImageURL2" title='CaptionGoesHere' /></li>
<li><img src="ImageURL3" title='CaptionGoesHere' /></li>
<li><img src="ImageURL4" title='CaptionGoesHere' /></li>
</ul>

You will need to paste your image url (don’t forget the http://) and your image caption where it is indicated above

now check
done