This blog is created by Al Imran. Mobile:+8801721065582.
1 / 6
Now showing first image
2 / 6
Now showing second image
3 / 6
Now showing third image
4 / 6
Now showing first image
5 / 6
Now showing second image
6 / 6
Now showing third image

How To Make Different Styles SlideShow


                How to make a slidshow using css3 with html5
                       

<html>
<head>
<style>

 * {
    margin: 0;
    padding: 0;
}

 body {
    background-image: gray;
    background-repeat: repeat;
    height: 500px;
    padding: 1px;
}

 h1 { color: white }

 #slideshow-wrap {
    display: block;
    height: 320px;
    min-width: 260px;
    max-width: 640px;
    margin: auto;
    border: 12px rgba(255,255,240,1) solid;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    margin-top: 20px;
    position: relative;
}

 #slideshow-inner {
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0);
    overflow: hidden;
    position: relative;
}

 #slideshow-inner>ul {
    list-style: none;
    height: 100%;
    width: 500%;
    overflow: hidden;
    position: relative;
    left: 0px;
    -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}

 #slideshow-inner>ul>li {
    width: 20%;
    height: 320px;
    float: left;
    position: relative;
}

 #slideshow-inner>ul>li>img {
    margin: auto;
    height: 100%;
}

 #slideshow-wrap input[type=radio] {
    position: absolute;
    left: 50%;
    bottom: 15px;
    z-index: 100;
    visibility: hidden;
}

 #slideshow-wrap label:not(.arrows):not(.show-description-label) {
    position: absolute;
    left: 50%;
    bottom: -45px;
    z-index: 100;
    width: 12px;
    height: 12px;
    background-color: rgba(200,200,200,1);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    -webkit-transition: background-color .2s;
    -moz-transition: background-color .2s;
    -o-transition: background-color .2s;
    transition: background-color .2s;
}

 #slideshow-wrap label:not(.arrows):active { bottom: -46px }

 #slideshow-wrap input[type=radio]#button-1:checked~label[for=button-1] { background-color: rgba(100,100,100,1) }

 #slideshow-wrap input[type=radio]#button-2:checked~label[for=button-2] { background-color: rgba(100,100,100,1) }

 #slideshow-wrap input[type=radio]#button-3:checked~label[for=button-3] { background-color: rgba(100,100,100,1) }

 #slideshow-wrap input[type=radio]#button-4:checked~label[for=button-4] { background-color: rgba(100,100,100,1) }

 #slideshow-wrap input[type=radio]#button-5:checked~label[for=button-5] { background-color: rgba(100,100,100,1) }

 #slideshow-wrap label[for=button-1] { margin-left: -36px }

 #slideshow-wrap label[for=button-2] { margin-left: -18px }

 #slideshow-wrap label[for=button-4] { margin-left: 18px }

 #slideshow-wrap label[for=button-5] { margin-left: 36px }

 #slideshow-wrap input[type=radio]#button-1:checked~#slideshow-inner>ul { left: 0 }

 #slideshow-wrap input[type=radio]#button-2:checked~#slideshow-inner>ul { left: -100% }

 #slideshow-wrap input[type=radio]#button-3:checked~#slideshow-inner>ul { left: -200% }

 #slideshow-wrap input[type=radio]#button-4:checked~#slideshow-inner>ul { left: -300% }

 #slideshow-wrap input[type=radio]#button-5:checked~#slideshow-inner>ul { left: -400% }

 label.arrows {
    font-family: 'WebSymbolsRegular';
    font-size: 25px;
    color: rgb(255,255,240);
    position: absolute;
    top: 50%;
    margin-top: -25px;
    display: none;
    opacity: 0.7;
    cursor: pointer;
    z-index: 1000;
    background-color: transparent;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    text-shadow: 0px 0px 3px rgba(0,0,0,.8);
}

 label.arrows:hover { opacity: 1 }

 label.arrows:active { margin-top: -23px }

 input[type=radio]#button-1:checked~.arrows#arrow-2, input[type=radio]#button-2:checked~.arrows#arrow-3, input[type=radio]#button-3:checked~.arrows#arrow-4, input[type=radio]#button-4:checked~.arrows#arrow-5 {
    right: -55px;
    display: block;
}

 input[type=radio]#button-2:checked~.arrows#arrow-1, input[type=radio]#button-3:checked~.arrows#arrow-2, input[type=radio]#button-4:checked~.arrows#arrow-3, input[type=radio]#button-5:checked~.arrows#arrow-4 {
    left: -55px;
    display: block;
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}

 input[type=radio]#button-2:checked~.arrows#arrow-1 { left: -19px }

 input[type=radio]#button-3:checked~.arrows#arrow-2 { left: -37px }

 input[type=radio]#button-5:checked~.arrows#arrow-4 { left: -73px }

 .description {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    font-family: 'Yanone Kaffeesatz';
    z-index: 1000;
}

 .description input { visibility: hidden }

 .description label {
    font-family: 'WebSymbolsRegular';
    background-color: rgba(255,255,240,1);
    position: relative;
    left: -17px;
    top: 00px;
    width: 40px;
    height: 27px;
    display: inline-block;
    text-align: center;
    padding-top: 7px;
    border-bottom-right-radius: 15px;
    cursor: pointer;
    opacity: 0;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    z-index: 5;
    color: rgb(20,20,20);
}

 #slideshow-inner>ul>li:hover .description label { opacity: 1 }

 .description input[type=checkbox]:checked~label { opacity: 1 }

 .description .description-text {
    background-color: rgba(255,255,230,.5);
    padding-left: 45px;
    padding-top: 25px;
    padding-right: 15px;
    padding-bottom: 15px;
    position: relative;
    top: -35px;
    z-index: 4;
    opacity: 0;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    color: rgb(20,20,20);
}

 .description input[type=checkbox]:checked~.description-text { opacity: 1 }

 </style>
</head>
<body>
<div id="slideshow-wrap">
        <input type="radio" id="button-1" name="controls" checked="checked"/>
        <label for="button-1"></label>
        <input type="radio" id="button-2" name="controls"/>
        <label for="button-2"></label>
        <input type="radio" id="button-3" name="controls"/>
        <label for="button-3"></label>
        <input type="radio" id="button-4" name="controls"/>
        <label for="button-4"></label>
        <input type="radio" id="button-5" name="controls"/>
        <label for="button-5"></label>
        <label for="button-1" class="arrows" id="arrow-1">></label>
        <label for="button-2" class="arrows" id="arrow-2">></label>
        <label for="button-3" class="arrows" id="arrow-3">></label>
        <label for="button-4" class="arrows" id="arrow-4">></label>
        <label for="button-5" class="arrows" id="arrow-5">></label>
        <div id="slideshow-inner">
            <ul>
                <li id="slide1">
                    <img src="images/43049.jpg" height="320" width="640"/>
                    <div class="description">
                        <input type="checkbox" id="show-description-1"/>
                        <label for="show-description-1" class="show-description-label">I</label>
                        <div class="description-text">
                            <h2>Flower power</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
                <li id="slide2">
                    <img src="images/43038.jpg" height="320" width="640"/>
                    <div class="description">
                        <input type="checkbox" id="show-description-2"/>
                        <label for="show-description-2" class="show-description-label">I</label>
                        <div class="description-text">
                            <h2>Golden sunset</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
                <li id="slide3">
                    <img src="images/43024.jpg" height="320" width="640"/>
                    <div class="description">
                        <input type="checkbox" id="show-description-3"/>
                        <label for="show-description-3" class="show-description-label">I</label>
                        <div class="description-text">
                            <h2>Flower power again</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
                <li id="slide4">
                    <img src="images/43025.jpg" height="320" width="640"/>
                    <div class="description">
                        <input type="checkbox" id="show-description-4"/>
                        <label for="show-description-4" class="show-description-label">I</label>
                        <div class="description-text">
                            <h2>Stormy coast</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
                <li id="slide5">
                    <img src="images/43027.jpg" height="320" width="640"/>
                    <div class="description">
                        <input type="checkbox" id="show-description-5"/>
                        <label for="show-description-5" class="show-description-label">I</label>
                        <div class="description-text">
                            <h2>Splash!</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>
                       

                                  Creating a slidshow in html & css3


<html>
<head>
<style>
html, body {
  margin:0; padding:0;
  width: 100%; height: 100%;
  overflow:hidden;    
  -webkit-perspective: 550px;
  perspective: 550px;
}
.slide {
  position:absolute;
  width:100%; height:100%;
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
}
.slide div { position:absolute; width:100%; height:100%; }
.slide:nth-of-type(1) { -webkit-animation:slideTop 20s 16s ease-out infinite; animation:slideTop 20s 16s ease-in-out infinite; }
.slide:nth-of-type(2) { -webkit-animation:slideRight 20s 12s ease-out infinite;
  animation:slideRight 20s 12s ease-in-out infinite; }
.slide:nth-of-type(3) { -webkit-animation:slideLeft 20s 8s ease-out infinite;
  animation:slideLeft 20s 8s ease-in-out infinite; }
.slide:nth-of-type(4) { -webkit-animation:slideBottom 20s 4s ease-out infinite;
  animation:slideBottom 20s 4s ease-in-out infinite; }
.slide:nth-of-type(5) { -webkit-animation:slideBottom 20s ease-out infinite;
  animation:slideBottom 20s ease-in-out infinite; }

 @-webkit-keyframes slideBottom {
  0%,5% { -webkit-transform: rotateX(0); z-index:1; }
  10% { -webkit-transform: rotateX(90deg); }
  13% { z-index:1; -webkit-transform: rotateX(90deg) translateY(100%); }
  50% { z-index:-1; -webkit-transform: rotateX(90deg) translateY(100%); }
  53%,73% { z-index:-1; -webkit-transform:rotateX(0) translateY(0); }
}

 @keyframes slideBottom {
  0%,5% { transform: rotateX(0); z-index:1; }
  10% { transform: rotateX(90deg); }
  13% { z-index:1; transform: rotateX(90deg) translateY(100%); }
  50% { z-index:-1; transform: rotateX(90deg) translateY(100%); }
  53%,80% { z-index:-1; transform:rotateX(0) translateY(0); }
  81%,100% { z-index:0; }
}
/* Alternate directions: Use class or :nth-child to select the correct slide you want to affect,
                         otherwise it will affect all of them */
/* .slide { to apply to all */
/* Left */
.slide:nth-of-type(3) {
  -webkit-transform-origin: left center;
  transform-origin: left center;
}
@-webkit-keyframes slideLeft {
  0%,5% { -webkit-transform: rotateY(0); z-index:1; }
  10% { -webkit-transform: rotateY(90deg); }
  13% { z-index:1; -webkit-transform: rotateY(90deg) translateX(-100%); }
  50% { z-index:-1; -webkit-transform: rotateY(90deg) translateX(-100%); }
  53%,73% { z-index:-1; -webkit-transform:rotateY(0) translateX(0); }
}
@keyframes slideLeft {
  0%,5% { transform: rotateY(0); z-index:1; }
  10% { transform: rotateY(90deg); }
  13% { z-index:1; transform: rotateY(90deg) translateX(-100%); }
  50% { z-index:-1; transform: rotateY(90deg) translateX(-100%); }
  53%,80% { z-index:-1; transform:rotateY(0) translateX(0); }
  81%,100% { z-index:0; }
}
/* Right */
.slide:nth-of-type(2) {
  -webkit-transform-origin: right center;
  transform-origin: right center; 
} 
@-webkit-keyframes slideRight {
  0%,5% { -webkit-transform: rotateY(0); z-index:1; }
  10% { -webkit-transform: rotateY(-90deg); }
  13% { z-index:1; -webkit-transform: rotateY(-90deg) translateX(100%); }
  50% { z-index:-1; -webkit-transform: rotateY(-90deg) translateX(100%); }
  53%,73% { z-index:-1; -webkit-transform:rotateY(0) translateX(0); }
}
@keyframes slideRight {
  0%,5% { transform: rotateY(0); z-index:1; }
  10% { transform: rotateY(-90deg); }
  13% { z-index:1; transform: rotateY(-90deg) translateX(100%); }
  50% { z-index:-1; transform: rotateY(-90deg) translateX(100%); }
  53%,80% { z-index:-1; transform:rotateY(0) translateX(0); }
  81%,100% { z-index:0; }
}
/* Top */
.slide:nth-of-type(1) { 
  -webkit-transform-origin: top center;
  transform-origin: top center;
}
@-webkit-keyframes slideTop {
  0%,5% { -webkit-transform: rotateX(0); z-index:1; }
  10% { -webkit-transform: rotateX(-90deg); }
  13% { z-index:1; -webkit-transform: rotateX(-90deg) translateY(-150%); }
  50% { z-index:-1; -webkit-transform: rotateX(-90deg) translateY(-150%); }
  53%,73% { z-index:-1; -webkit-transform:rotateX(0) translateY(0); }
} 
@keyframes slideTop {
  0%,5% { transform: rotateX(0); z-index:1; }
  10% { transform: rotateX(-90deg); }
  13% { z-index:1; transform: rotateX(-90deg) translateY(-150%); }
  50% { z-index:-1; transform: rotateX(-90deg) translateY(-150%); }
  53%,80% { z-index:-1; transform:rotateX(0) translateY(0); }
  81%,100% { z-index:0; } 
}

 /* End alternate directions */
.slide:nth-of-type(1) div {
  background:#223d65;
  color:white;
  text-align:center;
  padding-top:200px;
  font-size:16pt; 
  font-family: "Andale Mono", AndaleMono, monospace;
}
.slide:nth-of-type(2) div {
  background: url("images/43025.jpg") center center;
  background-size:cover;
}
.slide:nth-of-type(3) div { 
  background: rgb(20,20,20);
  color:white;
  text-align:center;
  padding-top:200px;
  font-size:16pt;
  font-family:Book Antiqua;
}
.slide:nth-of-type(4) div {
  background: url("images/43024.jpg") center center;
  background-size:cover;
}
.slide:nth-of-type(5) div { 
  background: url("images/43049.jpg") center center;
  background-size:cover; 
}

 </style>
</head>
<body>
<div class='slide'> 
  <div>Created by Imran<br/><br/>http://icodetutorial.blogspot.com/</div> <!-- Anything can go inside -->
</div>
<div class='slide'>
  <div></div>
</div>
<div class='slide'>
  <div>It works with any HTML you'd like!<br/><br/>And goes in four directions!</div>
</div>
<div class='slide'>
  <div></div>
</div>
<div class='slide'>
  <div></div>
</div>
</body>
</html>


                                           Make a slidshow using html5

<html>
<head>
<style>
* {
    margin: 0;
    padding: 0;
}
body {
    font-size: 100%;
}
.slider {
    box-shadow: 0 4em 3em hsla(0,0%,0%,.4);
    height: 15em;
    left: 50%;
    margin: -7.5em -12em;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 24em;
}
.slider input {
    position: relative;
    top: -1.5em;
}
.slider ul {
    height: 15em;
    position: relative;
    width: 24em;
    -webkit-transform: perspective(1000);
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 1s;
}
.slider li {
    left: 0;
  list-style: none;
    position: absolute;
    top: 0;
    -webkit-transform: translateZ(7.5em);
    -webkit-transform-origin: 0 0;
    -webkit-transform-style: preserve-3d;
}
.slider li:nth-child(2) {
    -webkit-transform: rotateX(-90deg) translateY(-7.5em) translateZ(15em);
}
.slider li:nth-child(3) {
    -webkit-transform: rotateX(-180deg) translateY(-15em) translateZ(7.5em);
}
.slider li:nth-child(4) {
    -webkit-transform: rotateX(-270deg) translateY(-7.5em);
}
.slider img {
    height: 15em;
    width: 24em;
    vertical-align: top;
}
#slide2:checked ~ ul {
    -webkit-transform: perspective(1000) rotateX(90deg);
}
#slide3:checked ~ ul {
    -webkit-transform: perspective(1000) rotateX(180deg);
}
#slide4:checked ~ ul {
    -webkit-transform: perspective(1000) rotateX(270deg);
}
</style>
</head>
<body>
<div class="slider">
    <input type="radio" id="slide1" name="slide" checked>
    <input type="radio" id="slide2" name="slide">
    <input type="radio" id="slide3" name="slide">
    <input type="radio" id="slide4" name="slide">
    <ul>
        <li>
            <img src="images/43025.jpg">
        </li>
        <li>
            <img src="images/43024.jpg">
        </li>
        <li>
            <img src="images/43038.jpg">
        </li>
        <li>
            <img src="images/43027.jpg">
        </li>
    </ul>
</div>​
</body>
</html>


                 How to make a slideshow  using html5 & Jquery


<!DOCTYPE html">
<html>
<head>
<meta charset="UTF-8" />
<script src="js/jquery.js"></script>
<style>
* {margin:0;padding:0}

 body {
  background-color:gray;
  padding:50px;
}

 /* Slider */
#slider {
  display:block;
  border:4px solid #000;
  width:448px; /* slider width */
  height:286px;; /* slider height */
  margin:0 auto;
  background:white;
  overflow:hidden;
  position:relative;
}

 /* For caption */
#slider figcaption {
  display:block;
  background-color:black;
  font:normal normal 11px Arial,Sans-Serif;
  color:white;
  opacity:.8;
  padding:10px 15px;
  position:absolute;
  right:0;
  bottom:-100px; /* hide the caption with this way :) */
  left:0;
  z-index:44;
}

 #slider img {
  display:block;
  margin:0 0;
  width:448px; /* slide width */
  height:286px; /* slide height */
  position:absolute;
  top:0;
  left:0;
}

 /* Navigation */
#slider-nav {
  display:block;
  position:absolute;
  top:10px;
  right:10px;
  z-index:99;
}

 #slider-nav a {
  display:block;
  float:left;
  width:10px;
  height:10px;
  background-color:#111;
  font-size:0;
  color:transparent;
  overflow:hidden;
  text-indent:-99px;
  margin:0 2px 0 0;
  border:2px solid white;
  border-radius:100%;
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}

 #slider-nav .active {
  background-color:#2589B4;
}

 /* Hide all element inside the '#slider' until the page has been loaded! */
#slider .container, #slider figcaption {display:none}
#slider-nav {opacity:0}
</style>

 </head>
<body>
<figure id="slider">
<div class="container">
<img src="images/43025.jpg" alt="This is 1st slide">
<img src="images/43024.jpg" alt="This is 2nd slide">
<img src="images/43027.jpg" alt="This is 3rd slide">
<img src="images/43038.jpg" alt="This is 4th slide">
</div>
<figcaption></figcaption> <!-- slideshow caption -->
<nav id="slider-nav"></nav> <!-- navigation -->
</figure>

 <script>
(function($) {

 // ==================================================================================
// Configuration here:
// ----------------------------------------------------------------------------------
    var config = {
        slices: 10, // number of slices
        speed: 600, // slideshow speed
        easing: null, // easing type
        interval: 3000 // slideshow interval
    };
// ==================================================================================

     // Some variables...
    var $slider = $('#slider'),
        $caption = $slider.find('figcaption'),
        $container = $slider.find('.container'),
        $nav = $('#slider-nav'),
        $slide = $container.children(),
        autoSlide = null,
        $first = $slide.first();

     // Auto append navigation item based on the slides length
    $slide.each(function(index) {
        var i = index + 1;
        $nav.append('<a href="#slide-'+i+'">'+i+'</a>');
        $(this).attr('id', 'slide-'+i);
    });

     // Set the slices size
    var slice_w = $slider.width() / config.slices,
        slice_h = $slider.height();

     // Build the slices
    for (var i = 0; i < config.slices; i++) {
        $('<div class="slice" />').css({
            'position':'absolute',
            'width':slice_w,
            'height':slice_h,
            'left':slice_w*i,
            'z-index':4,
            'background-color':'transparent',
            'background-repeat':'no-repeat',
            'background-position':'-' + slice_w*i + 'px 0'
        }).appendTo($slider);
    }

     // Catch the slices, and also set the different position between odd and even slices
    var $sliceOdd = $slider.find('.slice:odd').css('bottom',0),
        $sliceEven = $slider.find('.slice:even').css('top',0);

     // Click to switch!
    $nav.find('a').on("click", function() {

         $nav.find('.active').removeClass('active');
        $(this).addClass('active');

         var pos = $(this).index(),
            text = $slide.eq(pos).attr('alt'),
            bg = $slide.eq(pos).attr('src');

         $slide.hide().eq(pos).trigger("load").show();

         // Do the caption and slices animation here!
        $caption.stop().animate({bottom:'-100px'}, config.speed/2);

         $sliceOdd.each(function(i) {
            $(this).stop().delay(i*100).animate({bottom:'-'+slice_h+'px',opacity:0}, config.speed, config.easing, function() {
                $(this).css({
                    'background-image':'url('+bg+')',
                    'bottom':0,
                    'opacity':1
                });
            });
        });
        $sliceEven.each(function(i) {
            $(this).stop().delay(i*100).animate({top:'-'+slice_h+'px',opacity:0}, config.speed, config.easing, function() {
                $(this).css({
                    'background-image':'url('+bg+')',
                    'top':0,
                    'opacity':1
                });
            });
        }).promise().done(function() {
            $caption.html(text).stop().animate({bottom:'0'}, config.speed/2);
        });

         clearInterval(autoSlide);
        autoSlide = setInterval(slideShow, config.interval);

         return false;

     }).first().addClass('active');

     // Init slideshow
    $caption.html($slide.first().attr('alt')).stop().animate({bottom:'0'}, config.speed);

     // Navigation clicker
    function slideShow() {
        if ($nav.find('.active').next().length) {
            $nav.find('.active').next().trigger("click");
        } else {
            $nav.find('a').first().trigger("click");
        }
    }

     // Run the slideshow on page load...
// **Edit: Run the slideshow on DOM Ready for the CSS Deck Playground only**
    $(function() {

         // remove the 'loading background-image' of '#slider'
        $slider.css('background-image','none');

         // Show the '.container', 'figcaption' and '#slide-nav' when the page has been loaded!
// **Edit: Show the '.container', 'figcaption' and '#slide-nav' on DOM Ready for the CSS Deck Playground only**
        $container.show();
        $caption.show();
        $nav.css('opacity',1);

         // Another init slideshow
        $slider.find('.slice').css('background-image', 'url('+$first.attr("src")+')');

         // Then, start the interval...
        autoSlide = setInterval(slideShow, config.interval);

     });

 })(jQuery);
</script>
</body>
</html>

                      How to make a slidshow using html5  & css3                

<html>
<head>
<style>
* {
    margin: 0;
    padding: 0;
}
body {
    font-size: 100%;
 overflow:hidden;
}
.slider {
    height: 15em;
    left: 50%;
    margin: -7.5em -12em;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 24em;
}
.slider input {
    position: relative;
    top: -1.5em;
}
input[type='radio'] {
    -webkit-appearance: none;
 appearance: none;
 height:15px;
 width:15px;
 background:#ccc;
border-radius: 8px;
 cursor:pointer;
}
input[type='radio']:checked {
    -webkit-appearance: none;
 appearance: none;
 height:15px;
 width:15px;
 background:#666;
border:4px solid #ccc;
border-radius: 8px;
}
.slider ul {
 list-style: none;
    height: 15em;
    position: relative;
    width: 24em;
    -webkit-transform: perspective(1000);
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 1s;
}
.slider ul li {
    left: 0;    
    position: absolute;
    top: 0;
 background:none;  
    -webkit-transform-origin: center;    
 -webkit-transform-style: preserve-3d;  
  
}
.slider ul li:nth-child(3){
   -webkit-transition: 1s ease-in-out;
-webkit-transform: perspective(1000);

}
.slider img {
-webkit-transform: perspective(1000);
 height: 15em;
    width: 24em;
    vertical-align: top;
 border-radius:8px;
 -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(80%, transparent), to(rgba(255,255,255,0.4)));
}

/*2*/
#slide2:checked ~ ul li:nth-child(1){
     -webkit-transform: perspective(1000) rotateY(-40deg) translateZ(-20em) translateX(10em); 
-webkit-transition: 0.5s ease-in-out;      
 
}

#slide3:checked ~ ul li:nth-child(1){
   -webkit-transform: perspective(1000) rotateY(0deg);
-webkit-transition: 1s ease-in-out;  
}

 #slide4:checked ~ ul li:nth-child(1) {
-webkit-transform: perspective(1000) rotateY(40deg) translateZ(-20em) translateX(-10em);
-webkit-transition: 0.5s ease-in-out;
}

 /*1*/
#slide2:checked ~ ul li:nth-child(2){
   -webkit-transform: perspective(1000) rotateY(0deg);
-webkit-transition: 1s ease-in-out;
}
#slide3:checked ~ ul li:nth-child(2){
   -webkit-transform: perspective(1000) rotateY(40deg) translateZ(-20em)
translateX(-10em) ;
-webkit-transition: 0.5s ease-in-out;
}

 #slide4:checked ~ ul li:nth-child(2){
   -webkit-transform: perspective(1000) rotateY(40deg) translateZ(-40em)
translateX(-20em) ;
-webkit-transition: 0.4s ease-in-out; 
}

 /*3*/

 #slide2:checked ~ ul li:nth-child(3){   
-webkit-transform: perspective(1000) rotateY(-40deg) translateZ(-40em)
translateX(20em);
-webkit-transition: 0.4s ease-in-out;
}

 #slide3:checked ~ ul li:nth-child(3){
   -webkit-transform: perspective(1000) rotateY(-40deg) translateZ(-20em)
translateX(10em);
 -webkit-transition:0.5s ease-in-out;
}

 #slide4:checked ~ ul li:nth-child(4){
   -webkit-transform: perspective(1000) rotateY(0deg);
-webkit-transition: 1s ease-in-out;

}

 /*4*/
#slide2:checked ~ ul li:nth-child(4){   
-webkit-transform: perspective(1000) rotateY(-60deg) translateZ(-70em)
translateX(5em);
-webkit-transition: 0.4s ease-in-out;
}

 #slide3:checked ~ ul li:nth-child(4){
   -webkit-transform: perspective(1000) rotateY(-40deg) translateZ(-40em)
translateX(20em);
 -webkit-transition:0.5s ease-in-out;
}

 #slide4:checked ~ ul li:nth-child(4){
   -webkit-transform: perspective(1000) rotateY(-40deg) translateZ(-20em)
translateX(10em);
-webkit-transition: 1s ease-in-out;

}
/*5*/
#slide2:checked ~ ul li:nth-child(5){   
-webkit-transform: perspective(1000) rotateY(-60deg) translateZ(-90em)
translateX(5em);
-webkit-transition: 0.4s ease-in-out;
}

 #slide3:checked ~ ul li:nth-child(5){
   -webkit-transform: perspective(1000) rotateY(-40deg) translateZ(-40em)
translateX(20em);
 -webkit-transition:0.5s ease-in-out;
}

 #slide4:checked ~ ul li:nth-child(5){
   -webkit-transform: perspective(1000) rotateY(-40deg) translateZ(-20em)
translateX(10em);
-webkit-transition: 1s ease-in-out;

}

</style>
</head>
<body>
<div class="slider">
    <input type="radio" id="slide2" name="slide" >
    <input type="radio" id="slide3" name="slide" checked="">
    <input type="radio" id="slide4" name="slide">
    <ul>
        <li>
<img src="images/43025.jpg"/>
        </li>
 <li>
<img src="images/43024.jpg"/>
        </li>
 <li>
<img src="images/43027.jpg"/>
        </li>
</ul>
<!--<li>
<img src="images/43048.jpg"/>
        </li>
<li>
<img src="images/43049.jpg"/>
        </li>
</ul-->
</div>
</body>
</html>


                              Creating a slidshow using css3 with html5


<html>
<head>
<style>
body {
  background: #ccc;
  width: 950px;
  margin: 0 auto;
  padding: 10px;
}

 .slider {
  background: #111;
  width: 950px;
  height: 350px;
  padding: 10px;
  position: relative;
  top: 10px;
  box-shadow: 0 30px 50px -20px black;
  overflow: hidden;
}

 .images {
  background: #ccc;
  width: 100%;
  height: 74%;
  transition: background .5s linear;
}

 input[type='radio'] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #444;
  background-size: 225px 70px;
  width: 225px;
  height: 70px;
  margin: 5px;
  cursor: pointer;
  position: relative;
  float: left;
  top: 270px;
  -webkit-filter: sepia();
}
input[type='radio']:checked {
  content: '';
  border: solid 5px #ccc;
  box-shadow: none;
  -webkit-filter: none;
}

 input[type='radio']:hover{
  border: solid 5px #fff;
  -webkit-filter: none;
  transform: scale(1.05);
  z-index: 9999;
}

 .slide1 {
  background: url(images/43044.jpg);
}

 .slide2 {
  background: url(images/43034.jpg);
}

 .slide3 {
  background: url(images/43046.jpg);
}

 .slide4 {
  background: url(images/43049.jpg);
}

 .slide1:checked ~ .images {
  background: url(images/43038.jpg);
}

 .slide2:checked ~ .images {
  background: url(images/43027.jpg);
}

 .slide3:checked ~ .images {
  background: url(images/43024.jpg);
}

 .slide4:checked ~ .images {
  background: url(images/43025.jpg);
}
</style>
</head>
<body>
<div>
   <div class='slider'>
  <input checked='' class='slide1' name='thumbnail' type='radio' />
  <input class='slide2' name='thumbnail' type='radio' />
  <input class='slide3' name='thumbnail' type='radio' />
  <input class='slide4' name='thumbnail' type='radio' />
  <div class='images'></div>
</div>
</body>
</html>


                             Creating a slidshow using jquery with html5                                                           

<!DOCTYPE html">
<html>
<head>
<meta charset="UTF-8" />
<script src="js/jquery.js"></script>
<style>
#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

 #slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}
</style>

 </head>
<body id="single">
<div id="slideshow">
   <div>
     <img src="images/43024.jpg" width="240" height="240">
   </div>
   <div>
     <img src="images/43025.jpg" width="240" height="240">
   </div>
   <div>
     <img src="images/43038.jpg" width="240" height="240">
   </div>
   <div>
     <img src="images/43027.jpg" width="240" height="240">
   </div>
   <div>
     <img src="images/43044.jpg" width="240" height="240">
   </div>
   <div>
     <img src="images/43049.jpg" width="240" height="240">
   </div>
   <div>
     <img src="images/43034.jpg" width="240" height="240">
   </div>
</div>
<script>
$("#slideshow > div:gt(0)").hide();

 setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

 </script>
</body>
</html>



                       Creating a slidshow using javascript with html5


<html>
<head>
<style>
#slide{
 margin: 0px auto; 
    position: relative; 
    width: 100%; 
    height: 350px; 
   
    box-shadow: 0px 10px 20px rgba(0,0,0,0.4); 

 }
</style>
<script type="text/javascript">

 var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "images/43024.jpg" // set image object src property to an image's src, preloading that image in the process
slideimages[1] = new Image()
slideimages[1].src = "images/43049.jpg"
slideimages[2] = new Image()
slideimages[2].src = "images/43038.jpg"
slideimages[3] = new Image()
slideimages[3].src = "images/43034.jpg"
slideimages[4] = new Image()
slideimages[4].src = "images/43025.jpg"

 </script>
</head>
<body>
<img src="images/43024.jpg" id="slide"/>

 <script type="text/javascript">

 //variable that will increment through the images
var step=0

 function slideit(){
 //if browser does not support the image object, exit.
 if (!document.images)
  return
 document.getElementById('slide').src = slideimages[step].src
 if (step<2)
  step++
 else
  step=0
 //call function "slideit()" every 2.5 seconds
 setTimeout("slideit()",2500)
}

 slideit()

 </script>
</body>
</html>

Comments

Post a Comment