html – How to make an auto slider in CSS?

I have a slider i recently got from a wordpress plugin called “Prime slider”, it’s named pagepilling. But after downloading, running it as an index.html it works fine with clicking in the navbar buttons.. but i need to add auto slide, because this feature wasn’t available in “Pagebilling” slide in the primeslider plugin.

I can’t find the navbar div in the index.html but i can see it through console in google chrome, so i get this:

<div id="pp-nav" class="left" style="color: rgb(0, 0, 0); margin-top: -95px;"><ul><li data-tooltip=""><a href="#" class="active"><span style="border-color: rgb(0, 0, 0);"></span></a></li><li data-tooltip=""><a href="#"><span style="border-color: rgb(0, 0, 0);"></span></a></li><li data-tooltip=""><a href="#"><span style="border-color: rgb(0, 0, 0);"></span></a></li></ul></div>

and i can see the styles for it, here’s the full one:

    .bdt-pagepiling-slider{
    position:relative;
    height:460px;
    overflow:hidden
}
.bdt-pagepiling-slider .section.active .bdt-prime-slider-content *{
    opacity:1;
    visibility:visible;
    transform:translateY(0)
}
.bdt-pagepiling-slider .section.active .bdt-prime-slider-content .bdt-slide-play-button a{
    transition-delay:.7s
}
.bdt-pagepiling-slider .section.active .bdt-prime-slider-content .bdt-sub-title{
    transition-delay:.8s
}
.bdt-pagepiling-slider .section.active .bdt-prime-slider-content .bdt-title-tag{
    transition-delay:.9s
}
.bdt-pagepiling-slider .section.active .bdt-prime-slider-content .bdt-slider-excerpt{
    transition-delay:1s
}
.bdt-pagepiling-slider .section.active .bdt-prime-slider-content .bdt-slide-btn{
    transition-delay:1.1s
}
.bdt-pagepiling-slider .bdt-prime-slider-content{
    max-width:1080px;
    margin:0 30px
}
.bdt-pagepiling-slider .bdt-prime-slider-content *{
    opacity:0;
    visibility:hidden;
    transform:translateY(-12px);
    transition:all .3s
}
.bdt-pagepiling-slider .bdt-prime-slider-content .bdt-slide-play-button{
    padding-bottom:30px
}
.bdt-pagepiling-slider .bdt-prime-slider-content .bdt-slide-play-button a{
    font-size:12px;
    padding:16px 17.5px;
    background:rgba(58,67,70,0.6);
    border-radius:80px;
    color:#fff;
    outline:none;
    animation:shadow-pulse 2s infinite;
    display:inline-block
}
.bdt-pagepiling-slider .bdt-prime-slider-content .bdt-slide-play-button a i{
    transition:transform .3s ease
}
.bdt-pagepiling-slider .bdt-prime-slider-content .bdt-slide-play-button a:hover i{
    transform:scale(1.2)
}
.bdt-pagepiling-slider .bdt-prime-slider-content .bdt-sub-title h4{
    font-size:15px;
    color:rgba(58,67,70,0.8);
    margin-bottom:6px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px
}
.bdt-pagepiling-slider .bdt-prime-slider-content .bdt-title-tag{
    font-size:30px;
    font-weight:700;
    color:#3a4346;
    padding-bottom:20px;
    margin:0;
    letter-spacing:1px;
    line-height:1;
    text-transform:uppercase
}
.bdt-pagepiling-slider .bdt-prime-slider-content .bdt-title-tag span.frist-word{
    font-weight:900
}
.bdt-pagepiling-slider .bdt-prime-slider-content .bdt-slider-excerpt{
    font-size:16px;
    color:rgba(58,67,70,0.8);
    line-height:1.2em;
    padding-bottom:20px
}
.bdt-pagepiling-slider .bdt-prime-slider-content .bdt-slider-excerpt p{
    margin:0
}
.bdt-pagepiling-slider .bdt-slide-btn{
    position:relative;
    display:inline-block;
    width:180px;
    font-size:16px;
    font-weight:500
}
.bdt-pagepiling-slider .bdt-slide-btn .bdt-button-circle{
    position:relative;
    display:block;
    margin:0;
    width:40px;
    height:40px;
    background:#3a4346;
    border-radius:60px;
    -webkit-transition:all .45s cubic-bezier(.65, 0, .076, 1);
    transition:all .45s cubic-bezier(.65, 0, .076, 1)
}
.bdt-pagepiling-slider .bdt-slide-btn .bdt-button-circle .icon{
    -webkit-transition:all .45s cubic-bezier(.65, 0, .076, 1);
    transition:all .45s cubic-bezier(.65, 0, .076, 1);
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    background:#fff
}
.bdt-pagepiling-slider .bdt-slide-btn .bdt-button-circle .icon.arrow{
    -webkit-transition:all .45s cubic-bezier(.65, 0, .076, 1);
    transition:all .45s cubic-bezier(.65, 0, .076, 1);
    left:.425rem;
    width:1.125rem;
    height:.125rem;
    background:none
}
.bdt-pagepiling-slider .bdt-slide-btn .bdt-button-circle .icon.arrow:before{
    position:absolute;
    content:"";
    top:-0.25rem;
    right:.0625rem;
    width:.625rem;
    height:.625rem;
    border-top:.125rem solid #fff;
    border-right:.125rem solid #fff;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg)
}
.bdt-pagepiling-slider .bdt-slide-btn .bdt-button-text{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding:10px 0;
    margin-left:25px;
    color:#3a4346;
    text-align:center;
    text-transform:capitalize;
    -webkit-transition:all .45s cubic-bezier(.65, 0, .076, 1);
    transition:all .45s cubic-bezier(.65, 0, .076, 1);
    line-height:1
}
.bdt-pagepiling-slider .bdt-slide-btn:hover .bdt-button-circle{
    width:100%
}
.bdt-pagepiling-slider .bdt-slide-btn:hover .bdt-button-circle .icon.arrow{
    background:#fff;
    -webkit-transform:translate(1rem, 0);
    transform:translate(1rem, 0)
}
.bdt-pagepiling-slider .bdt-slide-btn:hover .bdt-button-text{
    color:#fff
}
.bdt-pagepiling-slider .bdt-slide-image img{
    max-width:initial
}
.bdt-pagepiling-slider .bdt-prime-slider-social-icon{
    position:absolute;
    top:50%;
    right:-85px;
    transform:translateY(-50%) rotate(-90deg);
    z-index:10;
    display:flex;
    align-items:center
}
.bdt-pagepiling-slider .bdt-prime-slider-social-icon a,.bdt-pagepiling-slider .bdt-prime-slider-social-icon h3{
    position:relative;
    font-size:14px;
    font-weight:600;
    color:#3a4346;
    text-transform:capitalize;
    margin-right:10px;
    padding-right:10px;
    line-height:1
}
.bdt-pagepiling-slider .bdt-prime-slider-social-icon h3{
    margin-bottom:0;
    padding-right:25px
}
.bdt-pagepiling-slider .bdt-prime-slider-social-icon h3:before{
    content:'';
    position:absolute;
    height:2px;
    width:15px;
    right:0;
    top:50%;
    transform:translateY(-50%);
    background:#3a4346
}
.bdt-pagepiling-slider .bdt-prime-slider-social-icon a:before{
    position:absolute;
    content:'';
    height:100%;
    width:2px;
    top:0;
    right:0;
    background:#3a4346;
    transform:rotate(25deg)
}
.bdt-pagepiling-slider .bdt-prime-slider-social-icon a:nth-last-child(1){
    margin:0;
    padding:0
}
.bdt-pagepiling-slider .bdt-prime-slider-social-icon a:nth-last-child(1):before{
    display:none
}
.bdt-pagepiling-slider.bdt-ps-navigation-bottom #pp-nav.left{
    left:50%;
    bottom:-65px;
    transform:rotate(-90deg) translateX(-50%);
    top:auto
}
.bdt-pagepiling-slider .pp-section{
    height:100%;
    position:absolute;
    width:100%;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    backface-visibility:hidden
}
.bdt-pagepiling-slider .pp-easing{
    -webkit-transition:all 1000ms cubic-bezier(.55, .085, 0, .99);
    -moz-transition:all 1000ms cubic-bezier(.55, .085, 0, .99);
    -o-transition:all 1000ms cubic-bezier(.55, .085, 0, .99);
    transition:all 1000ms cubic-bezier(.55, .085, 0, .99);
    -webkit-transition-timing-function:cubic-bezier(.55, .085, 0, .99);
    -moz-transition-timing-function:cubic-bezier(.55, .085, 0, .99);
    -o-transition-timing-function:cubic-bezier(.55, .085, 0, .99);
    transition-timing-function:cubic-bezier(.55, .085, 0, .99)
}
.bdt-pagepiling-slider #pp-nav{
    position:absolute;
    z-index:100;
    margin-top:-32px;
    top:50%;
    opacity:1
}
.bdt-pagepiling-slider #pp-nav.right{
    right:80px
}
.bdt-pagepiling-slider #pp-nav.left{
    left:10px
}
.bdt-pagepiling-slider .pp-section.pp-table{
    display:flex
}
.bdt-pagepiling-slider .pp-tableCell{
    display:inline-flex;
    align-items:center;
    width:100%;
    height:100%
}
.bdt-pagepiling-slider .pp-slidesNav{
    position:absolute;
    z-index:4;
    left:50%;
    opacity:1
}
.bdt-pagepiling-slider .pp-slidesNav.bottom{
    bottom:17px
}
.bdt-pagepiling-slider .pp-slidesNav.top{
    top:17px
}
.bdt-pagepiling-slider #pp-nav ul,.bdt-pagepiling-slider .pp-slidesNav ul{
    margin:0;
    padding:0
}
.bdt-pagepiling-slider #pp-nav li,.bdt-pagepiling-slider .pp-slidesNav li{
    display:block;
    width:100%;
    height:100%;
    position:relative
}
.bdt-pagepiling-slider .pp-slidesNav li{
    display:inline-block
}
.bdt-pagepiling-slider #pp-nav li a,.bdt-pagepiling-slider .pp-slidesNav li a{
    display:block;
    position:relative;
    z-index:1;
    width:3px;
    height:50px;
    cursor:pointer;
    text-decoration:none;
    background:rgba(58,67,70,0.6);
    border-radius:20px;
    margin:10px 0;
    transition:background .3s ease
}
.bdt-pagepiling-slider #pp-nav li a.active,.bdt-pagepiling-slider .pp-slidesNav li a.active{
    background:#3a4346
}
.bdt-pagepiling-slider .pp-scrollable{
    overflow-y:scroll;
    height:100%
}
.bdt-text-stroke--yes .bdt-pagepiling-slider .bdt-prime-slider-content .bdt-main-title .frist-word,.bdt-text-stroke--yes .bdt-pagepiling-slider .bdt-prime-slider-content .bdt-main-title .bdt-title-tag{
    color:transparent !important;
    -webkit-text-stroke:1px #fff
}
@keyframes bounce{
    0%,20%,50%,80%,100%{
        transform:translateY(0)
    }
    40%{
        transform:translateY(-20px)
    }
    60%{
        transform:translateY(-10px)
    }
}
@keyframes shadow-pulse{
    0%{
        box-shadow:0 0 0 0 rgba(0,0,0,0.1)
    }
    100%{
        box-shadow:0 0 0 35px rgba(0,0,0,0)
    }
}
@media (min-width:640px){
    .bdt-pagepiling-slider .bdt-prime-slider-content{
        margin:0 60px
    }
    .bdt-pagepiling-slider .bdt-prime-slider-content .bdt-sub-title h4{
        font-size:28px
    }
    .bdt-pagepiling-slider .bdt-prime-slider-content .bdt-title-tag{
        font-size:55px
    }
    .bdt-pagepiling-slider.bdt-ps-navigation-bottom #pp-nav.left{
        bottom:-30px
    }
    .bdt-pagepiling-slider #pp-nav.left{
        left:25px
    }
    .bdt-pagepiling-slider #pp-nav li a,.bdt-pagepiling-slider .pp-slidesNav li a{
        width:5px
    }
    .bdt-pagepiling-slider .bdt-prime-slider-social-icon{
        right:-70px
    }
    .bdt-pagepiling-slider .bdt-prime-slider-social-icon a,.bdt-pagepiling-slider .bdt-prime-slider-social-icon h3{
        font-size:15px
    }
}
@media (min-width:1024px){
    .bdt-pagepiling-slider{
        height:680px
    }
    .bdt-pagepiling-slider .bdt-prime-slider-content{
        margin:0 150px
    }
    .bdt-pagepiling-slider .bdt-prime-slider-content .bdt-slide-play-button a{
        font-size:16px;
        padding:22px 24px
    }
    .bdt-pagepiling-slider .bdt-prime-slider-content .bdt-sub-title h4{
        font-size:22px;
        margin-bottom:10px
    }
    .bdt-pagepiling-slider .bdt-prime-slider-content .bdt-title-tag{
        font-size:80px;
        padding-bottom:30px
    }
    .bdt-pagepiling-slider .bdt-prime-slider-content .bdt-slider-excerpt{
        font-size:18px;
        line-height:1.5em;
        padding-bottom:30px
    }
    .bdt-pagepiling-slider .bdt-slide-btn{
        width:190px;
        font-size:18px
    }
    .bdt-pagepiling-slider .bdt-slide-btn .bdt-button-circle{
        width:48px;
        height:48px
    }
    .bdt-pagepiling-slider .bdt-slide-btn .bdt-button-circle .icon.arrow{
        left:.625rem
    }
    .bdt-pagepiling-slider .bdt-slide-btn .bdt-button-text{
        padding:12px 0;
        margin-left:35px;
        line-height:1.3
    }
    .bdt-pagepiling-slider .bdt-prime-slider-social-icon{
        right:-20px
    }
    .bdt-pagepiling-slider .bdt-prime-slider-social-icon a,.bdt-pagepiling-slider .bdt-prime-slider-social-icon h3{
        font-size:17px
    }
    .bdt-pagepiling-slider #pp-nav.left{
        left:80px
    }
    .bdt-pagepiling-slider #pp-nav li a,.bdt-pagepiling-slider .pp-slidesNav li a{
        width:8px
    }
}
@media (min-width:1440px){
    .bdt-pagepiling-slider{
        height:100vh
    }
    .bdt-pagepiling-slider .bdt-prime-slider-content{
        margin:0 200px
    }
    .bdt-pagepiling-slider .bdt-prime-slider-content .bdt-title-tag{
        font-size:120px;
        letter-spacing:3px
    }
}

I tried several times, couldn’t make it work.. So, anyone would like to help me acheiving this?

Thanks.

Leave a Comment