How to make my jQuery slides responsive?

I am working on a site for personal practice, and I integrated jQuery slideshows for some photos. My problem is that I can’t figure out how to make these slides responsive when zooming in and out. I checked that everything feels, but can not find the problem. Here is the code:

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> <link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,400italic,500italic' rel='stylesheet' type='text/css'> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" /> <meta charset="UTF-8"/> <link rel="sitemap" type="application/xml" title="Sitemap" href="sitemap.xml" /> <style> /* Prevents slides from flashing */ #slides { display:none; } </style> <!-- jQuery --> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ var slideWidth = 700; var slideHeight = 393; if(window.innerWidth <= 400) { slideWidth = window.innerWidth; } $("#slides").slidesjs({ play: { active: true, // [boolean] Generate the play and stop buttons. // You cannot use your own buttons. Sorry. effect: "fade", // [string] Can be either "slide" or "fade". interval: 3000, // [number] Time spent on each slide in milliseconds. auto: true, // [boolean] Start playing the slideshow on load. swap: true, // [boolean] show/hide stop and play buttons pauseOnHover: false, // [boolean] pause a playing slideshow on hover restartDelay: 2500 // [number] restart delay on inactive slideshow }, width: slideWidth, height: slideHeight }); }); </script> <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png"> <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/manifest.json"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"> <meta name="theme-color" content="#ffffff"> <title>Viktor and Luise</title> </head> <body> <p class="HomeHeaderBig">Viktor & Luise</p> <!-- Menu --> <nav> <ul> <li><a href="#" id="dropdown-button">Produkte</a></li> </ul> <ul> <li><a href="Home.html">Home</a></li> <li><a href="Kontakt.html">Kontakt</a></li> <li><a href="News.html">News</a></li> <li><a href="About.html">Über uns</a></li> <li><a href="Impressum.html">Impressum</a></li> </ul> </nav> <!-- Images --> <div id="slides"> <img src="Images/VL-10.jpg" alt="throughtherackjacket"> <img src="Images/VL-1.jpg" alt="storewindow"> <img src="Images/VL-3.jpg" alt="whitejacket"> <img src="Images/VL-4.jpg" alt="showcase1"> <img src="Images/VL-5.jpg" alt="showcase2"> <img src="Images/VL-6.jpg" alt="showcase3"> <img src="Images/VL-7.jpg" alt="lvshoes"> <img src="Images/VL-8.jpg" alt="polojacket"> <img src="Images/VL-9.jpg" alt="shirt"> </div> <script src="jquery.slides.js"></script> <script src="scripts.js"></script> </body> </html> 

 img { position: relative; padding-top: 4%; } body { font-family: 'Alegreya Sans SC', sans-serif; font-weight: lighter; } .slides { display: block; max-width: 50%; max-height: 100%; position: relative; margin-left: 20%; margin-top: 2% } .slidesjs-container { overflow: hidden; margin: 0; width: 100%; background-color: red; } 

 // Generated by CoffeeScript 1.6.1 (function() { (function($, window, document) { var Plugin, defaults, pluginName; pluginName = "slidesjs"; defaults = { width: 1000, height: 900, start: 1, navigation: { active: true, effect: "slide" }, pagination: { active: false, effect: "slide" }, play: { active: false, effect: "slide", interval: 5000, auto: false, swap: true, pauseOnHover: false, restartDelay: 2500 }, effect: { slide: { speed: 500 }, fade: { speed: 300, crossfade: true } }, callback: { loaded: function() {}, start: function() {}, complete: function() {} } }; Plugin = (function() { function Plugin(element, options) { this.element = element; this.options = $.extend(true, {}, defaults, options); this._defaults = defaults; this._name = pluginName; this.init(); } return Plugin; })(); Plugin.prototype.init = function() { var $element, nextButton, pagination, playButton, prevButton, stopButton, _this = this; $element = $(this.element); this.data = $.data(this); $.data(this, "animating", false); $.data(this, "total", $element.children().not(".slidesjs-navigation", $element).length); $.data(this, "current", this.options.start - 1); $.data(this, "vendorPrefix", this._getVendorPrefix()); if (typeof TouchEvent !== "undefined") { $.data(this, "touch", true); this.options.effect.slide.speed = this.options.effect.slide.speed / 2; } $element.css({ }); $element.slidesContainer = $element.children().not(".slidesjs-navigation", $element).wrapAll("<div class='slidesjs-container'>", $element).parent().css({ overflow: "hidden", position: "relative" }); $(".slidesjs-container", $element).wrapInner("<div class='slidesjs-control'>", $element).children(); $(".slidesjs-control", $element).css({ position: "relative", left: 0 }); $(".slidesjs-control", $element).children().addClass("slidesjs-slide").css({ position: "absolute", top: 0, left: 0, width: "100%", zIndex: 0, display: "none", webkitBackfaceVisibility: "hidden" }); $.each($(".slidesjs-control", $element).children(), function(i) { var $slide; $slide = $(this); return $slide.attr("slidesjs-index", i); }); if (this.data.touch) { $(".slidesjs-control", $element).on("touchstart", function(e) { return _this._touchstart(e); }); $(".slidesjs-control", $element).on("touchmove", function(e) { return _this._touchmove(e); }); $(".slidesjs-control", $element).on("touchend", function(e) { return _this._touchend(e); }); } $element.fadeIn(0); this.update(); if (this.data.touch) { this._setuptouch(); } $(".slidesjs-control", $element).children(":eq(" + this.data.current + ")").eq(0).fadeIn(0, function() { return $(this).css({ zIndex: 10 }); }); if (this.options.navigation.active) { prevButton = $("<a>", { "class": "slidesjs-previous slidesjs-navigation", href: "#", title: "Previous", text: "<" }).appendTo($element); nextButton = $("<a>", { "class": "slidesjs-next slidesjs-navigation", href: "#", title: "Next", text: ">" }).appendTo($element); } $(".slidesjs-next", $element).click(function(e) { e.preventDefault(); _this.stop(true); return _this.next(_this.options.navigation.effect); }); $(".slidesjs-previous", $element).click(function(e) { e.preventDefault(); _this.stop(true); return _this.previous(_this.options.navigation.effect); }); if (this.options.play.active) { playButton = $("<a>", { "class": "slidesjs-play slidesjs-navigation", href: "#", title: "Play", text: "" }).appendTo($element); stopButton = $("<a>", { "class": "slidesjs-stop slidesjs-navigation", href: "#", title: "Stop", text: "" }).appendTo($element); playButton.click(function(e) { e.preventDefault(); return _this.play(true); }); stopButton.click(function(e) { e.preventDefault(); return _this.stop(true); }); if (this.options.play.swap) { stopButton.css({ display: "none" }); } } if (this.options.pagination.active) { pagination = $("<ul>", { "class": "slidesjs-pagination" }).appendTo($element); $.each(new Array(this.data.total), function(i) { var paginationItem, paginationLink; paginationItem = $("<li>", { "class": "slidesjs-pagination-item" }).appendTo(pagination); paginationLink = $("<a>", { href: "#", "data-slidesjs-item": i, html: i + 1 }).appendTo(paginationItem); return paginationLink.click(function(e) { e.preventDefault(); _this.stop(true); return _this.goto(($(e.currentTarget).attr("data-slidesjs-item") * 1) + 1); }); }); } $(window).bind("resize", function() { return _this.update(); }); this._setActive(); if (this.options.play.auto) { this.play(); } return this.options.callback.loaded(this.options.start); }; Plugin.prototype._setActive = function(number) { var $element, current; $element = $(this.element); this.data = $.data(this); current = number > -1 ? number : this.data.current; $(".active", $element).removeClass("active"); return $(".slidesjs-pagination li:eq(" + current + ") a", $element).addClass("active"); }; Plugin.prototype.update = function() { var $element, height, width; $element = $(this.element); this.data = $.data(this); $(".slidesjs-control", $element).children(":not(:eq(" + this.data.current + "))").css({ display: "none", left: 0, zIndex: 0 }); width = 1000; height = 900; this.options.width = width; this.options.height = height; return $(".slidesjs-control, .slidesjs-container", $element).css({ width: width, height: height }); }; Plugin.prototype.next = function(effect) { var $element; $element = $(this.element); this.data = $.data(this); $.data(this, "direction", "next"); if (effect === void 0) { effect = this.options.navigation.effect; } if (effect === "fade") { return this._fade(); } else { return this._slide(); } }; Plugin.prototype.previous = function(effect) { var $element; $element = $(this.element); this.data = $.data(this); $.data(this, "direction", "previous"); if (effect === void 0) { effect = this.options.navigation.effect; } if (effect === "fade") { return this._fade(); } else { return this._slide(); } }; Plugin.prototype.goto = function(number) { var $element, effect; $element = $(this.element); this.data = $.data(this); if (effect === void 0) { effect = this.options.pagination.effect; } if (number > this.data.total) { number = this.data.total; } else if (number < 1) { number = 1; } if (typeof number === "number") { if (effect === "fade") { return this._fade(number); } else { return this._slide(number); } } else if (typeof number === "string") { if (number === "first") { if (effect === "fade") { return this._fade(0); } else { return this._slide(0); } } else if (number === "last") { if (effect === "fade") { return this._fade(this.data.total); } else { return this._slide(this.data.total); } } } }; Plugin.prototype._setuptouch = function() { var $element, next, previous, slidesControl; $element = $(this.element); this.data = $.data(this); slidesControl = $(".slidesjs-control", $element); next = this.data.current + 1; previous = this.data.current - 1; if (previous < 0) { previous = this.data.total - 1; } if (next > this.data.total - 1) { next = 0; } slidesControl.children(":eq(" + next + ")").css({ display: "block", left: this.options.width }); return slidesControl.children(":eq(" + previous + ")").css({ display: "block", left: -this.options.width }); }; Plugin.prototype._touchstart = function(e) { var $element, touches; $element = $(this.element); this.data = $.data(this); touches = e.originalEvent.touches[0]; this._setuptouch(); $.data(this, "touchtimer", Number(new Date())); $.data(this, "touchstartx", touches.pageX); $.data(this, "touchstarty", touches.pageY); return e.stopPropagation(); }; Plugin.prototype._touchend = function(e) { var $element, duration, prefix, slidesControl, timing, touches, transform, _this = this; $element = $(this.element); this.data = $.data(this); touches = e.originalEvent.touches[0]; slidesControl = $(".slidesjs-control", $element); if (slidesControl.position().left > this.options.width * 0.5 || slidesControl.position().left > this.options.width * 0.1 && (Number(new Date()) - this.data.touchtimer < 250)) { $.data(this, "direction", "previous"); this._slide(); } else if (slidesControl.position().left < -(this.options.width * 0.5) || slidesControl.position().left < -(this.options.width * 0.1) && (Number(new Date()) - this.data.touchtimer < 250)) { $.data(this, "direction", "next"); this._slide(); } else { prefix = this.data.vendorPrefix; transform = prefix + "Transform"; duration = prefix + "TransitionDuration"; timing = prefix + "TransitionTimingFunction"; slidesControl[0].style[transform] = "translateX(0px)"; slidesControl[0].style[duration] = this.options.effect.slide.speed * 0.85 + "ms"; } slidesControl.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function() { prefix = _this.data.vendorPrefix; transform = prefix + "Transform"; duration = prefix + "TransitionDuration"; timing = prefix + "TransitionTimingFunction"; slidesControl[0].style[transform] = ""; slidesControl[0].style[duration] = ""; return slidesControl[0].style[timing] = ""; }); return e.stopPropagation(); }; Plugin.prototype._touchmove = function(e) { var $element, prefix, slidesControl, touches, transform; $element = $(this.element); this.data = $.data(this); touches = e.originalEvent.touches[0]; prefix = this.data.vendorPrefix; slidesControl = $(".slidesjs-control", $element); transform = prefix + "Transform"; $.data(this, "scrolling", Math.abs(touches.pageX - this.data.touchstartx) < Math.abs(touches.pageY - this.data.touchstarty)); if (!this.data.animating && !this.data.scrolling) { e.preventDefault(); this._setuptouch(); slidesControl[0].style[transform] = "translateX(" + (touches.pageX - this.data.touchstartx) + "px)"; } return e.stopPropagation(); }; Plugin.prototype.play = function(next) { var $element, currentSlide, slidesContainer, _this = this; $element = $(this.element); this.data = $.data(this); if (!this.data.playInterval) { if (next) { currentSlide = this.data.current; this.data.direction = "next"; if (this.options.play.effect === "fade") { this._fade(); } else { this._slide(); } } $.data(this, "playInterval", setInterval((function() { currentSlide = _this.data.current; _this.data.direction = "next"; if (_this.options.play.effect === "fade") { return _this._fade(); } else { return _this._slide(); } }), this.options.play.interval)); slidesContainer = $(".slidesjs-container", $element); if (this.options.play.pauseOnHover) { slidesContainer.unbind(); slidesContainer.bind("mouseenter", function() { return _this.stop(); }); slidesContainer.bind("mouseleave", function() { if (_this.options.play.restartDelay) { return $.data(_this, "restartDelay", setTimeout((function() { return _this.play(true); }), _this.options.play.restartDelay)); } else { return _this.play(); } }); } $.data(this, "playing", true); $(".slidesjs-play", $element).addClass("slidesjs-playing"); if (this.options.play.swap) { $(".slidesjs-play", $element).hide(); return $(".slidesjs-stop", $element).show(); } } }; Plugin.prototype.stop = function(clicked) { var $element; $element = $(this.element); this.data = $.data(this); clearInterval(this.data.playInterval); if (this.options.play.pauseOnHover && clicked) { $(".slidesjs-container", $element).unbind(); } $.data(this, "playInterval", null); $.data(this, "playing", false); $(".slidesjs-play", $element).removeClass("slidesjs-playing"); if (this.options.play.swap) { $(".slidesjs-stop", $element).hide(); return $(".slidesjs-play", $element).show(); } }; Plugin.prototype._slide = function(number) { var $element, currentSlide, direction, duration, next, prefix, slidesControl, timing, transform, value, _this = this; $element = $(this.element); this.data = $.data(this); if (!this.data.animating && number !== this.data.current + 1) { $.data(this, "animating", true); currentSlide = this.data.current; if (number > -1) { number = number - 1; value = number > currentSlide ? 1 : -1; direction = number > currentSlide ? -this.options.width : this.options.width; next = number; } else { value = this.data.direction === "next" ? 1 : -1; direction = this.data.direction === "next" ? -this.options.width : this.options.width; next = currentSlide + value; } if (next === -1) { next = this.data.total - 1; } if (next === this.data.total) { next = 0; } this._setActive(next); slidesControl = $(".slidesjs-control", $element); if (number > -1) { slidesControl.children(":not(:eq(" + currentSlide + "))").css({ display: "none", left: 0, zIndex: 0 }); } slidesControl.children(":eq(" + next + ")").css({ display: "block", left: value * this.options.width, zIndex: 10 }); this.options.callback.start(currentSlide + 1); if (this.data.vendorPrefix) { prefix = this.data.vendorPrefix; transform = prefix + "Transform"; duration = prefix + "TransitionDuration"; timing = prefix + "TransitionTimingFunction"; slidesControl[0].style[transform] = "translateX(" + direction + "px)"; slidesControl[0].style[duration] = this.options.effect.slide.speed + "ms"; return slidesControl.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function() { slidesControl[0].style[transform] = ""; slidesControl[0].style[duration] = ""; slidesControl.children(":eq(" + next + ")").css({ left: 0 }); slidesControl.children(":eq(" + currentSlide + ")").css({ display: "none", left: 0, zIndex: 0 }); $.data(_this, "current", next); $.data(_this, "animating", false); slidesControl.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd"); slidesControl.children(":not(:eq(" + next + "))").css({ display: "none", left: 0, zIndex: 0 }); if (_this.data.touch) { _this._setuptouch(); } return _this.options.callback.complete(next + 1); }); } else { return slidesControl.stop().animate({ left: direction }, this.options.effect.slide.speed, (function() { slidesControl.css({ left: 0 }); slidesControl.children(":eq(" + next + ")").css({ left: 0 }); return slidesControl.children(":eq(" + currentSlide + ")").css({ display: "none", left: 0, zIndex: 0 }, $.data(_this, "current", next), $.data(_this, "animating", false), _this.options.callback.complete(next + 1)); })); } } }; Plugin.prototype._fade = function(number) { var $element, currentSlide, next, slidesControl, value, _this = this; $element = $(this.element); this.data = $.data(this); if (!this.data.animating && number !== this.data.current + 1) { $.data(this, "animating", true); currentSlide = this.data.current; if (number) { number = number - 1; value = number > currentSlide ? 1 : -1; next = number; } else { value = this.data.direction === "next" ? 1 : -1; next = currentSlide + value; } if (next === -1) { next = this.data.total - 1; } if (next === this.data.total) { next = 0; } this._setActive(next); slidesControl = $(".slidesjs-control", $element); slidesControl.children(":eq(" + next + ")").css({ display: "none", left: 0, zIndex: 10 }); this.options.callback.start(currentSlide + 1); if (this.options.effect.fade.crossfade) { slidesControl.children(":eq(" + this.data.current + ")").stop().fadeOut(this.options.effect.fade.speed); return slidesControl.children(":eq(" + next + ")").stop().fadeIn(this.options.effect.fade.speed, (function() { slidesControl.children(":eq(" + next + ")").css({ zIndex: 0 }); $.data(_this, "animating", false); $.data(_this, "current", next); return _this.options.callback.complete(next + 1); })); } else { return slidesControl.children(":eq(" + currentSlide + ")").stop().fadeOut(this.options.effect.fade.speed, (function() { slidesControl.children(":eq(" + next + ")").stop().fadeIn(_this.options.effect.fade.speed, (function() { return slidesControl.children(":eq(" + next + ")").css({ zIndex: 10 }); })); $.data(_this, "animating", false); $.data(_this, "current", next); return _this.options.callback.complete(next + 1); })); } } }; Plugin.prototype._getVendorPrefix = function() { var body, i, style, transition, vendor; body = document.body || document.documentElement; style = body.style; transition = "transition"; vendor = ["Moz", "Webkit", "Khtml", "O", "ms"]; transition = transition.charAt(0).toUpperCase() + transition.substr(1); i = 0; while (i < vendor.length) { if (typeof style[vendor[i] + transition] === "string") { return vendor[i]; } i++; } return false; }; return $.fn[pluginName] = function(options) { return this.each(function() { if (!$.data(this, "plugin_" + pluginName)) { return $.data(this, "plugin_" + pluginName, new Plugin(this, options)); } }); }; })(jQuery, window, document); }).call(this); 
+5
source share
3 answers

Bootstrap is the most popular HTML, CSS, and JS framework for developing agile

see this link: http://getbootstrap.com/

use @media tags to define mobile view, desktop view, tablet view, landscape view, etc., for example here http://getbootstrap.com/css/

+1
source

see .... you can either link to bootstrap ... its the best structure for responsive websites, and I think that a class that meets the requirements of IMG may have a problem to some extent, and note that please remove the built-in width while using adaptive structure

+1
source

Creating a slide in response can lead to some trouble, especially if you do it using jQuery. In my opinion, you need to do a couple of things:

  • The easiest way is to use media queries, percentages, etc. to make the slide adapt to different screen sizes.
  • And most importantly, you should say goodbye to jQuery, since on mobile devices this is very poor performance (you may not feel it on the iPhone, but it will certainly be on all junior and medium devices). You should create a function similar to jQuery animation, but using css3 transitions which are hardware and more efficient.

If you do this, the slide will work perfectly even on the slowest devices.

0
source

All Articles