Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a horizontal scrolling carousel using flexbox?

My goal:

Make a horizontal scrolling carousel just like Google (see picture)

horizontal scrolling carousel

After searching, these links provided a good start:

I've never used flexbox before. My hunch is I need to set flex-direction:row and display:inline-flex.

Any ideas on what other CSS properties I need to use? I'd really appreciate it.

like image 516
Brock Gion Avatar asked Nov 12 '16 04:11

Brock Gion


People also ask

How do I create a horizontal scrolling container?

To enable horizontal scrolling, we can use the CSS property overflow-x. If we assign the value scroll to the overflow-x property of the container element, the browser will hide horizontally overflowing content and make it accessible via horizontal scrolling.

How do you make a Flex container scrollable?

The key is to use Flexbox for all containers that wrap the scrollable container, and give the outermost container a predefined height. Since content lays vertically on the page by default, I recommend making each container use the vertical (column) flex layout rather than the default horizontal (row) layout.


1 Answers

Flexbox Horizontal Carousel:

Flex Container

  • Make the container display: flex
  • Asure the items don’t wrap: flex-wrap: nowrap;
  • Allow the area to scroll: overflow: auto;
  • Momentum & ease of use for iOS: -webkit-overflow-scrolling property;
  • IE 10, 11 & Edge: -ms-overflow-style: -ms-autohiding-scrollbar;

    .container {
       display: flex;
       flex-wrap: nowrap;
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
       -ms-overflow-style: -ms-autohiding-scrollbar; 
     }
    

Flex Items

Each item needs a flex-growth and a flex-shrink value of 0, and the flex-based property can be set to auto:

.item {
  flex: 0 0 auto; 
}

I'm posting here a snippet with few examples. Hope it helps!

.scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.flex {
  display: flex;
  flex-wrap: nowrap;
}

.logo {
  flex: 0 0 120px;
}

.nav-item {
  flex: 0 0 auto;
}

.example-three .logo {
  display: block;
  border: none;
}

.example-three .nav-item {
  color: #fff;
}

header {
  background: #281a41;
}

.example-one-header, .example-two-header {
  border-radius: 3px;
}

.example-three-header {
  border-radius: 3px 3px 0 0;
}

.example-three nav {
  background: #727c87;
  border-radius: 0 0 3px 3px;
}

.logo {
  text-align: center;
  font-weight: 700;
  color: #727c87;
  border-right: 1px solid rgba(114, 124, 135, 0.4);
  padding: 13px 24px 12px;
}

.logo, .nav-item {
  padding: 13px 16px 12px;
}
.logo:not(:last-child), .nav-item:not(:last-child) {
  border-right: 1px solid rgba(114, 124, 135, 0.2);
}

* {
  box-sizing: border-box;
}

body {
  max-width: 360px;
  margin: 5% auto;
  color: #64cce3;
  line-height: 1.5;
}

.logo, .nav-item {
  font-size: 14px;
}

.title {
  margin: 24px 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: #999;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px #76daff;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5);
}
<div class="container example-one">
  <div class="title">Whole Section scroll</div>
  <header class="example-one-header scroll">
    <span class="logo">Company Logo</span>
    <nav class="flex">
      <span class="nav-item">Shop</span>
      <span class="nav-item">Portfolio</span>
      <span class="nav-item">Downloads</span>
      <span class="nav-item">About Us</span>
      <span class="nav-item">Contact Us</span>
    </nav>
  </header>
</div>
<div class="container example-two">
  <div class="title">Inside Nav only scrolling</div>
  <header class="example-two-header flex">
    <span class="logo">Company Logo</span>
    <nav class="scroll">
      <span class="nav-item">Shop</span>
      <span class="nav-item">Portfolio</span>
      <span class="nav-item">Downloads</span>
      <span class="nav-item">About Us</span>
      <span class="nav-item">Contact Us</span>
    </nav>
  </header>
</div>
<div class="container example-three">
  <div class="title">Separated navigation</div>
  <header class="example-three-header">
    <span class="logo">Company Logo</span>
  </header>
  <nav class="scroll">
    <span class="nav-item">Shop</span>
    <span class="nav-item">Portfolio</span>
    <span class="nav-item">Downloads</span>
    <span class="nav-item">About Us</span>
    <span class="nav-item">Contact Us</span>
  </nav>
</div>

You can also take a look at Andi Smith flexbox-carousel:

http://www.andismith.com/flexbox-carousel/

http://www.andismith.com/blog/2012/05/css3-flexbox-carousel/

like image 139
David Bendahan Avatar answered Sep 20 '22 10:09

David Bendahan