locked
Simple automatic slider of images with text only css no javascript RRS feed

  • Question

  • User1991482975 posted

    Hi, i need a simple automatic slider who has an image and some text on top of the image.

    But only css no javascript.

    Anyone can pass the code?

    Thanks

    Wednesday, December 21, 2016 1:31 PM

All replies

  • User527778624 posted

    Hi,

    You can find many searching online, check this one:

    http://corpocrat.com/2015/12/09/20-cool-pure-css-sliders-without-jqueryjavascript/

    Wednesday, December 21, 2016 5:44 PM
  • User-1838255255 posted

    Hi grafic.web,

    According to your description, I make a sample use CSS3 animation property. Here is the sample code:

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" media="screen" href="res/css/style.css"/>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400italic,400,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
    <title>Pure CSS3 Cycle Slider</title>
    </head>
    <body>
    
    <div class="content">
    	<h1>Pure CSS3 Cycle Slider</h1>
    </div>
    
    <div class="container">
    	<div id="content-slider">
        	<div id="slider">
            	<div id="mask">
                <ul>
               	<li id="first" class="firstanimation">
                <a href="#">
                <img src="images/img_1.jpg" alt="Cougar"/>
                </a>
                <div class="tooltip">
                <h1>Cougar</h1>
                </div>
                </li>
    
                <li id="second" class="secondanimation">
                <a href="#">
                <img src="images/img_2.jpg" alt="Lions"/>
                </a>
                <div class="tooltip">
                <h1>Lions</h1>
                </div>
                </li>
                
                <li id="third" class="thirdanimation">
                <a href="#">
                <img src="images/img_3.jpg" alt="Snowalker"/>
                </a>
                <div class="tooltip">
                <h1>Snowalker</h1>
                </div>
                </li>
                            
                <li id="fourth" class="fourthanimation">
                <a href="#">
                <img src="images/img_4.jpg" alt="Howling"/>
                </a>
                <div class="tooltip">
                <h1>Howling</h1>
                </div>
                </li>
                            
                <li id="fifth" class="fifthanimation">
                <a href="#">
                <img src="images/img_5.jpg" alt="Sunbathing"/>
                </a>
                <div class="tooltip">
                <h1>Sunbathing</h1>
                </div>
                </li>
                </ul>
                </div>
                <div class="progress-bar"></div>
            </div>
        </div>
    </div>
    </body>
    
    Style.css:
    @import url("reset.css") screen;
    @import url("animation.css") screen;
    
    /* Common */
    html, body {
    	background:#eaeaea url(../img/bg.png) repeat;
    	font-size:12px;
    	font-family:"Open Sans", serif;
    	min-width:960px;
    	margin:0;
    	padding:0;
    	color:#aaa;
    }
    
    .content h1 {
    	font-size:48px;
    	color:#000;
    	text-shadow:0px 1px 1px #f4f4f4;
    	text-align:center;
    	padding:60px 0 30px;	
    }
    
    /* LAYOUT */
    .container {
    	margin:0 auto;
    	overflow:hidden;
    	width:960px;
    }
    
    /* CONTENT SLIDER */
    #content-slider {
    	width:100%;
    	height:360px;
    	margin:10px auto 0;
    }
    /* SLIDER */
    #slider {
    	background:#000;
    	border:5px solid #eaeaea;
    	box-shadow:1px 1px 5px rgba(0,0,0,0.7);
    	height:320px;
    	width:680px;
    	margin:40px auto 0;
    	overflow:visible;
    	;
    }
    #mask {
    	overflow:hidden;
    	height:320px;
    }
    #slider ul {
    	margin:0;
    	padding:0;
    	;
    }
    #slider li {
    	width:680px;
    	height:320px;
    	;
    	top:-325px;
    	list-style:none;
    }
    
    #slider li.firstanimation {
    	-moz-animation:cycle 25s linear infinite;	
    	-webkit-animation:cycle 25s linear infinite;		
    }
    #slider li.secondanimation {
    	-moz-animation:cycletwo 25s linear infinite;
    	-webkit-animation:cycletwo 25s linear infinite;		
    }
    #slider li.thirdanimation {
    	-moz-animation:cyclethree 25s linear infinite;
    	-webkit-animation:cyclethree 25s linear infinite;		
    }
    #slider li.fourthanimation {
    	-moz-animation:cyclefour 25s linear infinite;
    	-webkit-animation:cyclefour 25s linear infinite;		
    }
    #slider li.fifthanimation {
    	-moz-animation:cyclefive 25s linear infinite;
    	-webkit-animation:cyclefive 25s linear infinite;		
    }
    
    #slider .tooltip {
    	background:rgba(0,0,0,0.7);
    	width:300px;
    	height:60px;
    	;
    	bottom:75px;
    	left:-320px;
    	-moz-transition:all 0.3s ease-in-out;
    	-webkit-transition:all 0.3s ease-in-out;  
    }
    #slider .tooltip h1 {
    	color:#fff;
    	font-size:24px;
    	font-weight:300;
    	line-height:60px;
    	padding:0 0 0 20px;
    }
    
    
    #slider li#first .tooltip, 
    #slider li#second .tooltip, 
    #slider li#third .tooltip, 
    #slider li#fourth .tooltip, 
    #slider li#fifth .tooltip {
    	left:0px;
    }
    
    #slider:hover li, 
    #slider:hover .progress-bar {
    	-moz-animation-play-state:paused;
    	-webkit-animation-play-state:paused;
    }
    
    /* PROGRESS BAR */
    .progress-bar { 
    	;
    	top:-5px;
    	width:680px; 
    	height:5px;
    	background:#000;
    	-moz-animation:fullexpand 25s ease-out infinite;
    	-webkit-animation:fullexpand 25s ease-out infinite;
    }
    Reset.css:
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    animation.css
    @-moz-keyframes cycle {
    	0%  { top:0px; }
    	4%  { top:0px; } 
    	16% { top:0px; opacity:1; z-index:0; } 
    	20% { top:325px; opacity:0; z-index:0; } 
    	21% { top:-325px; opacity:0; z-index:-1; }
    	92% { top:-325px; opacity:0; z-index:0; }
    	96% { top:-325px; opacity:0; }
    	100%{ top:0px; opacity:1; }
    	
    }
    @-moz-keyframes cycletwo {
    	0%  { top:-325px; opacity:0; }
    	16% { top:-325px; opacity:0; }
    	20% { top:0px; opacity:1; }
    	24% { top:0px; opacity:1; } 
    	36% { top:0px; opacity:1; z-index:0; } 
    	40% { top:325px; opacity:0; z-index:0; }
    	41% { top:-325px; opacity:0; z-index:-1; } 
    	100%{ top:-325px; opacity:0; z-index:-1; }
    }
    @-moz-keyframes cyclethree {
    	0%  { top:-325px; opacity:0; }
    	36% { top:-325px; opacity:0; }
    	40% { top:0px; opacity:1; }
    	44% { top:0px; opacity:1; } 
    	56% { top:0px; opacity:1; } 
    	60% { top:325px; opacity:0; z-index:0; }
    	61% { top:-325px; opacity:0; z-index:-1; } 
    	100%{ top:-325px; opacity:0; z-index:-1; }
    }
    @-moz-keyframes cyclefour {
    	0%  { top:-325px; opacity:0; }
    	56% { top:-325px; opacity:0; }
    	60% { top:0px; opacity:1; }
    	64% { top:0px; opacity:1; }
    	76% { top:0px; opacity:1; z-index:0; }
    	80% { top:325px; opacity:0; z-index:0; }
    	81% { top:-325px; opacity:0; z-index:-1; }
    	100%{ top:-325px; opacity:0; z-index:-1; }
    }
    @-moz-keyframes cyclefive {
    	0%  { top:-325px; opacity:0; }
    	76% { top:-325px; opacity:0; }
    	80% { top:0px; opacity:1; }
    	84% { top:0px; opacity:1; }
    	96% { top:0px; opacity:1; z-index:0; }
    	100%{ top:325px; opacity:0; z-index:0; }
    }
    
    @-webkit-keyframes cycle {
    	0%  { top:0px; }
    	4%  { top:0px; }
    	16% { top:0px; opacity:1; z-index:0; } 
    	20% { top:325px; opacity:0; z-index:0; }
    	21% { top:-325px; opacity:0; z-index:-1; }
    	50% { top:-325px; opacity:0; z-index:-1; }
    	92% { top:-325px; opacity:0; z-index:0; }
    	96% { top:-325px; opacity:0; }
    	100%{ top:0px; opacity:1; }
    	
    }
    @-webkit-keyframes cycletwo {
    	0%  { top:-325px; opacity:0; }
    	16% { top:-325px; opacity:0; }
    	20% { top:0px; opacity:1; }
    	24% { top:0px; opacity:1; } 
    	36% { top:0px; opacity:1; z-index:0; } 
    	40% { top:325px; opacity:0; z-index:0; }
    	41% { top:-325px; opacity:0; z-index:-1; }  
    	100%{ top:-325px; opacity:0; z-index:-1; }
    }
    @-webkit-keyframes cyclethree {
    	0%  { top:-325px; opacity:0; }
    	36% { top:-325px; opacity:0; }
    	40% { top:0px; opacity:1; }
    	44% { top:0px; opacity:1; } 
    	56% { top:0px; opacity:1; z-index:0; } 
    	60% { top:325px; opacity:0; z-index:0; } 
    	61% { top:-325px; opacity:0; z-index:-1; }
    	100%{ top:-325px; opacity:0; z-index:-1; }
    }
    @-webkit-keyframes cyclefour {
    	0%  { top:-325px; opacity:0; }
    	56% { top:-325px; opacity:0; }
    	60% { top:0px; opacity:1; }
    	64% { top:0px; opacity:1; }
    	76% { top:0px; opacity:1; z-index:0; }
    	80% { top:325px; opacity:0; z-index:0; }
    	81% { top:-325px; opacity:0; z-index:-1; }
    	100%{ top:-325px; opacity:0; z-index:-1; }
    }
    @-webkit-keyframes cyclefive {
    	0%  { top:-325px; opacity:0; }
    	76% { top:-325px; opacity:0; }
    	80% { top:0px; opacity:1; }
    	84% { top:0px; opacity:1; }
    	96% { top:0px; opacity:1; z-index:0; }
    	100%{ top:325px; opacity:0; z-index:0; }
    }
    
    /* ANIMATION BAR */
    @-moz-keyframes fullexpand {
        0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
        4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
       16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
       17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
       18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }	
    }
    @-webkit-keyframes fullexpand {
        0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
        4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
       16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
       17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
       18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }	
    }

    Result:

    Best Regards,

    Eric Du

    Thursday, December 22, 2016 7:24 AM
  • User-1393433442 posted

    Hi,

    According to your question try this code for automatic slider of images with text using css,

    index.html
    
    
    <!doctype html>
    <html>
    <head>
        <title>QNimate Slider</title>
        <link href="style.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <div class="slider-holder">
            <span id="slider-image-1"></span>
            <span id="slider-image-2"></span>
            <span id="slider-image-3"></span>
            <div class="image-holder">
                <img src="1.jpg" class="slider-image" />
                <img src="2.jpg" class="slider-image" />
                <img src="3.jpg" class="slider-image" />
            </div>
            <div class="button-holder">
                <a href="#slider-image-1" class="slider-change"></a>
                <a href="#slider-image-2" class="slider-change"></a>
                <a href="#slider-image-3" class="slider-change"></a>
            </div>
        </div>
    </body>
    </html>
    
    
    style.css
    
    .slider-holder
            {
                width: 800px;
                height: 400px;
                background-color: yellow;
                margin-left: auto;
                margin-right: auto;
                margin-top: 0px;
                text-align: center;
                overflow: hidden;
            }
            
            .image-holder
            {
                width: 2400px;
                background-color: red;
                height: 400px;
                clear: both;
                ;
                
                -webkit-transition: left 2s;
                -moz-transition: left 2s;
                -o-transition: left 2s;
                transition: left 2s;
            }
            
            .slider-image
            {
                float: left;
                margin: 0px;
                padding: 0px;
                ;
            }
            
            #slider-image-1:target ~ .image-holder
            {
                left: 0px;
            }
            
            #slider-image-2:target ~ .image-holder
            {
                left: -800px;
            }
            
            #slider-image-3:target ~ .image-holder
            {
                left: -1600px;
            }
            
            .button-holder
            {
                ;
                top: -20px;
            }
            
            .slider-change
            {
                display: inline-block;
                height: 10px;
                width: 10px;
                border-radius: 5px;
                background-color: brown;
            }

    Thanks.

    Friday, January 6, 2017 11:04 AM