Skip to content

Instantly share code, notes, and snippets.

@mightyteja

mightyteja/ecommerce-slider-v2-1.markdown

Created July 16, 2018 15:05
Show Gist options
  • Save mightyteja/0e35f7336e36437c6c6d241d8a599c3a to your computer and use it in GitHub Desktop.
Save mightyteja/0e35f7336e36437c6c6d241d8a599c3a to your computer and use it in GitHub Desktop.
Download ZIP
Ecommerce Slider v2.1
Raw
ecommerce-slider-v2-1.markdown
Raw
index.html
<div class="main">
<header>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Accessories</a></li>
<li><h1>Ecommerce</h1></li>
<li><a href="#">Collections</a></li>
<li><a href="#">Brands</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<div class="cd-slider">
<ul>
<li>
<div class="image" style="background-image:url(https://images.unsplash.com/photo-1421809313281-48f03fa45e9f?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1000);"></div>
<div class="content">
<h2>Jackets Collection 2017</h2>
<a href="#">View Gallery</a>
</div>
</li>
<li>
<div class="image" style="background-image:url(https://images.unsplash.com/uploads/1411724908903377d4696/2e9b0cb2?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1000);"></div>
<div class="content">
<h2>Accessories</h2>
<a href="#">View Gallery</a>
</div>
</li>
<li>
<div class="image" style="background-image:url(https://images.unsplash.com/photo-1416838375725-e834a83f62b7?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1000);"></div>
<div class="content">
<h2>Winter Shoes</h2>
<a href="#">View Gallery</a>
</div>
</li>
<li>
<div class="image" style="background-image:url(https://images.unsplash.com/35/JOd4DPGLThifgf38Lpgj_IMG.jpg?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1000);"></div>
<div class="content">
<h2>Winter Collection 2017</h2>
<a href="#">View Gallery</a>
</div>
</li>
<li>
<div class="image" style="background-image:url(https://images.unsplash.com/photo-1453974336165-b5c58464f1ed?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1000);"></div>
<div class="content">
<h2>Summer Collection</h2>
<a href="#">View Gallery</a>
</div>
</li>
</ul>
</div> <!--/.cd-slider-->
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero qui error, nesciunt quam laborum nihil cupiditate delectus pariatur facilis odio suscipit provident blanditiis, quod. Blanditiis dolorem quo illum voluptatem maiores.</p>
<p>Nihil adipisci quo velit totam, voluptatum voluptas vero voluptatem odio sit ipsam quis quibusdam quasi voluptatibus dolorum fuga vel corrupti facere voluptates, unde officiis. Enim nobis ipsam veritatis qui a?</p>
<p>Esse in, architecto est eius. Quia dicta modi magni, non labore, iusto accusantium assumenda soluta ab quis suscipit vero doloremque quos. Dicta tempore aliquam saepe distinctio optio veritatis iure minima.</p>
<p>Sapiente impedit ea deserunt architecto ipsa qui modi, nemo iste adipisci, nihil quidem, non tenetur. Esse dolorem aperiam quaerat sequi, nostrum voluptate eveniet blanditiis voluptatum soluta error sapiente fugit! Quae.</p>
<p>Voluptate mollitia ipsum consequatur dolor eaque nesciunt. Provident eveniet ratione, alias ad aliquam totam! Illo cum nostrum, adipisci porro quisquam ipsum autem enim iusto eius, optio dolorem, voluptates iure voluptate.</p>
<p>Ducimus mollitia cumque quia, natus sint beatae impedit ad. Libero doloribus nostrum perspiciatis, officiis provident quidem, in ratione aut id enim necessitatibus sit modi. Quidem, tempora ipsum nulla dicta voluptatum?</p>
<p>Nisi recusandae rem culpa, doloribus est perspiciatis atque possimus explicabo, ipsum corrupti dolore officia eius vitae ipsam iste. Dignissimos quasi sunt dolor, at commodi nemo quae vitae? Hic, temporibus, amet?</p>
<p>Aspernatur a accusantium incidunt sit excepturi? Blanditiis ratione ex, repellendus? Repellat, eius officiis mollitia, ad quia, quam nihil voluptates aperiam rem sit modi voluptatum alias. Optio, at perferendis. Cumque, commodi!</p>
<p>Nostrum sit facere ad voluptate et a voluptates, ea, perspiciatis consequuntur, fugiat animi nesciunt eligendi quidem temporibus veritatis quis, dolore illo sunt excepturi pariatur tenetur. Quasi laboriosam similique explicabo voluptas!</p>
<p>Ducimus labore quas, quae non quaerat molestias excepturi fugiat cum obcaecati minima deserunt a, voluptates inventore error similique, molestiae rem placeat aliquid, distinctio dicta dolores. Aperiam, cupiditate, omnis! Ipsum, beatae.</p>
</div>
</div>
Raw
script.js
(function() {
function init(item) {
var items = item.querySelectorAll('li'),
current = 0,
autoUpdate = true,
timeTrans = 4000;
//create nav
var nav = document.createElement('nav');
nav.className = 'nav_arrows';
//create button prev
var prevbtn = document.createElement('button');
prevbtn.className = 'prev';
prevbtn.setAttribute('aria-label', 'Prev');
//create button next
var nextbtn = document.createElement('button');
nextbtn.className = 'next';
nextbtn.setAttribute('aria-label', 'Next');
//create counter
var counter = document.createElement('div');
counter.className = 'counter';
counter.innerHTML = "<span>1</span><span>"+items.length+"</span>";
if (items.length > 1) {
nav.appendChild(prevbtn);
nav.appendChild(counter);
nav.appendChild(nextbtn);
item.appendChild(nav);
}
items[current].className = "current";
if (items.length > 1) items[items.length-1].className = "prev_slide";
var navigate = function(dir) {
items[current].className = "";
if (dir === 'right') {
current = current < items.length-1 ? current + 1 : 0;
} else {
current = current > 0 ? current - 1 : items.length-1;
}
var nextCurrent = current < items.length-1 ? current + 1 : 0,
prevCurrent = current > 0 ? current - 1 : items.length-1;
items[current].className = "current";
items[prevCurrent].className = "prev_slide";
items[nextCurrent].className = "";
//update counter
counter.firstChild.textContent = current + 1;
}
item.addEventListener('mouseenter', function() {
autoUpdate = false;
});
item.addEventListener('mouseleave', function() {
autoUpdate = true;
});
setInterval(function() {
if (autoUpdate) navigate('right');
},timeTrans);
prevbtn.addEventListener('click', function() {
navigate('left');
});
nextbtn.addEventListener('click', function() {
navigate('right');
});
//keyboard navigation
document.addEventListener('keydown', function(ev) {
var keyCode = ev.keyCode || ev.which;
switch (keyCode) {
case 37:
navigate('left');
break;
case 39:
navigate('right');
break;
}
});
// swipe navigation
// from http://stackoverflow.com/a/23230280
item.addEventListener('touchstart', handleTouchStart, false);
item.addEventListener('touchmove', handleTouchMove, false);
var xDown = null;
var yDown = null;
function handleTouchStart(evt) {
xDown = evt.touches[0].clientX;
yDown = evt.touches[0].clientY;
};
function handleTouchMove(evt) {
if ( ! xDown || ! yDown ) {
return;
}
var xUp = evt.touches[0].clientX;
var yUp = evt.touches[0].clientY;
var xDiff = xDown - xUp;
var yDiff = yDown - yUp;
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
if ( xDiff > 0 ) {
/* left swipe */
navigate('right');
} else {
navigate('left');
}
}
/* reset values */
xDown = null;
yDown = null;
};
}
[].slice.call(document.querySelectorAll('.cd-slider')).forEach( function(item) {
init(item);
});
})();
Raw
style.css
* {
box-sizing: border-box;
}
html {
font-size: -moz-calc(4px + 0.45vw);
font-size: -webkit-calc(4px + 0.45vw);
font-size: calc(4px + 0.45vw);
}
body {
font-family: 'Montserrat', sans-serif;
color: #000;
}
a {
text-decoration: none;
color: #000;
}
*:focus {
outline: 0;
}
/* Primary Style
--------------------------------*/
.main {
max-width: 110rem;
margin: 0 auto;
padding: 0 2rem;
}
header {
line-height: 12rem;
height: 12rem;
}
header h1 {
font-size: 2.5rem;
font-family: 'Oswald', sans-serif;
}
header ul::after {
content: '';
display: table;
clear: both;
}
header li {
float: left;
width: 12.5%;
text-align: center;
text-transform: uppercase;
}
header li:nth-child(4) {
width: 25%;
}
header li a {
font-weight: 900;
font-size: 1.2rem;
letter-spacing: 2px;
}
.text {
font-size: 2rem;
padding: 2rem 0;
-moz-columns: 3;
-webkit-columns: 3;
columns: 3;
}
.text p {
margin-bottom: 2rem;
}
@media screen and (max-width: 800px) {
header ul li:not(:nth-child(4)) {
display: none;
}
header ul li:nth-child(4) {
width: 100%;
}
}
/* Slider Style
--------------------------------------*/
.cd-slider {
position: relative;
width: 100%;
height: 50rem;
overflow: hidden;
margin-bottom: 8rem;
}
.cd-slider li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
transition: visibility 0s 1s;
will-change: visibility;
}
.image {
position: absolute;
top: 0;
left: 0;
width: 70%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
clip: rect(0, 80rem, 50rem, 80rem);
transition: clip .5s cubic-bezier(0.99, 0.01, 0.45, 0.9) .5s;
will-change: clip;
}
.content {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
padding: 2rem 0 0 2rem;
font-size: 9rem;
text-align: right;
}
.content h2 {
text-overflow: ellipsis;
overflow: hidden;
transform: translateY(-30%);
opacity: 0;
transition: transform .5s, opacity .5s;
will-change: transform, opacity;
}
.content a {
display: inline-block;
font-size: 2rem;
text-transform: lowercase;
padding: 1.5rem;
opacity: 0;
transform: translateY(-100%);
transition: transform .5s .1s, opacity .5s .1s;
will-change: transform, opacity;
}
/* Current Slide
-------------------------------------*/
li.current {
visibility: visible;
transition-delay: 0s;
}
li.current .image {
clip: rect(0, 80rem, 50rem, 0);
}
li.current .content h2 {
transform: translateY(0);
opacity: 1;
transition-delay: 1s;
}
li.current .content a {
transform: translateY(0);
opacity: 1;
transition-delay: 1.1s;
}
/* Prev Slide
------------------------------------*/
li.prev_slide .image {
clip: rect(0, 0, 50rem, 0);
}
nav {
position: absolute;
bottom: 0;
right: 0;
background: #fff;
z-index: 2;
}
.prev, .next, .counter {
vertical-align: middle;
}
.prev, .next {
position: relative;
display: inline-block;
height: 5rem;
width: 5rem;
border: 0;
cursor: pointer;
background: transparent;
}
.prev::before, .next::before {
content: '';
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
border: .8rem solid transparent;
border-right-width: 1rem;
border-right-color: #000;
border-left-width: 0;
width: 0;
height: 0;
}
.prev::after, .next::after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%) translateZ(0);
left: .5rem;
background: #000;
height: .1rem;
min-height: 1px;
width: 2.5rem;
transition: width .3s;
}
.next::before {
right: 0;
left: auto;
border-left-width: 1rem;
border-left-color: #000;
border-right-width: 0;
}
.next::after {
right: .5rem;
left: auto;
}
.counter {
display: inline-block;
font-size: 4rem;
font-family: serif;
font-style: italic;
}
.counter span:last-child::before {
content: '/';
margin: 0 1rem;
}
.prev:hover::after, .next:hover::after {
width: 3.5rem;
}
@media screen and ( max-width: 550px ) {
.image { width: 100%; }
.content { padding-right: 2rem; }
nav { left: 0; right: auto; }
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Oswald:700|Montserrat:700" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment