WNLbBoO

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.3.11/min/tiny-slider.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.3.11/tiny-slider.css" rel="stylesheet" />


<h1> Tiny slider example</h1>
<div class="slider-container">
    
    <div class="my-slider">
        <div class="slider-item">
            <div class="card">                
                <img src="https://picsum.photos/seed/picsum/500/200" alt="">
                <h2>Title 1</h2>
                <p class="card_description">Loresm ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, voluptas!</p>
            </div>
        </div>
        
        <div class="slider-item">
            <div class="card">                
                <img src="https://picsum.photos/seed/picsum/500/200" alt="">                       
                <h2>Title 2</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, voluptas!</p>
            </div>
        </div>
        
        <div class="slider-item">
            <div class="card">                
                <img src="https://picsum.photos/seed/picsum/500/200
" alt="">
                <h2>Title 3</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, voluptas!</p>
            </div>
        </div>
        <div class="slider-item">
            <div class="card">                
                <img src="https://picsum.photos/seed/picsum/500/200
" alt="">
                <h2>Title 4</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, voluptas!</p>
            </div>
        </div>
    </div>
  
  
</div>

script.js

  const slider = tns({
    container: '.my-slider',
    loop: true,
    controls: false,
    items: 2,
    slideBy: 'page',
    edgePadding: 100,
    nav: false,    
    autoplay: true,
    speed: 400,
    autoplayButtonOutput: false,
    mouseDrag: true,
    lazyload: true,
    center: true,
    responsive: {
        640: {
            items:2,
        },
        
        768: {
            items: 2,
        }
    }

  });

style.css

body {
   background: #333;
    color: white;
}
.slider-container {    
    max-width: auto;
    padding: 1rem 2rem;
    background: #e6e6e6;
    margin: 0.1rem auto 0 auto;
    overflow: hidden;
    border-radius: 5px;    
    position:relative;
    &:before {
        content: '.slider-container';
        position: absolute;
        left: 0;
        top: 0;
        color: blue;
    }
}

img {
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
}

.my-slider {
    position: relative;    
}

.slider-item {
    padding: 1.5rem .75rem;
    position: relative;
    &:before {
        position: absolute;
        left: 0;
        top: 0;
        color: blue;
    }
    
    &:hover {
        cursor: pointer;
    }
}

.controls {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    left: 0;    
    width: 100%;    
    top: 50%;
    transform: translatey(-50%);
    display: flex;
    align-items: center;    
    justify-content: space-between;
    &:focus {
        outline: none;
    }

    li:hover {
        cursor: pointer;        
    }
}

.card {
    text-align: center;    
    margin: 0 auto;
    max-width: 300px;       
    color: #e3e3e3;
    background: white;
    border-radius: 5px;
    padding-bottom: .75rem;
    font-family: sans-serif;
    overflow: hidden;
    box-shadow: 2px 2px rgba(red, .3);
    position: relative;
    &:before {
        position: absolute;
        bottom: 0;
        color: blue;
    }
    img {
        margin-bottom: .25rem;
    }
    
    h2 {
        margin: 0 0 .25rem;
    }
    p {
        margin: 0;
        padding: 0 .5rem;
    }
}

wnlbboo.markdown

WNLbBoO

A Pen by Nav Appaiya on CodePen.

License.