Create Simple and Responsive jQuery Content Slider

I found wonderful plugin on github (SliderPlex) to Create Simple and Responsive jQuery Content Slider, You can use this simple and easy to use plugin to easily create image or content slider. You can place multiple images under slider container and just call SliderPlex() function.
SliderPlex is a simple, responsive jQuery content / image slider plugin that help to create auto image rotation, pause on hover, navigation arrows etc.
content-slider


Create Simple and Responsive jQuery Content Slider

First include CSS, Jquery and jQuery SliderPlex libraries on page.

<link rel="stylesheet" href="SliderPlex.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans|Poiret+One">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script src="SliderPlex.js"></script>

Now create sample background css panel. you can call both text and images on sliding panel.

<style>
 body { height: 100%; }
    body { margin: 0; background: #ddd; font-family: 'Open Sans'; }
    .slider { height: 80%; box-shadow: 0 0 2px #000; }
    .barner {
        font-family: 'Poiret One';
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .barner h1 { width: 70%; color: #efefef; }
    .barner-1 {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url('http://placeimg.com/1200/440/nature');
    }
    .barner-1 h1 { color: #ffffff; }
    .barner-2 { background-color: #00714d; }
    .barner-3 { background-color: #003d71; }
 
    .plex-link { text-decoration: none; color: #597256; }
</style>



Add sample text which need to slide with some colourful background.

   <div class="slider slider-plex">
        <ul>
            <li>
                <div class="barner barner-1">
                    <h1>Where do new ideas come from? The answer is simple: differences. Creativity comes from unlikely juxtapositions.</h1>
                </div>
            </li>
            <li>
                <div class="barner barner-2">
                    <h1>“Do not seek praise. Seek criticism.”</h1>
                </div>
            </li>
            <li>
                <div class="barner barner-3">
                    <h1>Good design is a language, not a style</h1>
                </div>
            </li>
        </ul>
    </div>

Now finally add SliderPlex() on page and pass slider control properties like slideInterval, animation, animation time, direction, auto play.

<script>
        $('.slider').SliderPlex({
            slideInterval: 3,
            animation: 'fade',
            animationTime: .5,
            direction: 'right',
            nonFocusArrows: true,
            fillSpace: true,
            autoPlay: true,
            pauseOnMouseOver: false,
            pauseOnMouseDown: false
        });
    </script>

See live demo and download source code.

DEMO | DOWNLOAD

See official github repository for more information.



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.