Skip to content

Instantly share code, notes, and snippets.

@shishirarora3

shishirarora3/index.html

Created April 6, 2019 06:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save shishirarora3/e28453d7af0547c537ceee8c0eb6dbb3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save shishirarora3/e28453d7af0547c537ceee8c0eb6dbb3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. shishirarora3 created this gist Apr 6, 2019.
    58 changes: 58 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,58 @@
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
    Hello Slider
    </title>
    </head>
    <body>
    <div class="slider">
    <div class="slide slide-1">
    <div class="slide-bg"></div>
    <div class="slide-content">
    <div class="slide-image">
    <img src="https://newsdeeply.imgix.net/20170713072433/IS09AX2F9.jpg">
    </div>
    <div class="slide-text">
    <p>
    They can hold their breath for five hours underwater.
    </p>

    </div>
    </div>
    </div>
    <div class="slide slide-2">
    <div class="slide-bg"></div>
    <div class="slide-content">
    <div class="slide-image">
    <img src="https://img-aws.ehowcdn.com/877x500p/s3-us-west-1.amazonaws.com/contentlab.studiod/getty/ecddf7a133be423a89184f4675fe8a58">
    </div>
    <div class="slide-text">
    <p>
    Foxes eat just about anything, including berries, worms, spiders and small animals such as mice and birds.
    </p>
    </div>
    </div>
    </div>
    <div class="slide slide-3">
    <div class="slide-bg"></div>
    <div class="slide-content">
    <div class="slide-image">
    <img src="http://www.wallpapers13.com/wp-content/uploads/2016/02/Bald-Eagle-blue-sky-spread-wings-sharp-claws-Hd-wallpaper-915x515.jpg">
    </div>
    <div class="slide-text">
    <p>
    The largest known kill by an eagle was a dulker deer weighing 37 kg - which was 7-8 times the weigth of the Martial Eagle that killed it.
    </p>
    </div>
    </div>
    </div>


    </div>
    <div class="slider-controls">
    <button type="button" class="btn-slide-previous" onclick="previousSlide()">&#10094</button>
    <button type="button" class="btn-slide-next" onclick="nextSlide()">&#10095</button>
    </div>
    </body>
    </html>
    30 changes: 30 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    document.addEventListener("DOMContentLoaded", function(){
    setTimeout(function() {
    document.querySelector(".slide").classList.add("active");
    }, 500)
    });

    function nextSlide() {
    let currSlide = document.querySelector(".slide.active"),
    nextSlide = currSlide.nextElementSibling;

    currSlide.classList.remove("active");
    if(nextSlide) {
    nextSlide.classList.add("active");
    } else {
    document.querySelectorAll(".slide")[0].classList.add("active");
    }
    }

    function previousSlide() {
    let currSlide = document.querySelector(".slide.active"),
    prevSlide = currSlide.previousElementSibling,
    slideCount = document.querySelectorAll(".slide").length;

    currSlide.classList.remove("active");
    if(prevSlide) {
    prevSlide.classList.add("active");
    } else {
    document.querySelectorAll(".slide")[slideCount - 1].classList.add("active");
    }
    }
    162 changes: 162 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,162 @@
    * {
    font-family: sans-serif;
    }

    body {
    margin: 0;
    }

    .slider {
    width: 100%;
    height: 100vh;
    }

    .slide {
    width: 100%;
    height: 0;
    display: flex;
    visibility: hidden;
    overflow: hidden;
    }

    .slide.active {
    display:flex;
    height: 100%;
    visibility: visible
    }
    .slide-bg {
    height: 100%;
    clip-path: polygon(0 0, 0 90%, 150% 0%);
    z-index: 1;
    position: absolute;
    top: -100%;
    width: 100%;
    }

    .slide.active > .slide-bg {
    top: 0;

    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    }

    .slide-image > img {
    z-index: 2;
    opacity: 0;
    }

    .slide.active .slide-image > img {

    opacity: 1;

    -webkit-transition: opacity 2ss ease-in;
    -moz-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
    }


    .slide-image > img {
    max-height: 100%;
    max-width: 100%;
    z-index: 1;
    }
    .slide-content {
    max-width: 900px;
    max-height: 90%;
    margin: auto;
    z-index: 2;
    position: relative;
    padding-left: 150px;
    }

    .slide-image-bg {
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1
    }

    .slide.active .slide-image-bg {
    width: 100%;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    }

    .slide-text {
    background-color: #fff;
    padding: 1em 2em;
    position: absolute;
    top: 40%;
    left: -100%;
    z-index: 3;
    width: 250px;
    box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.2);
    text-align: justify;
    }

    .slide.active .slide-text {
    left: 0;

    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
    }

    .slide-1 .slide-text {
    border-left: 10px solid darkslategray;
    }
    .slide-1 .slide-bg{
    background-color: cadetblue;
    }

    .slide-2 .slide-text {
    border-left: 10px solid burlywood;
    }
    .slide-2 .slide-bg{
    background-color: antiquewhite;
    }

    .slide-3 .slide-text {
    border-left: 10px solid darkslateblue;
    }
    .slide-3 .slide-bg{
    background-color: deepskyblue;
    }

    .slider-controls {
    position: absolute;
    z-index: 5;
    bottom: 25px;
    right: 25px;
    }

    .btn-slide-next, .btn-slide-previous {
    cursor: pointer;
    width: 60px;
    height: 50px;
    color: #000;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    user-select: none;
    background-color: #fff;
    border: 1px solid #000;

    }

    .btn-slide-previous:hover, .btn-slide-next:hover {
    background-color: #000;
    border: 1px solid #fff;
    color:#fff;
    }
    7 changes: 7 additions & 0 deletions weekly-coding-challenge-full-page-slider.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    WEEKLY CODING CHALLENGE - Full Page slider
    ------------------------------------------


    A [Pen](https://codepen.io/ernestasbaltinas/pen/oVqeWW) by [ErnestasBaltinas](https://codepen.io/ernestasbaltinas) on [CodePen](https://codepen.io).

    [License](https://codepen.io/ernestasbaltinas/pen/oVqeWW/license).