Html Code: simple fading slide show

You can use the slider to make your website more beautiful. Slider is one of the cases that in addition to displaying photos in a row, it is possible to write text on it and change the photos with effects. This slider can usually be used to show gallery images or display photos of the latest news or the company achievements. In the following code, 4 images are displayed by a slider, each image is zoomed in a bit at a slow speed, and the fade animation is used to display the next slide. This means that the current image disappears and the next image is displayed gradually. This is a looping slider and displays the first slide again after displaying the fourth slide.

<!-- this script got from www.htmlbestcodes.com - Coded by: Krishna Eydat -->
<style>
body {
    margin: 0;
    padding: 0;
}

/* slide */

.slide {
    position: relative;
    margin: 0;
    padding: 0;
}

.slide .item {
    position: relative;
    height: 100%;
}

.slide .item::before {
    display: block;
    padding-top: 39%;
    content: "";
}

.slide .item .image {
    position: relative;
    overflow: hidden;
}

.slide .item img {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 50%;
}

.slide > .slick-list,
.slide > .slick-list > .slick-track,
.slide > .slick-list > .slick-track > .slick-slide > div {
    position: relative;
    height: 100%;
}

.slide-animation {
    animation: fadezoom 8s 0s forwards;
}

@keyframes fadezoom {
0% {
    transform: scale(1);
}

100% {
    transform: scale(1.2);
}
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<ul class="slide">
    <li class="item">
      <img src="http://www.htmlbestcodes.com/images/toad.jpg?text=1" />
    </li>
    <li class="item">
      <img src="http://www.htmlbestcodes.com/images/lizard.jpg?text=2" />
    </li>
    <li class="item">
      <img src="http://www.htmlbestcodes.com/images/chameleon.jpg?text=3" />
    </li>
    <li class="item">
      <img src="http://www.htmlbestcodes.com/images/gecko.jpg?text=4" />
    </li>
    
  </ul>
<script>
var $slide = $(".slide")
.slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    speed: 2000,
    autoplaySpeed: 4000,
    autoplay: true
})
.on({
    beforeChange: function (event, slick, currentSlide, nextSlide) {
        $(".slick-slide", this).eq(currentSlide).addClass("preve-slide");
        $(".slick-slide", this).eq(nextSlide).addClass("slide-animation");
    },
    afterChange: function () {
        $(".preve-slide", this).removeClass("preve-slide　slide-animation");
    }
});
$slide.find(".slick-slide").eq(0).addClass("slide-animation");
</script><a target="_blank" href="https://www.htmlbestcodes.com/" style="font-size: 8pt; text-decoration: none;font-family:Tahoma">HTML Best Codes</a>

If you don't know how to use this code or need more information Click here!

Compatible browsers:

Html Best Codes

Html Code: simple fading slide show

Links