---
title: "Making a responsive slider"  
description: "Making a responsive slider"  
author: "Anonymous User"  
published: 2013-04-10  
updated: 2013-04-15  
canonical: https://www.mindstick.com/forum/755/making-a-responsive-slider  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 2 minutes  

---

# Making a responsive slider

Hi Everyone!\
I'm creating my own slider and I need some help making it [responsive](https://www.mindstick.com/blog/11940/tips-for-fast-responsive-web-design-in-2018). [Right now](https://answers.mindstick.com/qa/36863/what-would-happen-if-gravity-became-5-percent-stronger-right-now) it works with the responsive part on the first slide, but when I go to the next slide (in this case, any li that is NOT first child) the positioning and width's of the li's doesn't add up and [everything gets](https://yourviews.mindstick.com/story/5102/nature-doesn-t-hurry-yet-everything-gets-done) wrong.\
It's hard to [explain](https://www.mindstick.com/forum/157854/what-is-system-debugging-explain-some-system-debugging-tools-used-in-modern-computer-systems) and I'd love if anyone could take a look here:\
http://robbinj.se/r/\
I have a wrapper with a width of 100% and every li's width gets set to the width of the wrapper of 100%. [If you don](https://www.mindstick.com/forum/159346/how-is-the-exception-handled-if-you-don-t-catch-it)'t understand what I'm after try go to the page, resize your [browser](https://www.mindstick.com/blog/155254/which-is-the-best-internet-browser) on the first slide, that is how I want it to work on all the other slides as well but I need some ideas on how to do it!\
Here's the jQuery:\
var slideLiWidth = $('#slider').width(), slideUl = $('#slider ul'), slideLi = $(slideUl).find('li'), slides = $(slideLi).length, slideNav = $('.slideNav'), current = 1;\
slideLi.width(slideLiWidth);\
$(window).resize([function](https://www.mindstick.com/articles/13001/multi-statement-table-valued-user-defined-function-in-sql-server)() { var slideLiWidth = $('#slider').width(); slideLi.width(slideLiWidth);});\
slideNav.click(function() { dir = $(this).data('dir'); [transition](https://answers.mindstick.com/qa/94090/a-material-is-dimensionally-stable-at-room-temperature-if-its-glass-transition-temperature-tg-is)();});\
function transition() { var slideLiWidth = $('#slider').width(); if (dir === 'next' && current < slides) { slideUl.transition({x: '-='+slideLiWidth}, 500, 'ease'); current++; } else if (dir === 'back' && current > 1) { slideUl.transition({x: '+='+slideLiWidth}, 500, 'ease'); current--; }}\
[Thank you in advance](https://answers.mindstick.com/qa/40482/why-was-1968-a-year-of-tension-and-turmoil-list-10-events-1-being-the-best-and-10-the-worst-thank-you-in-advance)!

## Replies

### Reply by AVADHESH PATEL

Hi Ben!\
You can try as below!\
var $slider = $('#slider'), imgW = $('#slider li').outerWidth(true), winW = 0, zero = 0;\
function getSizes(){ winW = $(window).width(); zero = (winW-imgW)/2; $slider.animate({left: zero},0); // This should 'zero' the position on resize}\
getSizes(); \
\
$(window).resize(function() { getSizes();});


---

Original Source: https://www.mindstick.com/forum/755/making-a-responsive-slider

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.