Android Play Store With Slick Carousel

In this example below you will see how to do a Android Play Store With Slick Carousel with some HTML / CSS and Javascript

Tried to replicate the Play Store to the best of my ability.

Thumbnail
This awesome code was written by -J0hn-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -J0hn- ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Android Play Store With Slick Carousel</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="wrapper">
  <header>
    <div class="search-bar">
      <a href="#" class="toggleNav"><i class="fa fa-bars"></i></a>
      <h2>google play</h2>
      <i class="fa fa-microphone"></i>
    </div><!--search-bar end-->
    <div class="categories">
      <h4>apps & games</h4>
      <h4>movies, music,<br> books</h4>
    </div>
  </header>
  
  <div class="center">
    <div class="slide">
      <img src="https://resource.supercheats.com/library/2016/1457457793marvelcontest.png"/>
      <div class="badge"><p>1/5</p></div>
    </div>
    <div class="slide">
      <img src="https://lh3.googleusercontent.com/0ETc4XfeWOKiO3jWoAlAJ6juQR3XozG_3vMafHe8gFa78qYlcv_xYHDDSx4mVI5XYyg=h310"/>
      <div class="badge"><p>2/5</p></div>
    </div>
    <div class="slide">
      <img src="http://images.designntrend.com/data/images/full/69841/the-walking-dead-road-to-survival-mobile-game.png?w=780"/>
      <div class="badge"><p>3/4</p></div>
    </div>
    <div class="slide">
      <img src="http://d.christianpost.com/full/87741/img.jpg"/>
      <div class="badge"><p>4/5</p></div>
    </div>
    <div class="slide">
      <img src="http://cdn.iphonehacks.com/wp-content/uploads/2016/07/Pokemon-Go.jpg"/>
      <div class="badge"><p>5/5</p></div>
    </div>
  </div><!--center end-->
  
  <div class="center2">
    <a href="#">top charts</a>
    <a href="#">games</a>
    <a href="#">categories</a>
    <a hre="#">early access</a>
    <a href="#">family</a>
    <a href="#">editor's choice</a>
  </div><!--center end-->
  
  
  <div class="side-nav">
  <div class="user-info">
    <i class="fa fa-times"></i>
    <div class="circle"><h1>j</h1></div>
    <h4>john doe</h4>
    <h5>john_doe@gmail.com</h5>
  </div><!--user-info-->
  <section>
    <h4><i class="fa fa-android"></i>apps & games</h4>
    <h4><i class="fa fa-clone"></i>my apps & games</h4>
    <h4><i class="fa fa-cubes"></i>movies, music, books</h4>
  </section>
  <section>
    <h4><i class="fa fa-film"></i>movies & TV</h4>
    <h4><i class="fa fa-music"></i>music</h4>
    <h4><i class="fa fa-book"></i>books</h4>
    <h4><i class="fa fa-newspaper-o"></i>newsstand</h4>
  </section>
  <section>
    <h4><i class="fa fa-user"></i>account</h4>
    <h4><i class="fa fa-credit-card"></i>redeem</h4>
    <h4><i class="fa fa-gift"></i>send gift</h4>
    <h4><i class="fa fa-bookmark"></i>wishlist</h4>
    <h4><i class="fa fa-gear"></i>settings</h4>
  </section>
  <section>
    <h4>help & feedback</h4>
    <h4>parent guide</h4>
    <h4>about google play</h4>
  </section>
</div><!--side-nav-->
  
  <div class="flex-this">
    <h5>recommended for you</h5>
    <h5 class="green">more</h5>
  </div><!--flex-this-->
  
  <div class="variable-width">
    <div class="card">
      <img src="https://lh3.googleusercontent.com/30koN0eGl-LHqvUZrCj9HT4qVPQdvN508p2wuhaWUnqKeCp6nrs9QW8v6IVGvGNauA=w300"/>
      <div class="flex">
      <h5>minecraft</h5>
        <i class="fa fa-ellipsis-v"></i>
        </div><!--flex end-->
      <div class="flex">
        <h5>3.9 <i class="fa fa-star"></i></h5>
        <h5 class="price">free</h5>
      </div><!--flex end-->
    </div><!--card end-->
    <div class="card">
      <img src="https://lh5.ggpht.com/gSJ1oQ4a5pxvNHEktd21Gh36QbtZMMx5vqFZfe47VDs1fzCEeMCyThqOfg3DsTisYCo=w300"/>
      <div class="flex">
      <h5>geometry Dash</h5>
        <i class="fa fa-ellipsis-v"></i>
        </div><!--flex end-->
      <div class="flex">
        <h5>4.8 <i class="fa fa-star"></i></h5>
        <h5 class="price">free</h5>
      </div><!--flex end-->
    </div><!--card end-->
    <div class="card">
      <img src="https://lh3.googleusercontent.com/-U3d7wYrZXD7-IFM54131wR46ngztYhZ0cHZ_TUSfB58Vrf_I48jKBQR6_xbA4sh4JUq=w300"/>
      <div class="flex">
      <h5>animation</h5>
        <i class="fa fa-ellipsis-v"></i>
        </div><!--flex end-->
      <div class="flex">
        <h5>4.6 <i class="fa fa-star"></i></h5>
        <h5 class="price">free</h5>
      </div><!--flex end-->
    </div><!--card end-->
    <div class="card">
      <img src="https://lh3.googleusercontent.com/w4MXonD3mBVlmuZ1mPfpGHj3jBDimbI78W4vJOZchhS3Tv3bLpmSwwgc-DQy9gsbKUI=w300"/>
      <div class="flex">
      <h5>fruit ninja</h5>
        <i class="fa fa-ellipsis-v"></i>
        </div><!--flex end-->
      <div class="flex">
        <h5>4.3 <i class="fa fa-star"></i></h5>
        <h5 class="price">free</h5>
      </div><!--flex end-->
    </div><!--card end-->
    <div class="card">
      <img src="https://lh3.googleusercontent.com/qodgRiD8cfsKNSdj4pvKt3VVE94CaWIM5-y4PE5VdxPqEEuerhWahDIYCEk5DnMMd7Y=w300"/>
      <div class="flex">
      <h5>sonic dash</h5>
        <i class="fa fa-ellipsis-v"></i>
        </div><!--flex end-->
      <div class="flex">
        <h5>4.4 <i class="fa fa-star"></i></h5>
        <h5 class="price">free</h5>
      </div><!--flex end-->
    </div><!--card end-->
    <div class="card">
      <img src="https://lh6.ggpht.com/onlNBInQHIZtB2rY24BwrEsUUKwE753ao1BAvvhOw2ePEN1IHIUjaR3gvlGd3jyKTdg=w300"/>
      <div class="flex">
      <h5>temple run</h5>
        <i class="fa fa-ellipsis-v"></i>
        </div><!--flex end-->
      <div class="flex">
        <h5>4.3 <i class="fa fa-star"></i></h5>
        <h5 class="price">free</h5>
      </div><!--flex end-->
    </div><!--card end-->
    <div class="card">
      <img src="http://downloads.andyroid.net/website/v2//wp-content/uploads/2015/11/angry-birds-2-icon.png"/>
      <div class="flex">
      <h5>angry birds</h5>
        <i class="fa fa-ellipsis-v"></i>
        </div><!--flex end-->
      <div class="flex">
        <h5>4.5 <i class="fa fa-star"></i></h5>
        <h5 class="price">free</h5>
      </div><!--flex end-->
    </div><!--card end-->
  </div><!--variable-width end-->
  
</div><!--wrapper end-->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/-J0hn-/android-play-store-with-slick-carousel-aBrmGz */
*,*:before,*:after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
::-webkit-scrollbar{
  width:0;
}
*:focus{
  outline:0;
}
a{
  text-decoration:none;
}
body{
  font-family:sans-serif;
  min-height:100vh;
/*   display:flex; */
/*   flex-direction:column; */
/*   align-items:center; */
  background:linear-gradient(0deg,gray,transparent);
}
.wrapper{
  margin:0 auto;
  padding-bottom:.80em;
  width:440px;
/*   height:100vh; */
  position:relative;
  overflow:hidden;
  background:rgb(240,240,240);
/*   overflow-y:scroll; */
}
header{
  height:120px;
  background:#009900;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  box-shadow:0 5px 20px -9px black;
}
header .search-bar{
  height:50px;
  width:95%;
  border-radius:3px;
  background:white;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 .80em;
}
.search-bar h2{
  text-transform:capitalize;
  font-weight:500;
  color:rgb(170,170,170);
  margin-right:auto;
  margin-left:1em;
}
.search-bar .fa-bars,.fa-microphone{
  font-size:1.3em;
  color:rgb(90,90,90);
}
header .categories{
  height:35px;
  display:flex;
  justify-content:space-around;
  align-items:center;
  flex:1 0 100%;
  text-align:center;
  text-transform:uppercase;
  color:white;
}
header .categories h4{
  flex:1 1 100%;
}
header .categories h4:first-child{
  border-bottom:solid 3px white;
  padding:1em 0;
}
.center{
  margin-top:1em;
  margin-bottom:1.2em;
}
.center .slide{
  height:220px;
  margin:auto 5px;
  position:relative;
}
.center img{
  width:100%;
  height:100%;
}
.center .slide:nth-of-type(1){
  margin-left:-.30em;
}
.badge{
  position:absolute;
  top:5px;
  right:5px;
  color:white;
  background:rgba(0,0,0,.5);
  padding:.60em 1em;
  border-radius:50px;
  font-size:.75em;
  letter-spacing:1px;
}
.center2{
  padding-left:.50em;
}
.center2 a{
  background:#009900;
  color:white;
  text-transform:uppercase;
  font-size:.93em;
  text-align:center;
  padding: .70em 2em;
  margin:auto .80em;
  border-radius:40px;
}
.center2 a:first-child{
  margin-left:3.3em;
}

/* SIDE NAV */
.side-nav{
  text-transform:capitalize;
  width:330px;
  height:100%;
  overflow-y:scroll;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:1;
  background:white;
  transform:translateX(-100%);
}

.side-nav .user-info{
  height:150px;
  background:url('https://images.pexels.com/photos/368774/pexels-photo-368774.jpeg?h=350&auto=compress&cs=tinysrgb')no-repeat center center;
  background-size:cover;
  color:white;
  line-height:1.9;
  padding:1.5em 0 0 .90em;
}
.side-nav .user-info .circle{
  background:rgb(150,150,150);
  width:60px;
  text-align:center;
  border-radius:50%;
}

.user-info h5{
  text-transform:lowercase;
}
.side-nav section{
  border-bottom:solid 1px lightgray;
}
.side-nav section:nth-of-type(1){
  margin-top:.40em;
}
.side-nav section:nth-of-type(1) h4:first-child{
  color:#009900;
  background:rgb(230,230,230);
}
.side-nav section:last-child{
  border-bottom:none;
}
.side-nav section h4{
  font-weight:200;
  padding:1em 0;
  cursor:pointer;
}
.side-nav section:nth-of-type(1) h4:nth-child(2){
  text-transform:lowercase;
  padding-left:1.1em;
}
.side-nav section h4:nth-child(2):first-letter{
  text-transform:uppercase;
}
.side-nav section:last-child h4{
  padding-left:.80em;
  font-size:.90em;
}
.side-nav section .fa{
  padding-right:1em;
  padding-left:.90em;
}
.side-nav section h4:hover{
  background:rgb(230,230,230);
  color:#009900;
}
/* ICON COLORS */
.fa-android{
  color:limegreen;
}
.fa-clone{
  color:gray;
}
.fa-cubes{
  color:blueviolet;
}
.fa-film{
  color:red;
}
.fa-music{
  color:orange;
}
.fa-book{
  color:blue;
}
.fa-newspaper-o{
  color:purple;
}
.fa-user,.fa-credit-card,.fa-gift,
.fa-bookmark,.fa-gear{
  color:rgb(85,85,85);
}
.side-nav .fa-times{
  color:white;
  font-size:1.3em;
  position:absolute;
  top:5px;
  right:10px;
  cursor: pointer;
}
.side-nav .fa-times:hover{
  color:lightgray;
}
.wrapper.grey-out:before{
  content:'';
  background:rgba(0,0,0,.7);
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:100;
}

.flex-this{
  margin-top:1.8em;
  margin-bottom:1em;
  padding:0 1em;
  text-transform:uppercase;
  display:flex;
  justify-content:space-between;
}
.flex-this h5:first-child{
  font-weight:200;
}
.flex-this .green{
  color:#009900;
  cursor:pointer;
}
/* VARIABLE-WIDTH */
.variable-width{
  padding-left:.60em;
}
.card{
  border:solid 1px gray;
  padding:.30em;
  margin:auto .20em;
  line-height:2;
  border-radius:3px;
  background:white;
  text-transform:capitalize;
}
.card img{
  width:105px;
}
 .flex{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
 .card .price{
  text-transform:uppercase;
  color:green;
}
 .card .fa-ellipsis-v,.fa-star{
  color:rgb(110,110,110);
}
 .card .fa-star{
  font-size:.80em;
}

/*Downloaded from https://www.codeseek.co/-J0hn-/android-play-store-with-slick-carousel-aBrmGz */
$(function(){
  $('.toggleNav').on('click', function(){
    $('.side-nav').css({'transform':'translateX(0)','transition':'.7s','z-index':'200'});
    $('.wrapper').not('.side-nav').addClass('grey-out');
  });
});
$(function(){
  $('.fa-times').on('click', function(){
      $('.side-nav').css({'transform':'translateX(-100%)'});
    $('.wrapper').removeClass('grey-out');
    });
  });

$('.center').slick({
  arrows: false,
  dots: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  centerMode: true,
  centerPadding:'15px',
});

$('.center2').slick({
  arrows: false,
  dots: false,
  slidesToShow: 2,
  slidesToScroll: 1,
  variableWidth: true,
  infinite: false
});

$('.variable-width').slick({
  dots: false,
  arrows: false,
  variableWidth: true,
  infinite: false,
  slidesToShow: 3,
  slidesToScroll: 1
});

Comments