Difference between revisions of "Team:AFCM-Egypt"

Line 293: Line 293:
 
     <section class="section-wrapper add container">
 
     <section class="section-wrapper add container">
 
<div class="slider-wrapper theme-mi-slider">
 
<div class="slider-wrapper theme-mi-slider">
<div id="slider" class="nivoSlider" style="max-height:400px">  
+
                    <img src="https://static.igem.org/mediawiki/2017/b/bb/2-AFCM-Egypt-sponsers-EFIA_LOGO.png" alt="" title="#htmlcaption1" />
+
<div class="afcmslider-holder">
                    <img src="https://static.igem.org/mediawiki/2017/b/bd/3-AFCM-Egypt-sponsers-Pharco_Logo.png" alt="" title="#htmlcaption1" />
+
                        <button class="afcmcontrols" id="afcmcontrols-left">&#10094;</button>
                    <img src="https://static.igem.org/mediawiki/2017/3/3b/4-AFCM-Egypt-sponsers-Nationel_Research.png" alt="" title="#htmlcaption1"/>
+
                        <button class="afcmcontrols" id="afcmcontrols-right">&#10095;</button>
    <img src="https://static.igem.org/mediawiki/2017/f/f1/1-AFCM-Egypt-sponsers-vitabiotics.png" alt="" title="#htmlcaption1" />  
+
                        <ul id="afcmslides">
    <img src="https://static.igem.org/mediawiki/2017/6/60/9-AFCM-Egypt-sponsers-Benchling.png" alt="" title="#htmlcaption1" />  
+
                            <li class="afcmslide afcmshowing">
    <img src="https://static.igem.org/mediawiki/2017/b/b4/8-AFCM-Egypt-sponsers-Zewail_logo.png" alt="" title="#htmlcaption1"/>
+
                            <img src="https://static.igem.org/mediawiki/2017/b/bb/2-AFCM-Egypt-sponsers-EFIA_LOGO.png">
                    <img src="https://static.igem.org/mediawiki/2017/6/67/7-AFCM-Egypt-sponsers-Image-2.jpeg" alt="" title="#htmlcaption1"/>
+
                            <img src="https://static.igem.org/mediawiki/2017/b/bd/3-AFCM-Egypt-sponsers-Pharco_Logo.png">
                    <img src="https://static.igem.org/mediawiki/2017/e/eb/6-AFCM-Egypt-sponsers-SimEra.png" alt="" title="#htmlcaption1"/>
+
                            <img src="https://static.igem.org/mediawiki/2017/3/3b/4-AFCM-Egypt-sponsers-Nationel_Research.png">
                    <img src="https://static.igem.org/mediawiki/2017/3/37/5-AFCM-Egypt-sponsers-IDT.png" alt="" title="#htmlcaption1"/>
+
                            <img src="https://static.igem.org/mediawiki/2017/f/f1/1-AFCM-Egypt-sponsers-vitabiotics.png">
</div>
+
                            </li>
 +
                            <li class="afcmslide afcmshowing">
 +
                            <img src="https://static.igem.org/mediawiki/2017/6/67/7-AFCM-Egypt-sponsers-Image-2.jpeg">
 +
                            <img src="https://static.igem.org/mediawiki/2017/e/eb/6-AFCM-Egypt-sponsers-SimEra.png">
 +
                            <img src="https://static.igem.org/mediawiki/2017/3/37/5-AFCM-Egypt-sponsers-IDT.png">
 +
                            <img src="https://static.igem.org/mediawiki/2017/6/60/9-AFCM-Egypt-sponsers-Benchling.png">
 +
                            <img src="https://static.igem.org/mediawiki/2017/b/b4/8-AFCM-Egypt-sponsers-Zewail_logo.png"></li>
 +
                        </ul>
 +
                       
 +
                </div>
 
</div>
 
</div>
 
</section>
 
</section>
Line 309: Line 318:
 
<script>
 
<script>
 
$(document).ready(function() {
 
$(document).ready(function() {
$('#slider').nivoSlider();
+
var slides = document.querySelectorAll('#afcmslides .afcmslide');
if($.isFunction('owlCarousel')){
+
        var currentSlide = 0;
  $('.add-owl').owlCarousel({
+
        var slideInterval = setInterval(nextSlide, 5000);
         items: 4,
+
        var controls = document.querySelectorAll('.afcmcontrols');
         nav: true,
+
        var playing = true;
        navText: false,
+
        var pauseButton = document.getElementById('afcmslides');
         dots: false,
+
        var next = document.getElementById('afcmcontrols-left');
         loop: true
+
        var previous = document.getElementById('afcmcontrols-right');
    });
+
        for (var i = 0; i < slides.length; i++) {
}
+
            slides[i].style.position = 'absolute';
 
+
        }
 +
        for (var i = 0; i < controls.length; i++) {
 +
            controls[i].style.display = 'inline-block';
 +
        }
 +
        function nextSlide() {
 +
            goToSlide(currentSlide + 1);
 +
        }
 +
        function previousSlide() {
 +
            goToSlide(currentSlide - 1);
 +
         }
 +
         function goToSlide(n) {
 +
            if (playing) {
 +
                slides[currentSlide].className = 'afcmslide';
 +
               
 +
                currentSlide = (n + slides.length) % slides.length;
 +
                //slides[currentSlide].className = 'afcmslide afcmshowing';
 +
                $(slides[currentSlide]).css({ opacity: 0.0 }, "slow")
 +
                .addClass('afcmshowing')
 +
                .animate({
 +
                    opacity: 1.0
 +
                }, "slow", function () {
 +
                    $(slides[currentSlide]).removeClass('active');
 +
                });
 +
               
 +
            }
 +
         }
 +
        $('.afcmslide').click(function () {
 +
            if (playing) {
 +
                pauseSlideshow();
 +
            } else {
 +
                playSlideshow();
 +
            }
 +
           
 +
        })
 +
        function pauseSlideshow() {
 +
            playing = false;
 +
            clearInterval(slideInterval);
 +
         }
 +
        function playSlideshow() {
 +
            playing = true;
 +
            slideInterval = setInterval(nextSlide, 3000);
 +
        }
 +
        next.onclick = function () {
 +
            playing = true;
 +
            nextSlide();
 +
            pauseSlideshow();
 +
        };
 +
        previous.onclick = function () {
 +
            playing = true;
 +
            previousSlide();
 +
            pauseSlideshow();
 +
        };
  
 
});
 
});

Revision as of 00:32, 17 October 2017

A F C M