Слайдер простой

Без кнопок

by yoowordpress

HTML

<div id="banner-fade">

        <!-- start Basic Jquery Slider -->
        <ul class="bjqs">
          <li><img src="https://placeimg.com/640/480/any" title="Automatically generated caption"></li>
          <li><img src="https://media-cdn.tripadvisor.com/media/photo-s/09/f3/9b/c4/img-20160105-wa0033-largejpg.jpg" title="Automatically generated caption"></li>
          <li><img src="https://placeimg.com/640/480/any" title="Automatically generated caption"></li>
           <li><img src="https://media-cdn.tripadvisor.com/media/photo-s/09/f3/9b/c4/img-20160105-wa0033-largejpg.jpg" title="Automatically generated caption"></li>
        </ul>
        <!-- end Basic jQuery Slider -->
      </div>
      
      <div id="banner-slide">

        <!-- start Basic Jquery Slider -->
        <ul class="bjqs">
          <li><a href=""><img src="https://placeimg.com/640/480/any" title="Automatically generated caption"></a></li>
          <li><img src="https://media-cdn.tripadvisor.com/media/photo-s/09/f3/9b/c4/img-20160105-wa0033-largejpg.jpg" title="Automatically generated caption"></li>
          <li><a href=""><img src="https://placeimg.com/640/480/any" title="Automatically generated caption"></a></li>
          <li><img src="https://media-cdn.tripadvisor.com/media/photo-s/09/f3/9b/c4/img-20160105-wa0033-largejpg.jpg" title="Automatically generated caption"></li>
          <li><a href=""><img src="https://placeimg.com/640/480/any" title="Automatically generated caption"></a></li>
          <li><img src="https://media-cdn.tripadvisor.com/media/photo-s/09/f3/9b/c4/img-20160105-wa0033-largejpg.jpg" title="Automatically generated caption"></li>
        </ul>
        <!-- end Basic jQuery Slider -->

      </div>

CSS

#container{
	max-width:620px;
	margin:0 auto;
	padding-bottom:80px;
}

#banner-fade,
#banner-slide{
	margin-bottom: 60px;
}

ul.bjqs-controls.v-centered li a{
	display:block;
	padding:10px;
	background:#fff;
	color:#000;
	text-decoration: none;
}

ul.bjqs-controls.v-centered li a:hover{
	background:#000;
	color:#fff;
}

ol.bjqs-markers li a{
	padding:5px 10px;
	background:#000;
	color:#fff;
	margin:5px;
	text-decoration: none;
}

ol.bjqs-markers li.active-marker a,
ol.bjqs-markers li a:hover{
	background: #999;
}

p.bjqs-caption{
	background: rgba(255,255,255,0.5);
}

/* Basic jQuery Slider essential styles */

ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{position:absolute; display:none;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ul.bjqs-controls.v-centered li a{position:absolute;}
ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}
ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}
ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}
ol.bjqs-markers.h-centered{text-align: center;}
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li a{display:inline-block;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}

JavaScript

;(function($) {

    "use strict";

    $.fn.bjqs = function(o) {
        
        // slider default settings
        var defaults        = {

            // w + h to enforce consistency
            width           : 700,
            height          : 300,

            // transition valuess
            animtype        : 'fade',
            animduration    : 450,      // length of transition
            animspeed       : 4000,     // delay between transitions
            automatic       : true,     // enable/disable automatic slide rotation

            // control and marker configuration
            showcontrols    : true,     // enable/disable next + previous UI elements
            centercontrols  : true,     // vertically center controls
            nexttext        : 'Next',   // text/html inside next UI element
            prevtext        : 'Prev',   // text/html inside previous UI element
            showmarkers     : true,     // enable/disable individual slide UI markers
            centermarkers   : true,     // horizontally center markers

            // interaction values
            keyboardnav     : true,     // enable/disable keyboard navigation
            hoverpause      : true,     // enable/disable pause slides on hover

            // presentational options
            usecaptions     : true,     // enable/disable captions using img title attribute
            randomstart     : false,     // start from a random slide
            responsive      : false     // enable responsive behaviour

        };

        // create settings from defauls and user options
        var settings        = $.extend({}, defaults, o);

        // slider elements
        var $wrapper        = this,
            $slider         = $wrapper.find('ul.bjqs'),
            $slides         = $slider.children('li'),

            // control elements
            $c_wrapper      = null,
            $c_fwd          = null,
            $c_prev         = null,

            // marker...