<
Difference between revisions of "Carousel"
From AI4Society Forum
(Created page with "[public] <html> <style> .carouselContainer { min-height: 400px; padding: 5px 0 5px 0; } </style> <div style='border: 3px solid #004250; background: #004250;'> <div id="carou...") |
|||
| (27 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
<html> | <html> | ||
<style> | <style> | ||
| + | #contentSub { margin: 0; } | ||
.carouselContainer { min-height: 400px; padding: 5px 0 5px 0; } | .carouselContainer { min-height: 400px; padding: 5px 0 5px 0; } | ||
| + | body { background: #94c633; } | ||
| + | |||
| + | .card_photo { | ||
| + | height: auto !important; | ||
| + | } | ||
| + | |||
| + | .large_card { | ||
| + | display: flex; | ||
| + | flex-wrap: wrap; | ||
| + | } | ||
| + | |||
| + | .carouselPrev, .carouselNext { | ||
| + | background: #004250; | ||
| + | } | ||
| + | |||
| + | .carouselPrev:hover, .carouselNext:hover { | ||
| + | background: #0b4d48 !important; | ||
| + | } | ||
| + | |||
| + | #bodyContent { | ||
| + | background: #94c633; | ||
| + | } | ||
| + | |||
| + | @media screen and (max-width: 768px){ | ||
| + | .carouselPrev, .carouselNext { | ||
| + | width: 30px !important; | ||
| + | min-width: 30px !important; | ||
| + | } | ||
| + | |||
| + | .carouselMain { | ||
| + | margin-left: 30px; | ||
| + | margin-right: 30px; | ||
| + | } | ||
| + | } | ||
| + | |||
</style> | </style> | ||
| − | <div style='border: 3px solid # | + | <div style='border: 3px solid #94c633; background: #94c633;'> |
| − | <div id="carousel" style=" | + | <div id="carousel" style="width:100%;display:inline-block;"></div> |
<script type="text/javascript"> | <script type="text/javascript"> | ||
$('#bodyContent > h1').hide(); | $('#bodyContent > h1').hide(); | ||
| − | + | ||
| + | $(document).ready(function(){ | ||
| + | var people = new People(); | ||
| + | people.roles = [CI,AR]; | ||
| + | people.on("sync", function(){ | ||
| + | people.each(function(person){ | ||
| + | person.set('url', person.get('url').replace("?embed", "")); | ||
| + | }); | ||
| + | }); | ||
| + | |||
| + | var view = new CarouselView({el: "#carousel", model: people}); | ||
| + | people.on("sync", function(){ | ||
| + | $(".carouselPrev,.carouselNext").addClass("highlights-background-hover"); | ||
| + | }); | ||
| + | setInterval(function(){ | ||
| + | $('.carouselUrl').attr('target', '_parent'); | ||
| + | }, 100); | ||
| + | }); | ||
</script> | </script> | ||
</html> | </html> | ||
[/public] | [/public] | ||
Latest revision as of 16:19, 5 February 2021
|
