basics of the slider or carousel
This commit is contained in:
talksik
@@ -1,18 +1,20 @@
|
||||
asset-manifest.json,1599243724293,6ac82a3c904abb66fc29184d6b4aad4702545e75983310c95d2269544c0220e5
|
||||
favicon.ico,1599243720061,a08fa4488c3ecef62d9effd03b3a989929bdcbecf5e905941f9034a15bd3dba3
|
||||
index.html,1599243724293,22a4509bf843c26ace466a80c6c64b44e5d648c625c5abcf2ef58519300333d4
|
||||
logo192.png,1599243720062,caff018b7f1e8fd481eb1c50d75b0ef236bcd5078b1d15c8bb348453fee30293
|
||||
precache-manifest.47fc772db94cf7b51c7a0d65a3029836.js,1599243724293,45563a66a7b1d1228f6d373574f8606e224d2fd86752345d4bf7c52deab64b69
|
||||
robots.txt,1599243720065,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
|
||||
static/css/main.849021ef.chunk.css,1599243724295,99e8350f961109ce1971591f32e41d5524d8acf25df6064a07147b90201f14cf
|
||||
service-worker.js,1599243724293,60ad1128a91766033102a4a8d5510cc5cb0c9ba6df2bbbfa52006b72f0962662
|
||||
logo512.png,1599243720063,191fc21360b4ccfb1cda11a1efb97f489ed22672ca83f4064316802bbfdd750e
|
||||
static/css/main.849021ef.chunk.css.map,1599243724295,818d4d8c41d6aea7f42712c7b01f76cdc3bd36f7e0c9c94e8ca35c98c8949708
|
||||
static/js/2.39b14872.chunk.js.LICENSE.txt,1599243724295,939252c822144d73596651aefa66be9e6a80d502374ef41a485d24f58127feac
|
||||
static/js/main.988f5912.chunk.js,1599243724294,bf0c760567ebc8527bbf587239097995d31e2b2154c21bc2a7bbb005ef9576cf
|
||||
manifest.json,1599243720064,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900
|
||||
static/js/runtime-main.fa53fba5.js,1599243724296,b9289f9a9022bc228976645ecd66e888587d9f995a502b741e475361470248f9
|
||||
static/js/main.988f5912.chunk.js.map,1599243724295,d882b9a4e532bdf2c4134940e13a196b828290556128be6866d17b49a748fbec
|
||||
static/js/runtime-main.fa53fba5.js.map,1599243724295,e98d47efe293730d8b3fdf7596cd1083175dffaeb1d5e4c3e07b2a92a5ecb5d8
|
||||
static/js/2.39b14872.chunk.js,1599243724296,2c6a13537068bd4f65166ffc82510ff29bf6fc10ba0031ad655a858fb93acf01
|
||||
static/js/2.39b14872.chunk.js.map,1599243724295,10cf11ab9beb78f41280d290e778c361ccf8ee96b70ec8c97608bacba5caab80
|
||||
asset-manifest.json,1599264567988,67d42dfbf94c68c48750a81ec73daaeb0130d6df329bad6afc222cbc0aedc648
|
||||
favicon.ico,1599264562456,a08fa4488c3ecef62d9effd03b3a989929bdcbecf5e905941f9034a15bd3dba3
|
||||
index.html,1599264567988,4b54157c0511c67cdb815147ce337acce9943c9f5490c625b9aa86284505c2b7
|
||||
manifest.json,1599264562459,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900
|
||||
logo192.png,1599264562457,caff018b7f1e8fd481eb1c50d75b0ef236bcd5078b1d15c8bb348453fee30293
|
||||
precache-manifest.d67c964ef17d11e2815a2ffc38b72c05.js,1599264567988,75b411ba4378639882d1322cb20c0ac233501a71aa8f5f273c416e4c6af90c2c
|
||||
robots.txt,1599264562459,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
|
||||
service-worker.js,1599264567988,b941b101d32cf1423cda06f49c0df7da166af46bf3db915b96073525a822c137
|
||||
logo512.png,1599264562458,191fc21360b4ccfb1cda11a1efb97f489ed22672ca83f4064316802bbfdd750e
|
||||
static/css/main.3b506d81.chunk.css,1599264567989,14b2b645caed6e3c4157e607069de037547ca6c0f4214c6d81270b6b6d5c7fa9
|
||||
static/js/2.cccf8d68.chunk.js.LICENSE.txt,1599264567990,939252c822144d73596651aefa66be9e6a80d502374ef41a485d24f58127feac
|
||||
static/css/main.3b506d81.chunk.css.map,1599264567989,aa72b92143c13d94e32fa480ff298b393655527661dc56d7e854f582e111f111
|
||||
static/js/main.db85f575.chunk.js,1599264567990,85a6eec4a6356c9aadc9bd6bdcbffa4af76c41da533d0cfa71bd126b635a9d18
|
||||
static/js/runtime-main.fa53fba5.js,1599264567990,b9289f9a9022bc228976645ecd66e888587d9f995a502b741e475361470248f9
|
||||
static/js/runtime-main.fa53fba5.js.map,1599264567989,e98d47efe293730d8b3fdf7596cd1083175dffaeb1d5e4c3e07b2a92a5ecb5d8
|
||||
static/js/main.db85f575.chunk.js.map,1599264567990,4dbdc23ba7ea4eb25b8e514537a1033b4952bb41b069d905973a6c5c9f44807d
|
||||
static/js/2.cccf8d68.chunk.js,1599264567989,f0800681209a1f179f96d32ec06228eb4ee2aa3b88463cb892bbc96320f8907d
|
||||
static/js/2.cccf8d68.chunk.js.map,1599264567990,1bcf64b78f83f08fe14bb1064533b0d9482d7c4d88c195579d95637512555e8d
|
||||
static/media/rameelo_cover_photo.298525d7.png,1599264567989,584a99ed276e0ed86db78cca3f84462b4d2bba931a7cb7ff335265526dfedbbc
|
||||
|
||||
Generated
+45
@@ -3587,6 +3587,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"classnames": {
|
||||
"version": "2.2.6",
|
||||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
|
||||
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
|
||||
},
|
||||
"clean-css": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
|
||||
@@ -4869,6 +4874,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"enquire.js": {
|
||||
"version": "2.1.6",
|
||||
"resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
|
||||
"integrity": "sha1-PoeAybi4NQhMP2DhZtvDwqPImBQ="
|
||||
},
|
||||
"entities": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz",
|
||||
@@ -7955,6 +7965,14 @@
|
||||
"resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
|
||||
"integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
|
||||
},
|
||||
"json2mq": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
|
||||
"integrity": "sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=",
|
||||
"requires": {
|
||||
"string-convert": "^0.2.0"
|
||||
}
|
||||
},
|
||||
"json3": {
|
||||
"version": "3.3.3",
|
||||
"resolved": "https://registry.npmjs.org/json3/-/json3-3.3.3.tgz",
|
||||
@@ -8166,6 +8184,11 @@
|
||||
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
|
||||
"integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
|
||||
},
|
||||
"lodash.debounce": {
|
||||
"version": "4.0.8",
|
||||
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
|
||||
},
|
||||
"lodash.memoize": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
|
||||
@@ -11223,6 +11246,18 @@
|
||||
"workbox-webpack-plugin": "4.3.1"
|
||||
}
|
||||
},
|
||||
"react-slick": {
|
||||
"version": "0.27.10",
|
||||
"resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.27.10.tgz",
|
||||
"integrity": "sha512-8HJH+dEZH2+lVxLJq4sQ37iPcAzAma0H4v19qX2dmPKr+j+no4NVRo3U3kjT/eVxhKWh+wZ00FWKR2s+Q+Lgng==",
|
||||
"requires": {
|
||||
"classnames": "^2.2.5",
|
||||
"enquire.js": "^2.1.6",
|
||||
"json2mq": "^0.2.0",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"resize-observer-polyfill": "^1.5.0"
|
||||
}
|
||||
},
|
||||
"read-pkg": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
|
||||
@@ -11512,6 +11547,11 @@
|
||||
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
|
||||
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
|
||||
},
|
||||
"resize-observer-polyfill": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
|
||||
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.15.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.0.tgz",
|
||||
@@ -12591,6 +12631,11 @@
|
||||
"resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
|
||||
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
|
||||
},
|
||||
"string-convert": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
|
||||
"integrity": "sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c="
|
||||
},
|
||||
"string-length": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz",
|
||||
|
||||
+2
-1
@@ -11,7 +11,8 @@
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "3.4.3"
|
||||
"react-scripts": "3.4.3",
|
||||
"react-slick": "^0.27.10"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@@ -37,6 +37,19 @@
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
|
||||
<!-- Slick Library Styles -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
charset="UTF-8"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
|
||||
/>
|
||||
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -3,8 +3,45 @@ import React from 'react';
|
||||
// Styles
|
||||
import './landing.scss';
|
||||
|
||||
// Slick
|
||||
import Slider from 'react-slick';
|
||||
|
||||
export default class Landing extends React.Component {
|
||||
render() {
|
||||
var sliderSettings = {
|
||||
dots: true,
|
||||
infinite: true,
|
||||
speed: 300,
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
centerMode: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1024,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
infinite: true,
|
||||
dots: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 600,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="rameelo-wrapper">
|
||||
<div className="top-section">
|
||||
@@ -112,6 +149,35 @@ export default class Landing extends React.Component {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="events-section">
|
||||
<div class="events-inner-container">
|
||||
<span>Upcoming Events</span>
|
||||
<div class="carousel-container">
|
||||
<Slider {...sliderSettings}>
|
||||
<div className="event-card">
|
||||
<span className="event-card-graphic"></span>
|
||||
<span className="event-card-info"></span>
|
||||
</div>
|
||||
<div className="event-card">
|
||||
<h3>2</h3>
|
||||
</div>
|
||||
<div className="event-card">
|
||||
<h3>3</h3>
|
||||
</div>
|
||||
<div className="event-card">
|
||||
<h3>4</h3>
|
||||
</div>
|
||||
<div className="event-card">
|
||||
<h3>5</h3>
|
||||
</div>
|
||||
<div className="event-card">
|
||||
<h3>6</h3>
|
||||
</div>
|
||||
</Slider>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
margin: 0 !important;
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
padding: 4em 6em;
|
||||
padding: 3em 6em;
|
||||
}
|
||||
|
||||
.row {
|
||||
@@ -186,3 +186,59 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.events-section {
|
||||
background: #f4f4f4 0% 0% no-repeat padding-box;
|
||||
padding: 3em 4em;
|
||||
|
||||
.events-inner-container {
|
||||
span {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.carousel-container {
|
||||
margin: 1em 0;
|
||||
|
||||
.slick-arrow::before {
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
/* the slides */
|
||||
.slick-slide {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
ul {
|
||||
background: #f4f4f4 0% 0% no-repeat padding-box !important;
|
||||
}
|
||||
|
||||
.event-card {
|
||||
width: 367px;
|
||||
height: 134px;
|
||||
/* UI Properties */
|
||||
background: #ffffff 0% 0% no-repeat padding-box;
|
||||
box-shadow: 5px 5px 30px #0000001c;
|
||||
opacity: 1;
|
||||
|
||||
padding: 1rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.event-card-graphic {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.event-card-info {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user