Android Play Store With Slick Carousel

Developer
John
Size
4,982 Kb
Views
8,092

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
IQ Test

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,092
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
Name
Spotify
A tribute page for Eddie Guerrero
Google preloader
Sort movies with React JS
CodingPhase Mentorship 2nd Project
Airbnb
A Pen by John
Beats By Dre website
Netflix with slick carousel plugin
E commerce website from dribbble
Create amazing video scripts 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!