How to make slider in html and css

How-to-make-slider-in-html-and-css

How to make slider in html and css

In this tutorial ,How to make slider in html and css.

STEP:1 :- open an editor, paste the following code and save it as .html or the extension you want to save .

<script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/cycle2.js"></script>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<style type="text/css">
    

#container {
        width:100%;
        position:relative;s
        }
    #slideshow {
        height:500px;
        width:100%;
        }
    #slideshow img {
        height:500px;
        width:100%;
        position: absolute;
        z-index:10;
        min-width:100%;
        min-height:100%;
        }
    #pager {
        height:120px; 
        width:100%;
        background:rgba(0,0,0,0.5);
        position:absolute;
        bottom:30%;
        z-index:1000;
        text-align:center;
        opacity:0;
        transition:all .2s ease-in-out 0s;
        display: block;
        }
    #pager:hover {
        opacity:1;
        }
    #pager img {
        margin: 10px 5px;
        opacity:0.3;
        transition:all .3s ease-in-out 0s;
        }
    #pager img:hover {
        opacity:1;
        transform:scale(1.05);
        z-index:100;
        }
    #prev_c {
            height:500px;
        width:200px;
        position:absolute;
        left:0;
        top:0;
        z-index:100;
        }
        #prev_c img {
            height: 47px;
    width: 54px;
    position: absolute;
    background: white;
    padding: 10px 0;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 0px;

   border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
            }
        
    #next_c {
            height:500px;
        width:200px;
        position:absolute;
        right:0;
        top:0;
        z-index:100;
        }
        #next_c img {
            height: 47px;
    width: 54px;
    position: absolute;
    top: 0;
    bottom: 0;
    padding: 10px 0;
    background: white;
    right: 0;
    margin: auto 0px;
   border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
            }
        #next #prev { visibility:hidden;}
        #next,#prev:hover {
            cursor:pointer;
            }
        #next_c,#prev_c:hover #next,#prev { visibility:visible;}
</style>
<div style="width: 100%;border-top: 2px solid black;float: left;z-index: -10">


<div id="container">
 

 <div id="slideshow" class="cycle-slideshow" 
 data-cycle-fx="scrollHorz" 
 data-cycle-manual-fx="scrollHorz" 
 data-cycle-pager-fx = "scrollHorz" 
 data-cycle-manual-speed="400"
 data-cycle-prev="#prev"  	
 data-cycle-next="#next"
 data-cycle-speed="400"  
 data-cycle-timeout="3000" 
 data-cycle-pager = "#pager" 
 data-cycle-pager-template="<a href='#'><img src='{{src}}' width=150 height=100></a>"
     > 
      
        <img src="img/1.jpg" id="intro_img"/>
        
        <img src="img/2.jpg" id="intro_img"/>
         <img src="img/3.jpg" id="intro_img"/>
         <img src="img/4.jpg" id="intro_img"/>
         <img src="img/5.jpg" id="intro_img"/>
        
        </div>

        <div id="pager"></div>
        
        <div id="prev_c"><img id="prev" src="img/prev1.svg"/></div>
        <div id="next_c"><img id="next" src="img/next1.svg"/></div>
</div>

<script type="text/javascript">

function height() {
	var h = window.innerHeight;
	var a = document.getElementById('container');
	a.style.height = h+"px";
	}
	
window.addEventListener('load',height);
window.addEventListener('resize',height);
</script>
</div>

 

DEMO     DOWNLOAD CODE 

STAY CONNECTED FOR MORE :)

ADD COMMENT

Your email address will not be published. Required fields are marked *








Be the first to comment. :)

The primary motive of our company is to provide beyond satisfactory results .

Request a free consultation quote

WWW.BHAGAUTI.COM © COPYRIGHT 2018 | TERMS AND CONDITIONS | Privacy & Policy