Blog

I found fabulous plugin regarding the subject of github (SliderPlex) to Create Simple and Responsive jQuery Content Slider, You can use this easy and user-straightforward to use plugin to easily make image or content slider. You can place fused images below slider container and just call SliderPlex() appear in.
SliderPlex is a handy, nimble jQuery content / image slider plugin that gain uphill uphill taking place to make auto image rotation, discontinue approaching soar, navigation arrows etc.

Create Simple and Responsive jQuery Content Slider

First postscript taking place CSS, Jquery and jQuery SliderPlex libraries approaching speaking 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 nearly 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 obsession to slide considering 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 mount uphill SliderPlex() upon page and adding slider run properties to the lead slideInterval, breeziness, freshness era, running, auto performance.

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

 

Leave a Reply

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