<
  AI4Society Website  

The following NCEs have contributed to the development of the Forum:
GRAND, AGE-WELL, GlycoNet, CFN
Les RCE suivants ont contribué au développement du Forum : GRAND, AGE-WELL, GlycoNet, CFN

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 #004250; background: #004250;'>
+
<div style='border: 3px solid #94c633; background: #94c633;'>
<div id="carousel" style="min-width:400px;width:100%;display:inline-block;"></div>
+
<div id="carousel" style="width:100%;display:inline-block;"></div>
 
<script type="text/javascript">
 
<script type="text/javascript">
 
$('#bodyContent > h1').hide();
 
$('#bodyContent > h1').hide();
createCarousel("#carousel", [CI,AR]);
+
 
 +
$(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