How to make a picture slideshow responsive navigation below

How to make a picture slideshow responsive which I will share very easy, pal just open the settings of bloggers, we open up the layout, and add HTML or javascript,and stay on our store, and it's up to the code you want to save anywhere,the advantages of installing a script that I share is that you without having to change a part of the HTML template, but the drawback is you have to set the link that is in which I will share

1. the first step in on blogger layouts, see below.
   
2. as in the view of the above, for the numbers 1, we click on it, then we will see a popup, and from there we select Java script / html,as in the view below
   
3. then enter the code which I will share in the textarea below, for the title blank

The following javascript code and simply copy and paste it,but before do not forget you have to change the links that are in it, as I will share below.

<link rel='stylesheet' id='camera-css' href='http://project.dimpost.com/camera-slideshow/css/camera.css' type='text/css' media='all'>
<!-- Camera Slideshow Scripts -->
<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/camera.min.js'></script>
<script type='text/javascript'>
jQuery(function() {
    jQuery('#camera_wrap_1').camera({
        time: 2500, // milliseconds between the end of the sliding effect and the start of the nex one
        transPeriod: 1200, // length of the sliding effect in milliseconds
        thumbnails: false, // thumnails & tooltip is controlled by it
        pagination: true, // only when "pagination" is set to "false" thumbnails will be visible
        fx: 'curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop', // transition effects
        hover: false, // Pause on hover
        height: '50%' // slideshow height (50% is default)
    });
});
</script>
<style type="text/css">
.fluid_container {
    margin: 0 auto;
    /* aling centered */
    width: 100%;
    max-width: 900px;
    overflow: hidden;
}


/* Blogger CSS Conflict Fix */

.camera_pag_ul {
    border: none !important;
    background: none !important;
}

.camera_pag_ul li {
    float: inherit !important;
    padding: inherit !important;
}

.camera_pag_ul {
    margin: 0 !important;
    border: 0 !important;
}
</style>
<div class="fluid_container">
    <!-- camera_slideshow camera_wrap-->
    <div class="camera_wrap" id="camera_wrap_1">
        <div data-link="http://www.your url.com/" data-thumb="http://your url image.jpg" data-src="http://your url image 2.jpg">
            <div class="camera_caption fadeFromBottom">
                name deskripsi. <em></em>
            </div>
        </div>
        <div data-link="http://www.your url.com/" data-thumb="http://your url image.jpg" data-src="http://your url image 2.jpg">
            <div class="camera_caption fadeFromBottom">
                your deskription <em></em>
            </div>
        </div>
        <div data-link="http://www.your url.com/" data-thumb="http://your url image.jpg" data-src="http://your url image 2.jpg">
            <div class="camera_caption fadeFromBottom">
                <em>your title or deskription</em>
            </div>
        </div>
        <div data-link="http://www.your url.com/" data-thumb="http://your url image.jpg" data-src="http://your url image 2.jpg">
            <div class="camera_caption fadeFromBottom">
                your deskrition <em></em>
            </div>
        </div>
        <div data-link="http://www.your url.com/" data-thumb="http://your url image2.jpg">
            <div class="camera_caption fadeFromBottom">
                your deskrition
            </div>
        </div>
    </div>
    <!-- #camera_wrap_1 -->
</div>

 In the above script replace the part that I give a red color, "your url" and replace it with the url, in accordance with the url of the image, while the image url please replace with your url, like "your image url 1.2".to see the results, SEE DEMO.
So how to create a slide show display responsive, which can adjust the size of the screen on your device, may be useful