My goal:
Make a horizontal scrolling carousel just like Google (see picture)
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.
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.
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.
Flex Container
display: flex
flex-wrap: nowrap;
overflow: auto;
-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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With