Android Play Store With Slick Carousel

Developer
Size
4,982 Kb
Views
8,096

How do I make an android play store with slick carousel?

Tried to replicate the Play Store to the best of my ability.. What is a android play store with slick carousel? How do you make a android play store with slick carousel? This script and codes were developed by John on 05 January 2023, Thursday.

Android Play Store With Slick Carousel Previews

Android Play Store With Slick Carousel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<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"> <a href="#"><i class="fa fa-times"></i></a> <div class="circle"><h1>j</h1></div> <h4>john doe</h4> <h5>[email protected]</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>

Android Play Store With Slick Carousel - Script Codes CSS Codes

*,*: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('http://img3.themebin.com/1920x1080/google_abstract_hd.jpg')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;
}
.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;
}

Android Play Store With Slick Carousel - Script Codes JS Codes

$(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
});
Android Play Store With Slick Carousel - Script Codes
Android Play Store With Slick Carousel - Script Codes
Home Page Home
Developer John
Username -J0hn-
Uploaded January 05, 2023
Rating 3
Size 4,982 Kb
Views 8,096
Do you need developer help for Android Play Store With Slick Carousel?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

John (-J0hn-) Script Codes
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!