html5全屏图文幻灯片网页模板

Full Page Slider with unsplash free image service

h5, slider, gallery, template

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2915
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const slides = document.querySelectorAll('.slider-container .slide');
const eraser = document.querySelector('.eraser');
const prev = document.getElementById('previous');
const next = document.getElementById('next');
const intervalTime = 5000;
const eraserActiveTime = 700;
let sliderInterval;

next.addEventListener('click', () => {
    nextSlide();
    clearInterval(sliderInterval);
    sliderInterval = setInterval(nextSlide, intervalTime);
});

prev.addEventListener('click', () => {
    prevSlide();
    clearInterval(sliderInterval);
    sliderInterval = setInterval(nextSlide, intervalTime);
});

sliderInterval = setInterval(nextSlide, intervalTime);

// Initial slide
setTimeout(nextSlide, 500);

编译

CSS

@import url('https://fonts.googleapis.com/css?family=Lato');
* {
    box-sizing: border-box;
}
body {
    font-family: 'Lato', sans-serif;
    margin: 0;
}
.title {
    background: rgba(255, 255, 255, 0.7);
    color: #333;
    position: fixed;
    text-align: right;
    top: 0;
    right: 0;
    padding: 10px 15px;
    margin: 0;
    z-index: 100;
}
.slider {
    position: relative;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}
.slide {
    background-position: center center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 100%;
    height: 100%;
    width: 100%;
}
.slide.active {
    transform: translateX(-100%);
}
.slide .info {
    background-color: rgba(255, 255, 255, 0.7);
    color: #333;
    padding: 20px 15px;
    position: absolute;
    opacity: 0;
    top: 70px;
    left: 30px;
    text-align: center;
    width: 300px;
    max-width: 100%;
}
.slide.active .info {
    opacity: 1;
    transform: translateY(-40px);
    transition: all 0.5s ease-in-out 0.6s;
}
.slide .info h1 {
    margin: 10px 0;
}
.slide .info p {
    letter-spacing: 1px;
}
.eraser {
    background: #fff;
    position: absolute;
    transition: transform 0.7s ease-in-out;
    top: 0;
    left: 100%;
    height: 100%;
    width: 100%;
    z-index: 100;
}
.eraser.active {
    transform: translateX(-100%);
}
.buttons-container {
    position: absolute;
    bottom: 60px;
    right: 20px;
}
.buttons-container button {
    border: 2px solid #fff;
    background-color: transparent;
    color: #fff;
    cursor: pointer;
    padding: 8px 20px;
}
.buttons-container button:hover {
    background-color: #fff;
    color: #333;
}
footer {
    background-color: #222;
    color: #fff;
    font-size: 14px;
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 999;
}
footer p {
    margin: 10px 0;
}
footer i {
    color: red;
}
footer a {
    color: #3c97bf;
    text-decoration: none;
}
@media (max-width: 400px) {
    .slide .info {
        top: 100px;
        left: 10px;
    }
}

HTML

<h5 class="title">Fullscreen Slider</h5>
<div class="slider">
    <div class="slider-container">
        <div class="slide active" style="background-image: url('https://images.unsplash.com/photo-1491818689676-f257892134ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=960&q=80');">
            <div class="info">
                <h1>Ocean View</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum.</p>
            </div>
        </div>
        <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1499476902703-c086d838ef0d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80');">
            <div class="info">
                <h1>Forest View</h1>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet, vero earum perspiciatis officia</p>
            </div>
        </div>
        <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1534953196761-569fa264d8f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');">
            <div class="info">
                <h1>Ocean View</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt recusandae unde autem</p>
            </div>
        </div>
        <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1474291102916-622af5ff18bb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');">
            <div class="info">
                <h1>Nature View</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>
        </div>
        <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1491818689676-f257892134ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=960&q=80');">
            <div class="info">
                <h1>Ocean View</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum.</p>
            </div>
        </div>
        <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1499476902703-c086d838ef0d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80');">
            <div class="info">
                <h1>Forest View</h1>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet, vero earum perspiciatis officia</p>
            </div>
        </div>
        <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1499778730421-fbb938480e4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');">
            <div class="info">
                <h1>Flat View</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt recusandae.</p>
            </div>
        </div>
    </div>
    <div class="eraser"></div>
    <div class="buttons-container">
        <button id="previous"><i class="fa fa-arrow-left"></i>
        </button>
        <button id="next"><i class="fa fa-arrow-right"></i>
        </button>
    </div>
</div>

Full Page Slider with unsplash free image service

h5, slider, gallery, template

编辑器支持Emmet

快捷键

Full Page Slider with unsplash free image service

h5, slider, gallery, template

html5一款响应式服务列表卡片（带阴影和摇晃效果）布局模板

使用Three.js构建动态三角形全屏背景图案的网站引导页面模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：