ANOROC

Frontend

---

Den här hemsidan är skriven i HTML, CSS och Javascript.
Med hjälp av en JQuery-plugin har en kubanimation skapats på framsidan, som visar Anoroc.
Bootstrap har används för en smidigare och mer flexibel design.

Nedan följer kod som initierar kubanimationen.
Om du vill använda samma API, hittar du dokumentationen här.

                var swiper = new Swiper('.swiper-container', {
                    effect: 'cube',
                    loop: true,
                    pagination: {
                    el: '.swiper-pagination',
                    type: 'bullets',
                    clickable: false,
                }
            

Nedanstående kod håller koll på vilken bild som visas, med hjälp av en variabel last_img.
Varje bild har en siffra i slutet på sitt namn, som kan användas för att gömma/visa rätt text.

              slideChangeTransitionEnd: function (){
                // Query current image
                img = $('.swiper-slide-active').css('background-image').split('/');
                // Seperate image name from the whole url
                img = img[img.length - 1].split('.');
                // Seperate the image-number from the image name
                img = img[img.length - 2];
                // Get the image-number
                img = img[img.length - 1];
        
                // Hide old image-text
                $('#text' + last_img).hide();
                // Display the new one
                $('#text' + img).show();
                // Update the last-image text variable
                last_img = img;
              }