Skip to content

Instantly share code, notes, and snippets.

@jegazhu

jegazhu/index.html

Last active April 20, 2019 16:59
Show Gist options
  • Save jegazhu/13ef083fce14e2ac462d0591b2cfdf82 to your computer and use it in GitHub Desktop.
Save jegazhu/13ef083fce14e2ac462d0591b2cfdf82 to your computer and use it in GitHub Desktop.
Download ZIP
Interactive eCommerce card with gallery
Raw
index.html
<div class="container page-wrapper">
<div class="page-inner">
<div id="gallery-list" class="row">
<div class="gallery">
<div class="slider-wrapper">
<div class="product-info d-flex">
<span class="product-name">Zip wallet</span>
<span class="product-price">$162</span>
<p class="product-description">Zip Wallet. Volume Two</p>
</div>
<div class="product-image-wrapper">
<img src="" alt="" class="product-image">
</div>
<div class="product-image-wrapper-hover"></div>
<!-- Swiper -->
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide d-flex">
<img src="http://code.slicecrowd.com/labs/2/images/zip-wallet/3.jpg" alt="">
</div>
<div class="swiper-slide d-flex">
<img src="http://code.slicecrowd.com/labs/2/images/zip-wallet/2.jpg" alt="">
</div>
<div class="swiper-slide d-flex">
<img src="http://code.slicecrowd.com/labs/2/images/zip-wallet/1.jpg" alt="">
</div>
<div class="swiper-slide d-flex">
<img src="http://code.slicecrowd.com/labs/2/images/zip-wallet/4.jpg" alt="">
</div>
<div class="swiper-slide d-flex">
<img src="http://code.slicecrowd.com/labs/2/images/zip-wallet/5.jpg" alt="">
</div>
</div>
</div>
<div class="gb-wrapper">
<div class="swiper-container gallery-bottom">
<div class="swiper-wrapper">
<div class="swiper-slide d-flex">
<img src="http://code.slicecrowd.com/labs/2/images/zip-wallet/3.jpg" alt="">
</div>
<div class="swiper-slide d-flex">
<img src="http://code.slicecrowd.com/labs/2/images/zip-wallet/2.jpg" alt="">
</div>
<div class="swiper-slide d-flex">
<img src="http://code.slicecrowd.com/labs/2/images/zip-wallet/1.jpg" alt="">
</div>
<div class="swiper-slide d-flex">
<img src="http://code.slicecrowd.com/labs/2/images/zip-wallet/4.jpg" alt="">
</div>
<div class="swiper-slide d-flex">
<img src="http://code.slicecrowd.com/labs/2/images/zip-wallet/5.jpg" alt="">
</div>
</div>
</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30px" height="16px" viewBox="0 0 30 15.994" enable-background="new 0 0 30 15.994" xml:space="preserve">
<path fill="#FFF" d="M29.5,15.993c-0.131,0-0.262-0.051-0.359-0.152L15,1.212L0.859,15.841c-0.191,0.199-0.507,0.204-0.707,0.012
c-0.198-0.191-0.204-0.509-0.012-0.707l14.5-15c0.188-0.194,0.53-0.194,0.719,0l14.5,15c0.192,0.198,0.187,0.516-0.012,0.707
C29.75,15.946,29.625,15.993,29.5,15.993z"/>
</svg>
</div>
<div class="swiper-button-prev swiper-button-white">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30px" height="16px" viewBox="0 0 30 15.994" enable-background="new 0 0 30 15.994" xml:space="preserve">
<path fill="#FFF" d="M29.5,15.993c-0.131,0-0.262-0.051-0.359-0.152L15,1.212L0.859,15.841c-0.191,0.199-0.507,0.204-0.707,0.012
c-0.198-0.191-0.204-0.509-0.012-0.707l14.5-15c0.188-0.194,0.53-0.194,0.719,0l14.5,15c0.192,0.198,0.187,0.516-0.012,0.707
C29.75,15.946,29.625,15.993,29.5,15.993z"/>
</svg>
</div>
<!-- end Swiper -->
<div class="btns-wrapper">
<a href="#" class="btns info-button">
<i class="btn-icon info-icon"></i>
<span>Info</span>
</a>
<a href="#" class="btns buy-button">
<i class="btn-icon buy-icon"></i>
<span>Buy now</span>
</a>
</div>
</div> <!-- end slider-wrapper -->
</div>
</div>
</div>
</div> <!-- end page-wrapper -->
Raw
script.js
var mySwiperBottom = [],
mySwiperThumbs = [];
// get active IMG
$("#gallery-list").find(".gallery").each(function(index, el) {
var _this = $(this),
i = index;
// init BigSlider
var settingsBottom = {
nextButton: _this.find('.swiper-button-next'),
prevButton: _this.find('.swiper-button-prev')
};
mySwiperBottom[i] = new Swiper(_this.find('.gallery-bottom'), settingsBottom);
mySwiperThumbs[i] = new Swiper(_this.find('.gallery-thumbs'), settingsBottom);
mySwiperBottom[i].params.control = mySwiperThumbs[i];
mySwiperThumbs[i].params.control = mySwiperBottom[i];
var galleryImgThumbSRC = _this.find(".gallery-thumbs .swiper-slide-active img").attr("src");
_this.find(".product-image-wrapper img").prop("src", galleryImgThumbSRC);
// destroy and init, when the mouse leaves the element
_this.find('.slider-wrapper').hover(function() {
/* Stuff to do when the mouse enters the element */
}, function() {
// mySwiperBottom.params.effect = 'fade';
mySwiperBottom[i].slideTo(0, 100);
mySwiperThumbs[i].slideTo(0, 100);
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>
Raw
style.css
body,
html {
height: 100%;
font-family: 'Open Sans', sans-serif;
}
.d-flex, .btns-wrapper, .product-image-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.flex-centerY-centerX, .product-image-wrapper, .swiper-slide {
justify-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.page-wrapper {
height: 100%;
display: table;
}
.page-wrapper .page-inner {
display: table-cell;
vertical-align: middle;
}
.gallery {
width: 290px;
height: 300px;
margin: 15px auto;
position: relative;
display: block;
}
@media (max-width: 991px) {
.gallery {
width: 270px;
}
}
@media (max-width: 767px) {
.gallery {
width: 255px;
}
}
.slider-wrapper {
width: 100%;
height: 100%;
background: #35444c;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.slider-wrapper .product-info {
height: 100%;
padding: 30px 30px 10px 45px;
justify-content: space-between;
-webkit-box-pack: space-between;
-ms-flex-pack: space-between;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: flex-end;
align-content: flex-end;
-ms-flex-flow: wrap;
flex-flow: wrap;
}
.slider-wrapper .product-name {
letter-spacing: 0.5px;
}
.slider-wrapper .product-name,
.slider-wrapper .product-description {
top: 0;
color: #fff;
position: relative;
-webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
-moz-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
-o-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
/* easeOutExpo */
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
-moz-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
-o-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
/* easeOutExpo */
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
font-weight: 300;
}
.slider-wrapper .product-price {
color: #ff0;
top: 0;
position: relative;
-webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
-moz-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
-o-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
/* easeOutExpo */
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
-moz-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
-o-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
/* easeOutExpo */
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
font-weight: 300;
}
.slider-wrapper .product-description {
font-size: 18px;
letter-spacing: -0.1px;
}
.slider-wrapper .product-name,
.slider-wrapper .product-price {
font-size: 30px;
}
.slider-wrapper:hover .product-image-wrapper {
left: -75px;
top: 0;
width: 121.53px;
height: 80px;
-webkit-box-shadow: 20px 20px 25px rgba(0, 0, 0, 0.1) !important;
box-shadow: 20px 20px 25px rgba(0, 0, 0, 0.1) !important;
-webkit-animation: animateProductImg 1s;
-moz-animation: animateProductImg 1s;
-o-animation: animateProductImg 1s;
-ms-animation: animateProductImg 1s;
animation: animateProductImg 1s;
}
@media (max-width: 991px) {
.slider-wrapper:hover .product-image-wrapper {
left: -55px;
}
}
@media (max-width: 767px) {
.slider-wrapper:hover .product-image-wrapper {
width: 96.56px;
left: -20px;
}
}
.slider-wrapper:hover .btns-wrapper {
opacity: 1;
-webkit-transition-delay: 0.65s;
-o-transition-delay: 0.65s;
transition-delay: 0.65s;
}
.slider-wrapper:hover .swiper-button-prev,
.slider-wrapper:hover .swiper-button-next {
right: 29px;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
opacity: 1;
}
.slider-wrapper:hover .gb-wrapper {
opacity: 1;
}
.slider-wrapper:hover .gallery-bottom {
top: 0;
left: 0;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.slider-wrapper:hover .gallery-bottom .swiper-slide {
width: 100% !important;
}
.slider-wrapper:hover .gallery-thumbs {
width: 365px;
height: 80px;
top: 0;
z-index: 999;
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
@media (max-width: 767px) {
.slider-wrapper:hover .gallery-thumbs {
width: 290px;
}
}
.slider-wrapper:hover .gallery-thumbs .swiper-slide {
width: 33.3% !important;
}
.slider-wrapper:hover .swiper-container {
opacity: 1;
}
.slider-wrapper:hover .product-name,
.slider-wrapper:hover .product-description {
top: 20px;
opacity: 0;
}
.slider-wrapper:hover .product-price {
top: 33px;
color: #a1a5a6;
}
.btns-wrapper {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
left: 20px;
bottom: 10px;
opacity: 0;
-webkit-transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
-moz-transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
-o-transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
/* easeOutExpo */
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
-moz-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
-o-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
/* easeOutExpo */
}
.btns-wrapper .btns {
margin: 0 20px;
font-weight: 600;
color: #fff;
font-size: 11px;
text-transform: uppercase;
}
.btns-wrapper .btn-icon {
width: 16px;
height: 16px;
display: block;
margin: 0 auto 10px auto;
}
.btns-wrapper .info-icon {
background: url("http://code.slicecrowd.com/labs/2/images/info-icon.png") center center no-repeat;
}
.btns-wrapper .buy-icon {
background: url("http://code.slicecrowd.com/labs/2/images/buy-icon.png") center center no-repeat;
}
.product-image-wrapper {
width: 230px;
height: 155px;
position: absolute;
top: 32px;
left: -75px;
background: #dadbd2;
z-index: 998;
overflow: hidden;
-webkit-box-shadow: 20px 20px 25px rgba(0, 0, 0, 0.3) !important;
box-shadow: 20px 20px 25px rgba(0, 0, 0, 0.3) !important;
-webkit-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
-moz-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
-o-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
/* easeOutExpo */
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
-moz-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
-o-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
/* easeOutExpo */
}
@media (max-width: 991px) {
.product-image-wrapper {
width: 210px;
height: 145px;
left: -45px;
}
}
@media (max-width: 767px) {
.product-image-wrapper {
width: 190px;
height: 130px;
left: -25px;
}
}
.product-image-wrapper .product-image {
max-width: 100%;
height: 100%;
}
.product-image-wrapper-hover {
width: 75px;
height: 155px;
position: absolute;
top: 32px;
left: -75px;
background: transparent;
z-index: 1000;
}
@keyframes animateProductImg {
0% {
z-index: 1000;
}
100% {
z-index: 997;
box-shadow: none;
}
}
.swiper-container {
width: 120%;
position: absolute;
margin-left: auto;
margin-right: auto;
-webkit-transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
-moz-transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
-o-transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
/* easeOutExpo */
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
-moz-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
-o-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
/* easeOutExpo */
-webkit-box-shadow: 20px 20px 25px rgba(0, 0, 0, 0.3);
box-shadow: 20px 20px 25px rgba(0, 0, 0, 0.3);
}
.swiper-slide {
background: #dadbd2;
overflow: hidden;
}
.swiper-slide img {
max-width: 100%;
height: 100%;
}
.gb-wrapper {
width: 260px;
height: 190px;
opacity: 0;
position: absolute;
overflow: hidden;
left: 0;
top: 80px;
-webkit-transition: all 0.15s cubic-bezier(0.19, 1, 0.22, 1);
-moz-transition: all 0.15s cubic-bezier(0.19, 1, 0.22, 1);
-o-transition: all 0.15s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 0.15s cubic-bezier(0.19, 1, 0.22, 1);
/* easeOutExpo */
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
-moz-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
-o-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
/* easeOutExpo */
}
@media (max-width: 991px) {
.gb-wrapper {
width: 240px;
}
}
@media (max-width: 767px) {
.gb-wrapper {
width: 215px;
}
}
.gallery-bottom {
width: 230px;
height: 155px;
top: -200px;
left: 0;
-webkit-transition: all 600ms cubic-bezier(0.075, 0.82, 0.165, 1);
transition: all 600ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
@media (max-width: 991px) {
.gallery-bottom {
width: 210px;
}
}
@media (max-width: 767px) {
.gallery-bottom {
width: 180px;
height: 130px;
}
}
.gallery-bottom .swiper-slide {
-webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
-moz-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
-o-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
/* easeOutExpo */
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
-moz-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
-o-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
/* easeOutExpo */
}
.gallery-thumbs {
width: 122px;
height: 80px;
left: -75px;
top: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
-moz-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
-o-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
/* easeOutExpo */
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
-moz-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
-o-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
/* easeOutExpo */
opacity: 0;
z-index: 99;
background: #2d3b42;
}
@media (max-width: 991px) {
.gallery-thumbs {
left: -55px;
}
}
@media (max-width: 767px) {
.gallery-thumbs {
width: 96.56px;
left: -20px;
}
}
.gallery-thumbs .swiper-slide-active {
z-index: 999;
}
.gallery-thumbs .swiper-slide {
width: 100%;
height: 100%;
-webkit-transition: width 0.3s cubic-bezier(0.19, 1, 0.22, 1);
-moz-transition: width 0.3s cubic-bezier(0.19, 1, 0.22, 1);
-o-transition: width 0.3s cubic-bezier(0.19, 1, 0.22, 1);
transition: width 0.3s cubic-bezier(0.19, 1, 0.22, 1);
/* easeOutExpo */
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
-moz-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
-o-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
/* easeOutExpo */
}
.gallery-thumbs .swiper-slide:after {
width: 100%;
height: 100%;
content: "";
background: rgba(45, 59, 66, 0.76);
position: absolute;
left: 0;
top: 0;
display: block;
}
.gallery-thumbs .swiper-slide-active {
opacity: 1;
}
.gallery-thumbs .swiper-slide-active:after {
content: none;
}
.swiper-button-next,
.swiper-button-prev {
width: 16px;
height: 31px;
background: none !important;
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
opacity: 0;
}
.swiper-button-next {
top: 140px;
right: 70px;
-webkit-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
-moz-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
-o-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
/* easeOutExpo */
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
-moz-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
-o-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
/* easeOutExpo */
opacity: 0;
z-index: 100;
}
.swiper-button-next svg {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.swiper-button-next:hover path {
fill: #ff0;
}
.swiper-button-prev {
top: 200px;
left: auto;
right: -30px;
-webkit-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
-moz-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
-o-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
/* easeOutExpo */
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
-moz-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
-o-transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.9, 1);
/* easeOutExpo */
opacity: 0;
z-index: 100;
}
.swiper-button-prev svg {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.swiper-button-prev:hover path {
fill: #ff0;
}
.swiper-slide {
width: 100% !important;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,600" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment