Simple slideshow use only css and html

Question

Is it possible to develop a simple slideshow using only CSS and HTML? If so, can anyone guide me? Is jquery a must for slideshow development bacause the result of google search almost using along with jquery.

I suggest searching for "pure css slideshow" to narrow down the results for what you are looking for. — nicholaschris
– nicholaschris, Commented Dec 11, 2013 at 17:20

jamie · Accepted Answer · 2013-12-11 17:25:13Z

8

Here's a good example of how to achieve just this - written by Smashing Magazine

Demo

answered Dec 11, 2013 at 17:25

jamie

5458 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

santosh · Accepted Answer · 2019-12-27 02:28:41Z

Yes you can make simple CSS-HTML slideshow. If you want to use images simply replace h1 tags with img.

Working JsFiddle: https://jsfiddle.net/usm10hfy/

Here is the simple code:

    <div id="slideshow">
      <div class="slide-wrapper">
        <div class="slide"><h1 class="slide-number">1</h1></div>
        <div class="slide"><h1 class="slide-number">2</h1></div>
        <div class="slide"><h1 class="slide-number">3</h1></div>
        <div class="slide"><h1 class="slide-number">4</h1></div>
        <div class="slide"><h1 class="slide-number">5</h1></div>
        <div class="slide"><h1 class="slide-number">6</h1></div>
      </div>
    </div>

<style>  
    body {
      font-family: Helvetica, sans-serif;
      padding: 5%;
      text-align: center;
    }

    #slideshow {
      overflow: hidden;
      height: 510px;
      width: 728px;
      margin: 0 auto;
    }

    .slide-wrapper {
      width: 2912px;
      -webkit-animation: slide 10s ease infinite;
    }

    .slide {
      float: left;
      height: 510px;
      width: 728px;
    }

    .slide:nth-child(1) {
      background: #D93B65;
    }

    .slide:nth-child(2) {
      background: #037E8C;
    }

    .slide:nth-child(3) {
      background: #36BF66;
    }

    .slide:nth-child(4) {
      background: #D9D055;
    }

    .slide:nth-child(5) {
      background: #D9D055;
    }

    .slide:nth-child(6) {
      background: #D9D055;
    }

    .slide-number {
      color: #000;
      text-align: center;
      font-size: 10em;
    }

    @-webkit-keyframes slide {
      20% {margin-left: 0px;}
      30% {margin-left: -728px;}
      50% {margin-left: -728px;}
      60% {margin-left: -1456px;}
      70% {margin-left: -1456px;}
      80% {margin-left: -2184px;}
      90% {margin-left: -2184px;}
    }
</style>

Answer by http://www.joblesspanda.com/

michael · Accepted Answer · 2015-02-23 19:48:22Z

-2

For an html only slideshow use the "http-equiv refresh" meta tag. Simple avoids jscript and functional. One possible downside, may affect some browsers back button?

answered Feb 23, 2015 at 19:48

michael

11 bronze badge

Collectives™ on Stack Overflow

Simple slideshow use only css and html

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related