javascript - 旋转木马图像没有响应

Question

我正在尝试创建响应式轮播，但我不知道如何对齐图像的位置。

这是我的目标

/*!
 * jQuery animated slider
 * A simple slider that can be animated using CSS transitions (see example)
 * by David Wallin
 * MIT License
 *
 *
 * USAGE:
 * $("myULList").AnimatedSlider( { } );
 * Note: Behavior may be undefined if you have less than 3 items.
 *
 * options = {
 *      infiniteScroll: true,
 *      visibleItems: 3,        // 3 or 5. if 5, next_item_2 and previous_item_2 will be used.
 *      changedCallback: function(animatedSliderObject, currentItem),       // called every time the slide changes
 *      willChangeCallback: function(animatedSliderObject, currentItem),    // called before the change transition
 *      userChangedCallback: function(animatedSliderObject, currentItem),   // called after the transition
 * };
 *
 *
 * you can get access to the AnimatedSlider object by:
 * var slider = $("myULList").data("AnimatedSlider");
 *
 *
 */

/*
    CSS Classes Needed:   (see animated-slider.css)
        previous_hidden
        next_hidden
        previous_item  
        previous_item_2 *optional
        next_item 
        next_item2 *optional
        current_item

    also, li needs to have transitions set up.
*/

;
(function($, window, document, undefined) {

    // Create the defaults once
    var pluginName = 'AnimatedSlider',
        defaults = {
            infiniteScroll: true,
            visibleItems: 3,
            changedCallback: null,
            willChangeCallback: null,
            userChangedCallback: null,
            useTransitions: true
        };

    var supportsTransitions = _supportsTransitions();

    function Plugin(element, options) {
        this.element = element;
        this.jqElem = $(element);
        this.items = $(this.element).children("li");
        this.numSliderItems = this.items.length;
        this.currentItem = 1;
        this.commandQueue = [];

        this.jqElem.data(pluginName, this);

        this.options = $.extend({}, defaults, options);

        this._defaults = defaults;
        this._name = pluginName;

        this.inTransition = false;
        this.init();


    }

    Plugin.prototype.init = function() {
        var pluginThis = this;

        if (pluginThis.options.useTransitions) {
            this.jqElem.on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',
                function() {
                    if (pluginThis.inTransition) {
                        pluginThis.inTransition = false;

                        if (pluginThis.options.changedCallback)
                            pluginThis.options.changedCallback(pluginThis, pluginThis.currentItem);

                        setTimeout(function() {
                            pluginThis.doCommandQueue();
                        }, 50);



                    }
                });
        } else {
            this.items.css('transition', 'none');
            this.items.find("*").css('transition', 'none');
        }

        if (this.options.prevButton) {
            $(this.options.prevButton).on('click', function(e) {
                e.preventDefault();
                pluginThis.prevItem();
            });
        }

        if (this.options.nextButton) {
            $(this.options.nextButton).on('click', function(e) {

                e.preventDefault();
                pluginThis.nextItem();
            });
        }


        this.setItem(1);

        // If the slider is hidden initially, it may not get the event which ends the transition. Force it to false.
        this.inTransition = false;

    };

    Plugin.prototype.setItem = function(n) {
        var sliderItems = this.items;

        // remove existing state classes
        sliderItems.removeClass();
        var wrapFuncNone = function(n) {
            return n;
        };
        var wrapFunc;

        if (this.options.infiniteScroll)
            wrapFunc = this._wrapIndex;
        else
            wrapFunc = wrapFuncNone;

        for (var i = 0; i < sliderItems.length; i++) {
            // remove all classes
            var item = sliderItems.eq(i);

            if (i == n) {
                item.addClass("current_item");
            } else if (i < n) {
                item.addClass("previous_hidden");
            } else if (i > n) {
                item.addClass("next_hidden");
            }
        }

        if (this.options.infiniteScroll) {
            sliderItems.eq(this._wrapIndex(n - 1)).removeClass().addClass("previous_item");
            sliderItems.eq(this._wrapIndex(n + 1)).removeClass().addClass("next_item");

            if (this.options.visibleItems == 3) {
                sliderItems.eq(this._wrapIndex(n - 2)).removeClass().addClass("previous_hidden");
                sliderItems.eq(this._wrapIndex(n + 2)).removeClass().addClass("next_hidden");
            } else if (this.options.visibleItems == 5) {
                sliderItems.eq(this._wrapIndex(n - 2)).removeClass().addClass("previous_item_2");
                sliderItems.eq(this._wrapIndex(n + 2)).removeClass().addClass("next_item_2");

                sliderItems.eq(this._wrapIndex(n - 3)).removeClass().addClass("previous_hidden");
                sliderItems.eq(this._wrapIndex(n + 3)).removeClass().addClass("next_hidden");
            }

        } else {
            if (n - 1 >= 0)
                sliderItems.eq(n - 1).removeClass().addClass("previous_item");
            if (n + 1 < this.numSliderItems)
                sliderItems.eq(n + 1).removeClass().addClass("next_item");

            if (this.options.visibleItems == 5) {
                if (n - 2 >= 0)
                    sliderItems.eq(n - 1).removeClass().addClass("previous_item_2");
                if (n + 2 < this.numSliderItems)
                    sliderItems.eq(n + 1).removeClass().addClass("next_item_2");

            }
        }

        currentItem = n;


        if (supportsTransitions && this.options.useTransitions) // Modernizr.csstransitions
        {
            this.inTransition = true;

            if (this.options.willChangeCallback)
                this.options.willChangeCallback(this, this.currentItem);

        } else {
            if (this.options.willChangeCallback)
                this.options.willChangeCallback(this, this.currentItem);

            if (this.options.changedCallback)
                this.options.changedCallback(this, this.currentItem);

        }


    }

    Plugin.prototype.nextItem = function() {

        if (this.inTransition) {

            if (this.commandQueue.length < 3) {
                this.commandQueue.push("nextItem");
            }
            return;
        }

        if (this.options.infiniteScroll || this.currentItem < this.numSliderItems - 1) {
            this.currentItem += 1;
            this.currentItem = this._wrapIndex(this.currentItem);
            this.setItem(this.currentItem);

            if (this.options.userChangedCallback)
                this.options.userChangedCallback(this, this.currentItem);
        }
    }

    Plugin.prototype.prevItem = function() {
        if (this.inTransition) {
            if (this.commandQueue.length < 3) {
                this.commandQueue.push("prevItem");
            }
            return;
        }

        if (this.options.infiniteScroll || this.currentItem >= 1) {
            this.currentItem -= 1;
            this.currentItem = this._wrapIndex(this.currentItem);
            this.setItem(this.currentItem);

            if (this.options.userChangedCallback)
                this.options.userChangedCallback(this, this.currentItem);
        }
    }

    Plugin.prototype.clearAnimations = function() {
        this.inTransition = false;
        this.commandQueue = [];
    }

    Plugin.prototype.doCommandQueue = function() {
        if (this.commandQueue.length == 0)
            return;

        var cmd = this.commandQueue.splice(0, 1)[0];

        this[cmd]();
    }


    Plugin.prototype.refresh = function() {
        this.items = $(this.element).children("li");
        this.numSliderItems = this.items.length;

        this.setItem(this.currentItem);

        clearAnimations();
    }

    Plugin.prototype._wrapIndex = function(n) {
        // note: we're assuming that these indexes aren't getting too crazy out of bounds.

        if (n < 0) {
            n += this.numSliderItems;
        }

        if (n >= this.numSliderItems)
            n -= this.numSliderItems;

        return n;
    }

    // A really lightweight plugin wrapper around the constructor, 
    // preventing against multiple instantiations
    $.fn[pluginName] = function(options) {
        return this.each(function() {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName,
                    new Plugin(this, options));
            }
        });
    }

    function _supportsTransitions() {
        var b = document.body || document.documentElement;
        var s = b.style;
        var p = 'transition';
        if (typeof s[p] == 'string') {
            return true;
        }

        // Tests for vendor specific prop
        v = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'],
        p = p.charAt(0).toUpperCase() + p.substr(1);
        for (var i = 0; i < v.length; i++) {
            if (typeof s[v[i] + p] == 'string') {
                return true;
            }
        }
        return false;
    }

})(jQuery, window, document);

.choose_slider_items li {
	position: relative;
	list-style: none;
	display: none;
	text-align: center;

	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.choose_slider_items .previous_hidden {
	display: block;
	transform: scale(0.6,0.6);
	-moz-transform: scale(0.6,0.6);
	-ms-transform: scale(0.6,0.6);
	-webkit-transform: scale(0.6,0.6);
	opacity: 0.0;
	position: absolute;
	top: 40px;
	left: -5px;
	z-index: 0;
}

.choose_slider_items .next_hidden {
	display: block;
	transform: scale(0.6,0.6);
	-moz-transform: scale(0.6,0.6);
	-ms-transform: scale(0.6,0.6);
	-webkit-transform: scale(0.6,0.6);
	opacity: 0.0;
	position: absolute;
	top: 40px;
	/*left: 525px;*/
	right: -5px;
	z-index: 0;
}

.choose_slider_items .previous_item {
	display: block;
	transform: scale(0.8,0.8);
	-moz-transform: scale(0.8,0.8);
	-ms-transform: scale(0.8,0.8);
	-webkit-transform: scale(0.8,0.8);
	opacity: 0.65;
	position: absolute;
	top: 40px;
	/*left: 95px;*/
	left: 0;
	z-index: 0;
}

.choose_slider_items .next_item {
	display: block;
	transform: scale(0.8,0.8);
	-moz-transform: scale(0.8,0.8);
	-ms-transform: scale(0.8,0.8);
	-webkit-transform: scale(0.8,0.8);
	opacity: 0.65;
	position: absolute;
	top: 40px;
	/*left: 431px;*/
	right: 0;
	z-index: 0;
}

.choose_slider_items .previous_item img, .choose_slider_items .next_item img, .choose_slider_items .previous_hidden img, .choose_slider_items .next_hidden img {
	width: 70px;
	height: 70px;
}


.choose_slider_items .previous_item_2 {
	display: block;
	transform: scale(0.6,0.6);
	-moz-transform: scale(0.6,0.6);
	-ms-transform: scale(0.6,0.6);
	-webkit-transform: scale(0.6,0.6);
	opacity: 0.35;
	position: absolute;
	top: 40px;
	left: -5px;
	z-index: 0;
}

.choose_slider_items .next_item_2 {
	display: block;
	transform: scale(0.6,0.6);
	-moz-transform: scale(0.6,0.6);
	-ms-transform: scale(0.6,0.6);
	-webkit-transform: scale(0.6,0.6);
	opacity: 0.35;
	position: absolute;
	top: 40px;
	left: 525px;
	z-index: 0;
}


.choose_slider_items .current_item {
	display: block;
	position: relative;
	transform: scale(1,1);
	-moz-transform: scale(1,1);
	-ms-transform: scale(1,1);
	-webkit-transform: scale(1,1);
	top: 0;
	/*left: 262px;*/
	left: 0;right: 0;
	margin: 0 auto;
	z-index: 100;
}

.choose_slider_items .current_item img {
	width: 100px;
	height: 100px;
}

<div class="choose_slider">

                    <div class="choose_slider_items">
                        <ul id="mySlider1">
                            <li class="current_item">
                                <a href="#">
                                    <img src="https://www.jqueryscript.net/demo/Simple-Clean-jQuery-CSS3-Carousel-Slider-Plugin-CSS-Slider/images/Placeholder.png" />
                                </a>
                            </li>
                            <li class="current_item">
                                <a href="#">
                                    <img src="https://www.jqueryscript.net/demo/Simple-Clean-jQuery-CSS3-Carousel-Slider-Plugin-CSS-Slider/images/Placeholder.png" />
                                </a>
                            </li>
                            <li class="current_item">
                                <a href="#">
                                    <img src="https://www.jqueryscript.net/demo/Simple-Clean-jQuery-CSS3-Carousel-Slider-Plugin-CSS-Slider/images/Placeholder.png" />
                                </a>
                            </li>
                            <li class="current_item">
                                <a href="#">
                                    <img src="https://www.jqueryscript.net/demo/Simple-Clean-jQuery-CSS3-Carousel-Slider-Plugin-CSS-Slider/images/Placeholder.png" />
                                </a>
                            </li>
                            <li class="current_item">
                                <a href="#">
                                    <img src="https://www.jqueryscript.net/demo/Simple-Clean-jQuery-CSS3-Carousel-Slider-Plugin-CSS-Slider/images/Placeholder.png" />
                                </a>
                            </li>                        
                        </ul>
                    </div>
                </div>

                <div><a id="btn_next1" href="#">Next</a></div>
                <div><a id="btn_prev1" href="#">Previous</a></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
            $("#mySlider1").AnimatedSlider( { prevButton: "#btn_prev1", 
                                             nextButton: "#btn_next1",
                                             visibleItems: 3,
                                             infiniteScroll: true,
                                             willChangeCallback: function(obj, item) { $("#statusText").text("Will change to " + item); },
                                             changedCallback: function(obj, item) { $("#statusText").text("Changed to " + item); }
                                          });
        });
        </script>

我面临的错误是，如果视口(viewport)不同，则没有响应能力，因为所有 li 都被硬编码在一个位置以实现平滑过渡。我可以弄清楚如何将这些图像与当前可见图像对齐。问题出在 css 上。

Answer 1

如果需要，请尝试下面的 slider

$('.owl-carousel').owlCarousel({
    stagePadding: 200,
    loop:true,
    margin:10,
    nav:false,
    items:1,
    lazyLoad: true,
    nav:true,
  responsive:{
        0:{
            items:1,
            stagePadding: 60
        },
        600:{
            items:1,
            stagePadding: 100
        },
        1000:{
            items:1,
            stagePadding: 200
        },
        1200:{
            items:1,
            stagePadding: 250
        },
        1400:{
            items:1,
            stagePadding: 300
        },
        1600:{
            items:1,
            stagePadding: 350
        },
        1800:{
            items:1,
            stagePadding: 400
        }
    }
})

.item {
  opacity: 0.4;
  transition: 0.4s ease all;
  margin: 0 20px;
  transform: scale(0.8);
}
@media (max-width: 1000px) {
  .item {
    margin: 0;
    transform: scale(0.9);
  }
}
.active .item {
  opacity: 1;
  transform: scale(1);
}
body {
  padding: 0;
  margin: 80px 0 0 0;
  font-family: Merriweather;
  background: #f0e8d5;
}

.owl-item {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1);
}

.inner {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  text-align: center;
}
.inner a {
  color: #fff;
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  transition: 0.3s ease border-color;
}
.inner a:hover {
  border-color: #fff;
}
.black .inner a {
  color: #000;
  border-color: rgba(0, 0, 0, 0.4);
}
.black .inner a:hover {
  border-color: #000;
}



.owl-controls {
  position: absolute;
  margin-top: 300px;
}

 <link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="owl-carousel">
   <div class="item">
      <a href="#">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/43033/slider_bags.jpg" alt="" />
      </a>
   </div>
   <div class="item black">
      <a href="#">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/43033/slider_book_cover.jpg" alt="" />
      </a>
   </div>
   <div class="item">
      <a href="#">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/43033/slider_bags.jpg" alt="" />
      </a>
   </div>
   <div class="item black">
      <a href="#">
         <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/43033/slider_book_cover.jpg" alt="" />
         <div class="inner">
         </div>
      </a>
   </div>
   <div class="item">
      <a href="#">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/43033/slider_bags.jpg" alt="" />
      </a>
   </div>
   <div class="item black">
      <a href="#">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/43033/slider_book_cover.jpg" alt="" />
      </a>
   </div>
</div>