<
Difference between revisions of "Carousel"
From AI4Society Forum
| (20 intermediate revisions by the same user not shown) | |||
| Line 4: | Line 4: | ||
#contentSub { margin: 0; } | #contentSub { margin: 0; } | ||
.carouselContainer { min-height: 400px; padding: 5px 0 5px 0; } | .carouselContainer { min-height: 400px; padding: 5px 0 5px 0; } | ||
| − | body { background: # | + | 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(); | ||
| Line 22: | Line 48: | ||
var people = new People(); | var people = new People(); | ||
people.roles = [CI,AR]; | people.roles = [CI,AR]; | ||
| − | + | people.on("sync", function(){ | |
people.each(function(person){ | people.each(function(person){ | ||
person.set('url', person.get('url').replace("?embed", "")); | 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> | ||
Latest revision as of 16:19, 5 February 2021
|
