Create a slider with columns using Bootstrap

Question

I have a site with 4 columns. I would like to make it responsive but instead of displaying the columns at the bottom like Bootstrap's default method, I would like columns to be full width of the device and slide between them.

Here is a schema:

schema

And what I did so far:

jsfiddle

@media (max-width: 979px) {
.container {
    max-width: none !important;
}
.column1 {
    width: 100%;
}

}

Is it possible to make a column full width using device width and not container width? Do I have to use javascript?

Display table comes to mind, but you're going to have to use javascript for the swipes — Graham Walters
– Graham Walters, Commented Sep 11, 2013 at 23:20

Graham Walters · Accepted Answer · 2014-01-30 20:31:19Z

3

If you don't mind using javascript, you can use Swipe.js

The html structure goes like so:

<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

The CSS looks like this:

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

And the Javascript looks like this:

window.onload = function() {
  window.mySwipe = Swipe(document.getElementById('slider'));
}

Don't forget to include the javascript file: https://github.com/bradbirdsall/Swipe/blob/master/swipe.js

Here's a demo

Edit Providing you only want this to apply to mobile devices, here's the mobile specific code:

The HTML would change to this:

<div id='slider'>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

And the JavaScript would change to this:

window.onload = function() {
  if ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    var slider = document.getElementById('slider');
    if (slider.classList) {
      slider.classList.add('swipe');
      slider.getElementsByTagName('div')[0].classList.add('swipe-wrap');
    } else {
      slider.className += 'swipe';
      slider.getElementsByTagName('div')[0].className += 'swipe-wrap';
    }
    window.mySwipe = Swipe(document.getElementById('slider'));
  }
}

Here's another demo

edited Jan 30, 2014 at 20:31

answered Sep 11, 2013 at 23:39

Graham Walters

2,0642 gold badges19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vilarix Over a year ago

That works really great, thank you! I'll have to find out how to enable this for mobile devices only though.

Graham Walters Over a year ago

@Vilarix I've updated my answer. You can add your own classes to the code to style it, just avoid making changes to the swipe and swipe-wrap classes. Also don't forget you still need the CSS in the mobile version.

Collectives™ on Stack Overflow

Create a slider with columns using Bootstrap

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related