carousel images not responsive

Question

I am trying to create a responsive carousel, but the position of the images I cant figure out how to align.

This is what my target is

 /*! * 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> 

Bug I am facing is if the viewport is different, then there is no responsiveness because all li is hardcoded at a position to achieve smooth trasition. I can figure out how to align these images relative to the current visible image. Issue is with css.

Answer 1

Try below slider, if you required

 $('.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>